sitateru tech blog: Netlify

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル Netlify の投稿を表示しています。 すべての投稿を表示
ラベル Netlify の投稿を表示しています。 すべての投稿を表示

2018年12月19日水曜日

circleciでビルドしたあとにnetlifyへデプロイしてみた

12月 19, 2018

こんにちは!

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

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

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