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

楽をするのは良いことだ

ということで、個人的に好きで使っているNuxt.jsをFirebaseにデプロイし、その後Githubにプッシュするたびに自動的にデプロイされるように設定するまでをこの記事では解説しておきます。

Firebase使ってみた

こちらの記事を参考にさせていただきました。

環境

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

構築

Firebase

まずFirebaseにログインします。
Googleアカウントが必要となるので持っていない方は取得してください。

スクリーンショット 2020-10-04 11.38.41.png

こちらのページにアクセスしたら使ってみるをクリックし、以下の個人のプロジェクトを管理するページに移ってください。

スクリーンショット 2020-10-04 11.39.32.png

そしてプロジェクトを追加をクリックし、任意のプロジェクト名を設定し、プロジェクトを作成してください。
スクリーンショット 2020-10-04 11.40.23.png
スクリーンショット 2020-10-04 11.40.42.png
スクリーンショット 2020-10-04 11.40.53.png
スクリーンショット 2020-10-04 11.41.02.png

これでプロジェクトを作成できました!

ひとまずターミナルを開き、以下のコマンドを使ってFirebase CLIをインストールしておきましょう。

$ npm install -g firebase-tools

そしてついでにログインをしておきましょう。

$ firebase login

次はNuxtプロジェクトを作成し、Firebaseとつないでデプロイしてみましょう。

Nuxt.js

mkdir firebase
cd firebase
vue init nuxt-community/starter-template sample

こちらでfirebaseディレクトリ内にNuxtのテンプレートが作成されました。
そして次にfirebaseとつなぐ必要があるので以下のコマンドをターミナルで実行してください。
また、ここではHostingを選択してください。

$ firebase init
MacBook-Pro sample % firebase init            

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  firebase/sample/

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. Hosting: Configure and 
deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (先ほど入力したプロジェクト名)
i  Using project (先ほど入力したプロジェクト名)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

これでfirebaseプロジェクトとの接続が完了しました!

次にNuxtプロジェクトをビルドしましょう。

$ npm nuxt generate

これでdist内にビルドしたファイルが出力されました。

次に、sampleプロジェクト内に出力されたfirebase.jsonを以下のように書き換えます。

{
  "hosting": {
    "public": "sample/dist"
  }
}

そして、一つ上の階層のfirebaseディレクトリに移動し、

$ cd ..
$ firebase deploy

このコマンドでFirebaseにデプロイします!!

上手くいくと、以下のようにアドレスが表示されるので、そちらにブラウザからアクセスしてみましょう!

Project Console: https://console.firebase.google.com/project/[あなたのプロジェクト名]/overview
Hosting URL: https://[あなたのプロジェクト名].web.app

スクリーンショット 2020-10-04 11.58.48.png

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

スクリーンショット 2020-10-04 18.17.32.png

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

スクリーンショット 2020-10-04 18.25.05.png

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

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

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

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

$ firebase login:ci

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

スクリーンショット 2020-10-05 14.19.08.png

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

スクリーンショット 2020-10-05 14.21.50.png

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

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にプッシュしてみると・・・

スクリーンショット 2020-10-05 14.25.36.png

無事成功しました!

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

時間があれば自動テストを追加したものも投稿したいですね。

ではこの記事はひとまずここまで。お疲れ様でした。

コメント

このブログの人気の投稿

Braveブラウザの同期機能をiPhoneで設定した話。

LGの43インチモニター、43UN700-BとエルゴトロンのモニターアームHXを買った話。

Brave×電通のレポートから読み解くBraveブラウザの将来性