GitHub Actions について

[Haramaki0326]

参考

• Github Actions - 基本概念と使い方
• Github Actionsの使い方メモ

[Haramaki0326]

• 公式Actionsの一覧
• 公式Actionsのリポジトリ
• Node.jsのWorkflowテンプレート
• 自分の練習用リポジトリ

[Haramaki0326]

GitHub Actionsで自分のリポジトリ内のファイルにアクセスするには以下の一文が必要

steps:
      - uses: actions/checkout@v2

サンプル

name: Node.js CI

on:
  # mainにプルリクエストをすると起動する
  pull_request:
    branches:
      - main
  # それ以外のブランチではpushをすると起動する
  push:
    branches-ignore:
      - 'main' 

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: '16'
    - run: npm install
    - run: npm run greet

[Haramaki0326]

GitHub Actionsの定石は以下のような感じかな

• リポジトリの内容を読み込む（uses: actions/checkout@v2）
• リポジトリで設定されているpackage.jsonのscriptを利用する（npm run check-formatなど）

package.json

{
  "name": "training",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write \"src/**/*.{js,json,md,html}\"",
    "check-format": "prettier --check \"src/**/*.{js,json,md,html}\"",
    "lint": "eslint --fix \"src/**/*.js\"",
    "fix": "npm run format && npm run lint",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Haramaki0326/Training.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Haramaki0326/Training/issues"
  },
  "homepage": "https://github.com/Haramaki0326/Training#readme",
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "eslint --fix"
    ]
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",
    "prettier": "^2.3.2"
  }
}

frontend-actions.yml

name: Check frontEnds

on:
  # mainにプルリクエストをすると起動する
  pull_request:
    branches:
      - main
  # それ以外のブランチではpushをすると起動する
  push:
    branches-ignore:
      - 'main' 

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: 16.x
    - name: Install packages
      run: npm ci
    - name: Prettier
      run: npm run check-format
    - name: Lint
      run: npm run lint

[Haramaki0326]

GitHub Pagesへ自動デプロイする

参考

• GitHub Actions と GitHub Pages で yml をフォルダに入れておくだけのお手軽デプロイ
• GitHub Actions による GitHub Pages への自動デプロイ
• GitHub Actions で Web サイトをビルドして GitHub Pages へ公開する

ポイント

• GitHub Pagesではリポジトリ直下のindex.htmlが公開される

• どのブランチのファイルかを指定できる

• 当然このままでは直下で管理していないファイルを公開できない

• したがって、直下で管理していないファイルを公開できるようにするためには以下の手順を踏む

  • 公開専用のブランチ（gh-pages）を用意する
  • そこの直下にindex.htmlを配置するようにする
  • そのために、GitHub Actionsのpeaceiris/actions-gh-pagesを利用させてもらう
  • これによりGitHub Actionsの自動デプロイ時にビルドしたファイル(index.html)が公開専用のブランチ（gh-pages）に配置される。

実装

https://github.com/Haramaki0326/Training/blob/main/.github/workflows/main.yml

name: Build and Deploy

on:
  # mainにプルリクエストをすると起動する
  pull_request:
    branches:
      - main
  # mainにpushをすると起動する
  push:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 16.x
    - name: Install NPM packages
      run: npm ci
    - name: Prettier
      run: npm run check-format
    - name: Lint
      run: npm run lint
    - name: Build website
      run: npm run build --if-present
    - name: Deploy website
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist