[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を入れておきましょう。

    tokenなどはソースに入れない

    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側でプレビューしてから公開することができるようなります。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark