【プロフィールページ改修第9回】GitHub Actionsの導入 - スマレジエンジニアyushiのブログ

久しぶりに、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回はGitHub Actionsの導入です。

GitHub Actionsとは

GitHub Actionsとは、GitHubに搭載されているCIの仕組みです。
標準搭載のため導入も非常に簡単です。

なお私自身は、業務ではGitlabを利用していることもあり、Gitlab CIは使っていても、GitHub Actionsの経験はほとんどなく、今回導入しながら勉強してみました。

Linterの導入

今回は、JS・CSSのLinterを導入します。

JS
- Linter ... ESLint
- Formatter ... Prettier
CSS
- Linter ... StyleLint
- Formatter ... Prettier

Linterについては、現状有力な代替案を知りません（教えて欲しいです）。

Prettierについては、良くも悪くも強制力が強くて運用の幅が少ないため、評価が分かれるんじゃないかと思っています。
とは言え無難な選択肢なのかなと考えています。

GitHub Actionsの導入

.github/workflows/ci.yml というファイルを作成・編集することで、導入できます。

name: Node.js CI

on:
  pull_request:
    branches: [ master ]

jobs:
  lint:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: 'v2'
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version-file: 'v2/.node-version'
        cache: 'yarn'
        cache-dependency-path: '**/yarn.lock'
    - run: yarn
    - run: yarn lint