More than 5 years have passed since last update.

FIrebase Hostingで作った環境にcircleciで自動テストを導入してみた

Posted at 2019-09-12

TL;DR

以前の記事で整えた環境でポートフォリオサイトを作りました。
今回はそこにさらにciを導入して自動テストを行う環境を整備しました。

この記事ではこのポートフォリオのリポジトリでmasterブランチにpushされたら、circleciでテストとデプロイを自動で行うようにするところまで説明します。

リポジトリとcircleciを紐づける

まずは、リポジトリとcircleciを紐づけます。そのためにまずは、githubアカウントを利用してcircleciにサインインします。

ログインしたら左サイドバーのAdd Projectをクリック

その後、ciを導入したいリポジトリの右にあるSET UP PROJECTをクリックします。そうすると導入手順が英語で書いてあります。
書いてある内容はざっくり意訳すると以下の通りですので、その通り進めていきます。

リポジトリ内に.circleci/config.ymlを作成する。（内容は一旦表示されているものをコピペする）
リモートリポジトリにpushする
start buildingボタンをクリック

これで「ブランチ問わずリモートリポジトリにコミットがpushされたら自動でテスト実行」という動作をするようになりました。

テストを実行可能にする

次は、テストコードを実行できるようにしましょう。今回はjestを利用します。
まずは必要なパッケージをインストール

npm i -D jest @types/jest ts-jest

そしてpackage.jsonとtsconfig.jsonに以下の内容を追加します。（ちょっとここわかりにくいかもしれないので、わかりづらかったら遠慮なくコメントとか編集リクエストとか送ってください〜）

package.json

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/tests/**/*.test.ts"
    ],
    "moduleNameMapper": {
      "^#/(.+)": "<rootDir>/$1"
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@types/jest"
    ]
  },
  "include": [
    "./tests/**/*.ts"
  ]
}

これでTypeScriptでテストを記述して実行できるようになります。
試しに、以下のような100%成功するテストを書いて実行してみます。

tests/sample.test.ts

describe('sample', () => {
  it('test is executed', () => {
    // some test
  })
})

そして以下のコマンドを実行

npm test

実行結果は以下の通り

> jest

 PASS  tests/sample.test.ts
  sample
    ✓ test is executed (1ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.755s, estimated 2s

ちゃんとテストが実行されていますね。

circleci上からfirebaseにデプロイできるようにする

トークンの取得

次に、circleci上からfirebaseにデプロイできるようにします。まずはデプロイのためにパッケージをインストール。

npm i -D firebase-tools

次に、circleci上の環境からデプロイするためのトークンを取得します

npx firebase login:ci

このコマンドを実行すると勝手にブラウザが開き、ログインに使用するアカウントを選ぶ画面がでくるのでアカウントを選びます。
選ぶとログインが完了し、コンソールに以下の内容が表示されています。

Visit this URL on this device to log in:
[認証用のURL]

Waiting for authentication...

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

[デプロイ用トークン]

Example: firebase deploy --token "$FIREBASE_TOKEN"

このデプロイ用トークンを使うので控えておいてください。

circleciの環境変数にトークンを登録

先ほど取得したトークンをcircleciに環境変数として登録します
circleciにログインして、左側サイドバーのsettingsをクリック

次に左メニューのProjectsをクリック

環境変数を追加したいプロジェクトの右端にある歯車のマークをクリック

Build SEttingsのEnvironment Variablesをクリック

環境変数を追加したいプロジェクトの行の右端にあるAdd Variableをクリック

ポップアップが出てくるので、環境変数として先ほどのトークンを追加する

これでcircleciの環境変数に先ほどのトークンを追加できました。

npm scriptにデプロイ用のスクリプトを追加

package.jsonに以下の内容を追加しましょう。

package.json

{
  "scripts": {
    "deploy:hosting": "firebase deploy --only hosting --project your-project-id"
  }
}

これで自動化の準備が整いました。

自動でビルドするジョブを作る

さて、ここからcircleciを利用して自動で実行するジョブの内容を、config.ymlを編集する形で作っていきます。
まずはきちんとビルドできるか確かめるためにbuildジョブを作ります。
config.yamlを一回まっさらにして、新しく以下の内容を記述します。

config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10 #circleciではdockerを利用してテスト環境を作るので、それに使うイメージを指定
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm run build

これで、buildジョブの完成です。

自動でテストを実行するジョブを作る

次は、テストを実行するジョブです。config.yamlに以下のように追記しましょう

config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10 #circleciではdockerを利用してテスト環境を作るので、それに使うイメージを指定
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm run build
# ここから追記
  test:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm test

これでテストを行うジョブの完成です

自動でデプロイするジョブを作る

次は、デプロイを実行するジョブです。config.yamlに以下のように追記しましょう

config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm run build
  test:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm test
# ここから追記
  deploy:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: 
          command: |
            npm install
            npm run build
            npm run deploy:hosting -- --token $FIREBASE_TOKEN

これで自動でデプロイするジョブの完成です。

ビルドからデプロイまで一連の処理を自動で行うワークフローの作成

最後に、ここまでで作った3つのジョブを順番に実行させるワークフローを作成します。

config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm run build
  test:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run: npm test
  deploy:
    docker:
      - image: circleci/node:10
      
    working_directory: ~/repo

    steps:
      - checkout
      - run: 
          command: |
            npm install
            npm run build
            npm run deploy:hosting -- --token $FIREBASE_TOKEN
# ここから追記
workflows:
  version: 2
  build_test_deploy:
    jobs:
      - build
      - test:
          requires: 
            - build
      - deploy:
          requires: 
            - test
          filters:
            branches:
              only: master #masterブランチにpushされた時だけデプロイさせるためのフィルタ

これでconfig.ymlも完成です。

masterブランチにプッシュして動作確認

最後に、masterブランチにプッシュして、動作確認をしましょう。

テスト結果はブラウザ上で確認できます確認するにはまず左サイドバーのworkflowsをクリック

次に確認したいプロジェクトをクリック

そうすると右側に、実行されたワークフローの一覧が出るので一番上の結果がscceededになっていれば成功です

もしfailedになっていた場合は、クリックすると詳細を確認できるので、どこが失敗しているのか修正してまたプッシュしましょう。

まとめ

長くなってしまいましたが、ビルド・テスト・デプロイを自動化することができました。
あとはテストの内容を詰めたいですね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up