CircleCIでテストとビルドを実行し、Netlifyにデプロイする。

8855 ワード
CircleCI Netlify CircleCI テキストリンク

前提

  • Netlifyでホスティング済
  • CircleCIにプロジェクトを登録済

CircleCIからNetlifyにデプロイする設定

https://circleci.com/gh/ユーザー名/プロジェクト名/edit#env-vars
ユーザー名とプロジェクト名をCircleCIのユーザー名と登録したプロジェクト名に置き換えて上記ページへ移動すると下図のページに移動します。
このページにあるAdd Variableボタンをクリックします。

※上記リンクから上図のページに移動できなかった場合はダッシュボードから、
1. SETTINGS
2. Projects
3. 歯車マーク
4. Environment Variables
上記の順番にクリックしていくと、上図のページに移動できるかと思います。

Add Variableボタンをクリックすると、環境変数を設定できるモーダルウインドウが表示されます。

ここでNetlifyの下記2種の値を設定します。

  • Personal access tokens
  • API ID

上記2種の値をそれぞれValueに入力し（Nameはなんでもいいですが後で使います）、それぞれAdd Variableを押して、それぞれ設定します。

Personal access tokensを生成

https://app.netlify.com/user/applications
上記のページに、Personal access tokensという項目があります。

この項目にあるNew access tokenボタンをクリックすることで、Personal access tokensを生成できます。

※上記リンクから上図のページに移動できなかった場合は、
1. ご自身のアカウントのアイコン
2. User settings
3. Applications
上記の順番にクリックしていくと、上図のページに移動できるかと思います。

API IDの確認

https://app.netlify.com/sites/サイトの名前/settings/general
サイトの名前をNetlifyでホスティングしているSite Nameに置き換えて上記のページに移動すると、下図のページに移動します。

上図ページのSite informationという項目で、API IDを確認できます。

※上記リンクから上図のページに移動できなかった場合は、ホスティングしているサイトのOverviewやDeployなどが連なるメニューに含まれている、Settingsをクリックすることで上図のページに移動できるかと思います。

それぞれの値を設定すると、下図のように2つの項目が追加された状態になります。

以上でCircleCIからNetlifyへデプロイする設定が完了です。

CircleCIのconfig.ymlを設定

プロジェクトのルートディレクトリに.circleciディレクトリを作成し、そのディレクトリにCircleCI様が用意してくださったデフォルトのconfig.yml

を入れます。
このconfig.ymlをベースに、テスト → ビルド → デプロイのジョブを下記の通り設定します。

version: 2.1
orbs:
  node: circleci/[email protected]
jobs:
  # ジョブの名前（なんでもいいです）
  test-build-deploy:
    executor:
      name: node/default
    steps:
      - checkout
      - node/with-cache:
          steps:
            - run: yarn
            # テスト
            - run: yarn test
            # ビルド
            - run: yarn build
            # cliからNetlifyにデプロイできるようにするライブラリをインストール
            - run: yarn add netlify-cli
            # デプロイ（詳細は後述します）
            - run: yarn netlify deploy -p -d デプロイするディレクトリ名 -a ${Personal access tokensの名前} -s ${API IDの名前}

workflows:
  test-build-deploy:
    jobs:
      # filtersの設定は必須ではありません。
      # filtersを設定しない場合は、pushした際にブランチ問わずCircleCIが稼働します。
      - build-and-test:
          filters:
            branches:
              only: master

※yarnを使っていますが、npmでもまったく問題ないと思います😊

以上で「masterブランチにpushまたはmergeのタイミングで、CircleCIがテスト→ビルド→デプロイを実行する」という構成を実装できます。

デプロイコマンドの詳細（yarn netlify ...）

- run: yarn netlify deploy -p -d デプロイするディレクトリ名 -a ${Personal access tokensの名前} -s ${API IDの名前}

上記コマンドのそれぞれの意味は下記の通りです（私なりの意訳が含まれています）

コマンド・オプション 意味
netlify 「netlifyコマンド使うよ」宣言。
deploy 「デプロイするよ」宣言。
-p --prodの省略形。このオプションを付けない場合は仮のURLを生成して、そこにデプロイしてくれます。公開前にブラウザで確認したいときに使えそうです。
-d --dirの省略形。「次にデプロイするディレクトリ名を書くよ」宣言。
デプロイするディレクトリ名 publicとかdistとかbuildとか。多くの場合、ビルドジョブによって生成されるディレクトリ名を書くことになると思います。
-a --authの省略形。「次にトークン名を書くよ」宣言。
${Personal access tokensの名前} CircleCIの環境変数で設定した、Personal access tokensの名前。
-s --siteの省略形。「次にサイトID（NetlifyのAPI ID）を書くよ」宣言。
${API IDの名前} CircleCIの環境変数で設定した、API IDの名前。

以上です。

デプロイコマンドの例


例えば上図のように、

  • Personal access tokensの名前＝NETLIFY_AUTH_TOKEN
  • API IDの名前＝NETLIFY_SITE_ID

と設定して、ビルドジョブで生成されるディレクトリの名前がbuildの場合、デプロイコマンドは下記の通りになります。

- run: yarn netlify deploy -p -d build -a ${NETLIFY_AUTH_TOKEN} -s ${NETLIFY_SITE_ID}

参考ページ