Nuxt.jsを短期間でFirebaseにデプロイしてCircleCIで自動デプロイをするところまでを設定するマニュアル②自動デプロイの設定

楽をするのは良いことだ

ということで、前回の続きです。
今回はGitHubにリポジトリを作成し、CircleCIと連携、GitHubにプッシュするたびにFirebaseに自動デプロイされるようにする、という内容です。

環境

OSX Catalina
npm version6.14.6
node.js v12.18.4

構築

まず、GitHubにリポジトリを作成し、

前回Nuxt.jsで作ったsampleプロジェクトをGitHubにプッシュしておきます。

これで一旦GitHubへの設定は終わりです。

では、GitHubとCircleCI、そしてCircleCIとFirebaseを接続していきましょう。

まずはCircleCIの登録をすませてください。
これからGitHubとの連携をするのでGitHubのアカウントでログインすると良いでしょう。
すると連携をするかどうかを聞かれるので連携し、今回のプロジェクト、先ほどGitHubにプッシュしたリポジトリ(以上の例では)を連携してください。

次にCircleCIとFirebaseを連携するためにアクセスするためのトークンをFirebaseに生成して貰うために以下のコマンドをターミナルで実行してください。

$ firebase login:ci

するとコンソール参照用のURLとトークンが表示されるので、CircleCIのPipelineを開き、右上のProject Settingsをクリック、

すると環境変数を登録するEnvironment Variablesという欄があるので先ほど手に入れたトークンをFIREBASE_TOKENという名前で以下のように設定してください。

そして、プロジェクト直下に.circleci/config.ymlを作成し、以下のように作成してください。

.circleci/config.yaml

version: 2
jobs:
  deploy_main:
    docker:
      - image: circleci/node:latest
    steps:
      - checkout
      - run:
          name: install firebase-tools
          command: sudo npm install -g firebase-tools
      - run:
          name: install nuxt
          command: npm install nuxt
      - run:
          name: build project
          command: npm run build
      - run:
          name: Deploy Firebase Hosting
          command: firebase deploy --token=$FIREBASE_TOKEN # --project [your-project-id] 仮にこのままプッシュしてfailedになってしまう場合はこのコメントアウトを外してあなたのFirebaseプロジェクトのIDを記入してプッシュしてみてください。

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - deploy_main:
          filters:
            branches:
              only: main

そして試しにGitHubにプッシュしてみると・・・

無事成功しました！

ひとまず以上のように設定することでプッシュするたびに自動的にデプロイされるようになりました。

時間があれば自動テストを追加したものも投稿したいですね。
ではこの記事はひとまずここまで。お疲れ様でした。