CircleCIを使用してNuxtをNetlifyにデプロイしてみました

2020.12.18 TECH: CircleCIを使用してNuxtをNetlifyにデプロイしてみました

準備

GitHub アカウント(GitHub を使用するため)
Netlify アカウント
CircleCI アカウント
※アカウントの登録方法については紹介しないため他の記事をご参照ください。

前提

すでに Netlify で公開しているサイトがあること
今回の記事では Nuxt が Netlify にて公開されているものを使用します

注意

各種サービスの料金体系についての説明は行いませんので、各自で確認して行ってください。

CircleCI公式サイト

Netlify公式サイト

理由/背景

今回 Netlify に備わっているビルド機能を使用せずに CircleCI を使用した理由は無料枠で使用できるビルドの時間制限にあります。

CircleCI では週に250分間ビルドすることができる(1ヶ月だと大体1000分間)無料枠が設けれらていますが、Netlfy の無料枠では月に300分間とビルド可能な時間を比較すると CircleCI の方が長いことになります。

長い時間ビルドすることができる方が何かと便利なため(ストレスを感じることなく開発したいため)今回 CircleCI を使用したビルドを実施することにしました！
(ビルド可能な時間は 2020/12/17 時点のもの)

各種設定

Netlify と CircleCI を連携する設定を行います。

Netlifyの設定

API ID(サイトのID)の取得
(Site details - Site information - API ID の箇所です)

Personal access tokens(認証用トークン) の取得
(User Settings - Applications - Personal access tokens へ移動すると取得できます)

CircleCIの設定

CircleCI にて Contexts 画面より Environment Variables の設定を行います。
(Projects - 歯車マーク(Organization Settings) - Contexts の箇所です)
※初回は Contexts の作成から行うことになります。

Add Environment Variables ボタンを押した際に下記の２点の設定を求められるので入力します。

Environment Variable Name: 好きな名前(あとで使用します)
Value: Personal access tokens/API ID

CircleCIのconfig.ymlの設定
config.yml は自動テストする際にどういったコマンドを実行するのかを記述していくファイルになります。 CircleCI が動作するにはプロジェクトのルートディレクトリに .circleci ディレクトリを作成し、 config.yml を配置するが必要になります。

今回使用する config.yml の設定内容

version: 2.1
orbs:
  node: circleci/node@3.0.0
jobs:
  build:
    docker:
      - image: circleci/node
    steps:
      - checkout
      # ビルド
      - run: npm build
      # cliからNetlifyにデプロイできるようにするライブラリをインストール
      - run: npm install netlify-cli
      # デプロイコマンド
      - run: npm netlify deploy -p -d デプロイするディレクトリ名 -a Personal access tokensの名前 -s API IDの名前

workflows:
  test-build-deploy:
    jobs:
      - build
          filters:
            branches:
              only: master

上記の設定で master ブランチにプッシュした際に config.yml 記載されている内容のコマンドを実行することになります。
※デプロイコマンドで入力している Personal access tokens の名前と API ID の名前は Environment Variables にて設定した名前を使用してください。

上記の設定で GitHub の master ブランチにプッシュした際に CircleCI で自動テストし、Netlify にデプロイするという流れを実現することができます。