こんにちは!
シタテルでエンジニアをしている建山です。
主に工場向けのマイオペというシステムの開発を行っています。
マイオペでは、インフラとして本番、ステージング、開発、feature環境を用意して開発していますが、新機能をテストする環境としてfeature環境を使用しています。
そして、feature環境にnetlifyというサービスを使用しています。
netlifyとは
Netlifyは静的なサイトをすばやく提供できるWebサービスです。フロントエンドのビルド、デプロイ、ホスティングのすべてを行ってくれます。
今回の概要
デプロイの流れとしては、github -> circleci ➔ netlify
となっています。netlifyにはビルドする機能が備わっているので、github -> netlify
が可能なのですが、マイオペでは、ビルドの際にjavaを使用していて、netlifyのビルドで対応されていないので、circleciでビルドを行ったあと、netlifyにデプロイすることにしました。
今回の前提
- ビルドはcircleciでおこなう
- ビルドが終わったものをnetlifyにデプロイする
- 指定のサイトURLにデプロイする
「それ、netlifyじゃなくてAWS S3でよくない?」っていうツッコミはあるとおもいますが、まずは使ってみたということでご容赦ください。
方法
事前にnetlifyにサイトを作成してください。(画面やcliを使って作成できます)
netlify cliをインストールします。今回は、プロジェクトにnpm install --save netlify-cli
でいれました。circleciのconfig.ymlのstepsにnpm install -g netlify-cli
でインストールしてもいいと思います。
次に、circleciのconfig.ymlでデプロイの設定をします。
こんな感じで、インストールされたnetlify cliを使って、デプロイします。
<<他省略>>
# run deploy
- run:
name: deploy
command: |
if [[ "$CIRCLE_BRANCH" =~ ^.*-netlify.* ]]; then
node_modules/netlify-cli/bin/cli.js deploy --site-id $NETLIFY_SITE_ID -p ${SC_DIR}/ --access-token $NETLIFY_ACCESS_TOKEN
fi
${SC_DIR}
にはデプロイしたいディレクトリをいれてください。$NETLIFY_SITE_ID
と $NETLIFY_ACCESS_TOKEN
はcircleciの環境変数にセットしてお使い頂いたほうがいいかと思います。
上の例だと、ブランチ名に"-netlify"が含まれているとnetlifyにデプロイされるようにしています。
実際には、利用状況にあわせてカスタマイズしてください。
たとえば、"abcd-netlify"というブランチでgithubにpushすると、
デプロイされます!
今回は同じURLにデプロイしていますが、デプロイのたびに違うサイトURLを発行してデプロイもできるようです。
netlifyの中で、ビルドもいろいろできるようになっているので、今回のように限定的な使い方ではなく、もっと活用できると思います。
とりあえず使ってみましたということで、またいい感じのCI/CDを実現できたら紹介します!
詳しくは公式ドキュメントをご覧ください。https://www.netlify.com/docs/