こんにちは！

シタテルでエンジニアをしている建山です。

主に工場向けのマイオペというシステムの開発を行っています。

マイオペでは、インフラとして本番、ステージング、開発、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/