[Node.js]Circle CI 2.0からNetlifyにデプロイする
Create React Appで作ったアプリをCircle CIでテスト&ビルドしてからデプロイしたかったので、方法をまとめました。 1:Circle CIで環境変数を設定する NETLIFY_TOKENにNetlif […]
目次
Create React Appで作ったアプリをCircle CIでテスト&ビルドしてからデプロイしたかったので、方法をまとめました。
1:Circle CIで環境変数を設定する
NETLIFY_TOKEN
にNetlifyのPersonal Access Tokenを、
DEV_SITE_ID
にデプロイ先のNetlifyのサイトIDを入れておきましょう。
2:Netlify CLIをインストールする
yarn add -D netlify-cli
またはnpm install -D netlify-cli
でNetlify CLIを追加します。
3:.circleci/config.yml
を設定する
Deployment Integrationsを参考にデプロイの設定をします。
キャッシュ設定などを省いた最小限構成だと、こんな感じになるかと思います。
version: 2
jobs:
build:
docker:
- image: circleci/node:7.10
working_directory: ~/repo
steps:
- checkout
- run: yarn install
- run: yarn run test
- deploy:
name: Maybe Deploy
command: |
if [ "${CIRCLE_BRANCH}" == "development" ]; then
echo "Deploy Development"
yarn run build
./node_modules/netlify-cli/bin/cli.js deploy \
--site-id ${DEV_SITE_ID} \
-p build/ \
--access-token ${NETLIFY_TOKEN}
else
echo "Not master branch so not deploying"
fi
yarn run build
や-p build/
などはCreate React Appを前提とした記述になっています。
必要に応じてよしなに書き換えてください。
あとはこれでdevelopment
ブランチにpushすることで、自動デプロイが走るようになります。
そのほか
npm install -D netlify-cli
するのではなく、config.ymlのstepsでnpm install -g netlify-cli
してCLIツールを使えるようにするのもありかもしれません。
ただ、手元からもデプロイできるようにしたいことや、ビルド時に同梱されないようになってることから今回はローカルに入れて使っています。
あと、本番環境へのリリースについては./node_modules/netlify-cli/bin/cli.js deploy
コマンドに-d
オプションをつけることをおすすめします。
このオプションをつけることで、Netlify側でプレビューしてから公開することができるようなります。