Diary

Diary

日々学んだことをアウトプットする場として初めてみました

GitHub Pagesを用いた CI/CD 入門

GitHub Actions使ってみた

前からC I/CDに興味があったので、GitHub Actionsを使ってみました。

  • GitHub Actionsを使って、VueのbuildとGitHub Pagesへのdeployを行う
    1. GitHub Actionsへの登録
    2. Vueプロジェクトをpush
    3. GitHubでどのブランチから配信するかを決める
  • 使用した技術
    • Vue
    • GitHub Actions
    • actions-gh-pages
      • GitHub PagesにActionsからdeployするのに使う
      • 配信ファイルのみのブランチ(gh-pages)を作っている
  • 苦労したところ
    • リポジトリのrootディレクト以外の場所にVueの設定ファイルを置いていたため、ciのファイルの記述に戸惑った

GitHub Actionsとは

  • GitHubサービスコンテナ
    • いわゆるCI/CDの一つ
  • 特定のイベント(push, pullなど)に応じて、構文チェックやテスト、ビルドやデプロイなどを行ってくれる
  • 命令はymlファイルで記述する

ymlファイルの記述

  • 作り方(次のどちらか)
    • repository -> Actions -> New workflow からDeploy Node.jsを選ぶ
    • エディタで.github/workflows/node.js.ymlを記述(多分これでよい)
  • 今回用いたymlファイル
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    env:
      vue-dir: ./deploy

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
    - name: Cache npm dir
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package-lock.json') }}
    - run: |
        cd ${{ env.vue-dir }}
        npm ci
        npm run build --if-present
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./deploy/dist
  • やってること(上から)
    • on: どのイベントによって発火するか
      • 今回はmainブランチがpushされた時
    • env: 上で作成したコンテナに環境変数を設定
      • vueのプロジェクトフォルダを指定している
    • steps: - run:
      • vueのディレクトリに移動した上でビルドを行なっている
      • npm ciに注意する(後述)
    • steps:Deploy
      • フォルダの場所とdeployの設定により、publish_dir: ./deploy/distの部分を変える
      • 詳しい説明は公式のGitHubを参照
  • あとはpushすると自動で上のコードが走る

root ディレクトリ以外のVueファイルをdeployしたい

  • Actionsの設定でrootディレクトリ以外を使うには、次の2つが考えられる
    • linuxのコマンド、cdを使う
    • working-directoryの設定を行う
  • [注意] 1回cdで移動してもrunを変えると元の場所に戻ってしまう!
    • 以下は次のようなymlを記述した際の結果
steps:
~~ ~~
- run: pwd
- run: cd ${{ env.working-dir }}
- run: cd ${{ env.working-dir }} && pwd
- run: pwd  
~~ ~~

f:id:kokoichi206:20210717090121p:plain
cd_check_result

Vueを作成してpushしてみる

node.jsがインストールされていることが必要。vue/cli も追加でインストールしておく。

Vueプロジェクトを作成

$ vue create deploy

deployするためにのVueの設定

packege-lock.jsonが存在しない場合

以下のコマンドで生成する

$  cd deploy
$ npm install --package-lock

このファイルが存在しないとnpm ciがこける(ここがnpm installとの違い!)

deploy/vue.config.jsが存在しない場合

以下の内容を、deploy/vue.config.js に記述

module.exports = {
    outputDir: './dist/',
    publicPath: './'
}

このファイルがを記述しないと、配信した際に真っ白になる

GitHub でPages配信の設定を行う

  1. リポジトリの settings -> Pages へ移動
  2. Sourceを以下のように設定
  3. Branch: gh-pages
  4. /(root)
  5. Save ボタンを押す

f:id:kokoichi206:20210717093328p:plain
source

gh-pagesが表示されない場合は、Vueのpushを行った際に正しくActionが実行されてない可能性があるのでActionsから確認する

おわりに

CI/CDの機能としてテストも気になっているので次回以降やってみたいと思います