自動ビルド・デプロイの仕組みを作る

Markdownを編集するたびに、HTMLのビルドとFirebaseへのデプロイを手動で行うのは手間がかかります。
ここでは、CI（継続的インテグレーション）ツールを使って、Gitにプッシュしたタイミングで自動ビルドとデプロイを実現する方法を詳述します。

Firebaseのデプロイ用TOKENを取得する

CIを使って自動でFirebaseにデプロイするためのデプロイ用TOKENを取得します。

コマンドラインツール（Windowsであればコマンドプロンプト、Macであればターミナル）を開く。
本プロジェクトのルートフォルダに移動する。
下記のコマンドを実行する。

$ firebase login:ci

ブラウザが立ち上がり、Googleアカウントのログイン画面が表示されます。

Googleアカウントでログインする。

Image from Gyazo

ヒント

ログインに成功するとブラウザに下記が表示されます。 Image from Gyazo

認証用TOKENを控える。

✔  Success! Use this token to login on a CI server:

# 下記のFirebase認証用TOKENを控えておく。
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example: firebase deploy --token "$FIREBASE_TOKEN"

1
2
3
4
5
6

firebase listを実行して使用しているFirebaseプロジェクトIDを控える。

$ firebase list
+----------------------------------------------------------+
|        Name        | Project ID / Instance | Permissions |
+----------------------------------------------------------+
| jamstack (current) |      jamstack-xxxx    |    Owner    |
+----------------------------------------------------------+

1
2
3
4
5
6

ヒント

上記の例では、jamstack-xxxxがプロジェクトIDに当たります。

CircleCIのセットアップ

CircleCIと本プロジェクトのGitHubリポジトリを連携します。

CircleCIにアクセスする。
Sign Upをクリックする。
Sign Up with GitHubをクリックして、ご自身のアカウントでログインする。
左ペインのADD PROJECTSをクリックして、本プロジェクトのリポジトリのSet Up Projectをクリックする。
Start buildingをクリックする。

WORKFLOWSタブが表示され、本プロジェクトのリポジトリが追加されます。

本プロジェクトのリポジトリ名の右側にあるをクリックする。
Environmental Vaiablesをクリックする。
Add Variableをクリックする。
NameにFIREBASE_TOKENと入力し、ValueにFirebaseのデプロイ用TOKENを取得するの手順5で控えたTOKENを入力する。
Add Varibaleをクリックする。
再度Add Variableをクリックする。
NameにFIREBASE_PJと入力し、ValueにFirebaseのデプロイ用TOKENを取得するの手順6で控えたプロジェクトIDを入力する。
Add Varibaleをクリックする。

以上でCircleCIと本プロジェクトのリポジトリが連携されました。

CircleCIの設定ファイルを作成する

環境や、ビルド、デプロイなどの処理を、config.ymlファイルに設定します。

コマンドラインツール（Windowsであればコマンドプロンプト、Macであればターミナル）を開く。
本プロジェクトのルートフォルダに移動する。
.circleciフォルダを作成し、その中にconfig.ymlを作成する。
config.ymlに下記の内容を記載する。

version: 2
jobs:
  build:
    working_directory: ~/workspace
    docker:
      - image: node:9.11
        environment:
          TZ: "/usr/share/zoneinfo/Asia/Tokyo"
          DEPLOY_BRANCH: master

    steps:
      - checkout

      - restore_cache:
          keys:
            - yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
            - yarn-packages-{{ .Branch }}
            - yarn-packages-

      - run:
          command: yarn install

      - run:
          command: yarn add firebase-tools

      - save_cache:
          paths:
            - node_moduels
          key: yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}

      - run:
          command: yarn build 

      - run:
          command: node_modules/.bin/firebase deploy --only hosting --project "$FIREBASE_PJ" --token "$FIREBASE_TOKEN"

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

CircleCIの設定ファイルをGitHubにプッシュします。

# ステージングする。
$ git add .

# コミットする。
$ git commit -m "circleci set"

# プッシュする。
$ git push origin master

1
2
3
4
5
6
7
8

CircleCIにアクセスして、JOBSタブの本プロジェクトの進捗を確認する。

ヒント

masterリポジトリにプッシュされるたびに、自動でビルド・デプロイ処理が実行されます。ジョブのステータスはQUED、RUNNING、SUCCESS、FAILEDの４種類で表示されます。各ステータスの内容は下記のとおりです。
QUED：GitHubへのプッシュをトリガーにして、CircliCIにジョブの実行を促しています。
RUNNING：ビルド・デプロイを実行しています。
SUCCESS：ビルド・デプロイに成功しました。
FAILED：ビルド・デプロイに失敗しました。

ジョブステータスがSUCCESSになったら、デプロイに成功しています。

Circle CIによる自動ビルド・デプロイの設定は以上です。以降は、コンテンツを編集した後、GitHubに変更箇所をプッシュするだけで自動で変更箇所が反映されたHTMLが公開されます。

サイトをデプロイする VuePressを拡張する

# 自動ビルド・デプロイの仕組みを作る

# Firebaseのデプロイ用TOKENを取得する

# CircleCIのセットアップ

# CircleCIの設定ファイルを作成する

自動ビルド・デプロイの仕組みを作る

Firebaseのデプロイ用TOKENを取得する

CircleCIのセットアップ

CircleCIの設定ファイルを作成する