Vue+GitHub Action+GitHub Pages+Slackを使ってCIを構築した



# 追記(2020/9/3)
GitHub Pagesのサイトの種類によって、画面が真っ白になる現象に出くわしました
[ユーザサイト](https://lunachevalier.github.io/)だと、ちゃんと実装したものが表示されますが、[プロジェクトサイト](https://luna-chevalier-portfolio.github.io/curry-ingres-gacha/)だと、真っ白になっています(更新当時は`vue.config.js`の`publicPath`を変えてエラーになっています)
[vue-cli3系で真っ白になる](https://qiita.com/heyheyww/items/5d06936745118045a308)ことがあるみたいですが、バージョンを確認したら4系+`publicPath`を相対パスで設定しているので、対策は出来ているっぽいです

# はじめに

ツールそのものはよく知っているものの、実際に試したことがなかった3つのツールを使って、CIを構築してみました

* [Vue.js](https://jp.vuejs.org/index.html)
* [GitHub Actions](https://github.co.jp/features/actions)
* [GitHub Pages](https://pages.github.com/)

結論から言うと、楽も楽、1度設定出来てしまえば次以降はサクッと作れます

# 具体的にしたこと

## 一連の流れ

1. Vue.jsでWebアプリを作成します
2. 作成したアプリをテスト(jest、cypressを利用)します
3. GitHubにpushします
4. `master`に対してプルリクを作成します
    1. このタイミングでlint、単体テスト、E2Eテストが実行されます
5. 全て正常だと、プルリクが承認できる状態になります
    1. 逆に何らかのエラーが発生している場合、承認出来ない状態なってマージ出来なくなります
6. `master`に変更(直`commit`からの`push`or`プルリクの承認`)が入ると、[本番環境](https://lunachevalier.github.io/)(GitHub Pages)にリリースします
7. リリースの結果をSlackに通知します

よくあるCIの流れになると思います

## 必要な環境構築

上記の流れを作るには、以下の環境構築が必要になります

* Gitの導入
* Vue.jsの開発環境
* eslint、単体テスト(jest)、E2Eテスト(cypress)の実行
* GitHubアカウントの作成
* GitHub Pagesが使えるリポジトリの作成
* GitHub Actionsの設定
* GitHub Actionsの実行結果を通知するSlackチャンネルの用意

この記事では、CI導入するにあたって自分がしたことにフォーカルしたいので、実施してない(最初から導入してました)以下の内容については省略します

* Gitの導入
* GitHubアカウントの作成
* GitHub Actionsの実行結果を通知するSlackチャンネルの用意

# 最終的な環境

https://github.com/LunaChevalier/lunachevalier.github.io/ で公開しています

# Vue.jsの開発環境の導入

`vue-cli`を利用して導入します
公式にある[インストール](https://cli.vuejs.org/guide/prototyping.html)と[プロジェクト作成](https://cli.vuejs.org/guide/creating-a-project.html)を参考にしています

まず、vue-cliをインストールします
`yarn`で入れました

```sh
> yarn global add @vue/cli @vue/cli-service-global
```

次に、プロジェクトを作成します

```sh
> vue create 好きなプロジェクト名
```

実行すると、作成するプロジェクトの初期設定を色々聞かれます
`vue-cli`のバージョンが`4.4.0`だと、最初に以下のように聞かれるので、一番上を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56006/714749e6-97b8-7f56-ca80-27979b418e9c.png)

CIを構築する上で、それ以降の内容は特に影響しないはずなので、お好みの設定を選択してください

ちなみに、以下のコマンドでGUIでも初期設定ができます(未検証)

```sh
> vue ui
```

# GitHubの環境構築

vueの開発環境は出来上がったので、次はGitHubの方になります
~~GitHubの環境構築ってなんか日本語が変な気がするけど許してください~~

## GitHub Pagesを利用するリポジトリを作成する
まずは、GitHub Pagesの設定からですが、GitHub Pagesを使うには特定のリポジトリ名を名付ける可能性があります
リポジトリ名の詳細は[GitHub Pages について](https://docs.github.com/ja/github/working-with-github-pages/about-github-pages)の「GitHub Pages サイトの種類」を参考にしてください
今回はユーザで作成しました
ユーザで作成する場合、リポジトリ名は`<username>.github.io`になります
私の場合だと、`lunachevalier.github.io`となります

リポジトリの作成が出来たら、vueの内容をpushします
`vue create 好きなプロジェクト名`で出来たものをそのままpushしても問題なしだと思いますが、私は既にWebアプリを開発していたので、それをpushしています

## GitHub ActionsのWorkflowを作成する

リポジトリにpush出来たら、GitHub Actionsの設定に移ります
自動化するプロセス(一連の流れ)のことをWorkflowと呼称するので、今後もWorkflowと呼称します

GitHub Actionsを使うにはWorkflowの作成が必須です
[GitHub Actionsのワークフロー構文](https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions)によると、リポジトリの`.github/workflows`ディレクトリにYAMLファイルを設置すると扱えますが、GitHub上で作成することができるので、今回はそちらで作成します
なお、[使用制限](https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions#usage-limits)があるので、大規模なWorkfrowを作成する場合は一度確認したほうが良いです(Vueのテンプレ程度であれば、意図的でない限り引っかからないです)

リポジトリにActionsタブがあるので、それをクリックして移動します
最初は何もWorkflowがない状態ですが、今のリポジトリのソースを元におすすめのWorkflowが出てきます
今回は初めてなので、テンプレに頼らず自作します
こじんまりとリンクになっている`set up a workflow yourself`をクリックすると作成画面が出ます
左側にエディタがあるので、そこに処理を書いていきます
今回は「`master`に対するプルリクが出た時、マージ元(作業ブランチ)のlint、各テストの実行」と「デプロイと結果の通知」の2つを自動化するので、Workfrowを2つ作ることになります
最終的なWorkfrowは以下になりました

```yaml:pull_request.yml
name: Auto Testing

on:
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 'v12.16.1'

      - name: Install dependencies
        run: yarn --frozen-lockfile
      
      - name: Lint
        run: yarn lint
      
      - name: Unit Test
        run: yarn test:unit
        
      - name: E2E Test
        run: yarn test:e2e
```

```yaml:deploy.yml
name: Auto Deploy GitHub Pages
on:
  push:
    branches: [ master ]

env:
  SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 'v12.16.1'

      - name: Install dependencies
        run: |
          yarn --frozen-lockfile
          yarn build

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs

      - name: Slack Notification on Success
        if: success()
        uses: rtCamp/action-slack-notify@v2.0.2
        env:
          SLACK_CHANNEL: ci
          SLACK_TITLE: Test Success
          SLACK_COLOR: good

      - name: Slack Notification on Failure
        uses: rtCamp/action-slack-notify@v2.0.2
        if: failure()
        env:
          SLACK_CHANNEL: ci
          SLACK_TITLE: Test Failure
          SLACK_COLOR: danger
```

構文そのものについては[ワークフロー構文](https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions)を参照してください
GitHub Pagesへのデプロイ、Slackへの通知ついては以下を参考に作成しました

* [actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)
    * [GitHub Actions による GitHub Pages への自動デプロイ](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)
    * [GitHub ActionsでGitHub Pagesへポートフォリオサイトを自動デプロイ](https://qiita.com/momotaro98/items/b13236e2f8c619edada9)
* [action-slack-notify](https://github.com/rtCamp/action-slack-notify)
    * [GitHub Actionsでビルドの成功・失敗をSlackに通知する方法
](https://qiita.com/progrhyme/items/badf31978612b22dbf47)

### 通知先のSlackを設定する

`deploy.yml`に`secrets.SLACK_WEBHOOK_URL`があり、ここに通知先のSlackのIncoming Webhook URLを設定します
Settingsタブから設定できるので、そこに移動します
左側に「secrets」があるので、`SLACK_WEBHOOK_URL`でSlackのIncoming Webhook URLを設定します

## GitHub Actionsを試運転してみる

ここまで設定が完了すると、`deploy.yml`が動く様になるので、問題なく動作するか確認してみます
現状、`master`ブランチに対する直`commit`からの`push`で動くことができるので、`readme.md`を適当に編集して`commit`します
~~実際の開発で`master`に対する直`commit`は、グーで顔面パンチされても文句は言えないくらいやってはいけません~~
`readme.md`を適当に編集して`commit`すると、Actionsタブで動きがあるので開きます
ちょっと待つと、`deploy.yml`を元に処理が走ります
更にしばらく待って(大体3、4分)、Slackに通知が飛んでくれば成功です

## GitHub Pagesのルートを設定する

最後にGitHub Pagesのルートを設定します
試運転で動かしたWorkflowにあるビルドが成功していれば、`gh-pages`というブランチが出来上がっているはずなので確認します
このブランチにGitHub Pagesで公開する内容がつまっています(ビルドした結果が出てます)
無事に確認できたら、リポジトリのSettingsのOptionsにあるGitHub Pagesの項目までスクロールします(Danger Zoneの上にあるので、ほとんど最下部です)
Sourceの項目にブランチとディレクトリを設定する箇所があるので、以下のように設定します

| ブランチ | ディレクトリ |
| --- | ---|
| `gh-pages` | `/(root)` |

saveするとGitHub Pagesに反映されます
反映には5分ほどかかるっぽいので、反映されないときはしばらく待ちます

無事に反映されていることが確認できたら、CIの構築に成功です!

# 最後に

~~楽も楽って言う割には手順長かった~~
ですが、一度なれてしまえば、簡単に設定できると思います
ちなみに、GitHub Actionsは時間による定期実行もできるようなので、GASとかで定期実行しているものを移行できるかもしれません(制限に引っかかりやすくなりますが)
なので、ここ最近賑わっているGitHubプロフィールのカスタマイズを常に最新の情報を保ったりとCI以外にも使えることは多そうです