Github Actionsを使用してFirebase hostingへの自動デプロイ&Parcelビルド

#はじめに
こちらの記事はビルドツールを勉強のためにParcelを導入した際に個人的にわからなかったことをまとめています
node.jsをほぼ初めて触ったので至らない点があるかと思いますがご了承ください

#Parcel Setup
https://ja.parceljs.org/

parcelをプロジェクト直下にインストールします

$ npm install parcel-bundler
$ npm init -y

packege.jsonが作成されます

次にcross-envも追加します

$ npm install cross-env

package.json編集

一部抜粋しています
※今回はsrcディレクトリの内容をビルドし、uploadに出力します。

package.json

"scripts": {
    "clear-build-cache": "rm -rf .cache/ upload/",
    "dev": "parcel upload/index.html",
    "build": "cross-env NODE_ENV=production parcel build src/index.html -d upload",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
    "cross-env": "^7.0.3",
    "parcel-bundler": "^1.12.5"
}

ビルド

なにも指定しない場合はデフォルトでdistに出力されます

$ npm run build

これでローカル環境でのビルドは完了しました

#Firebase hostingの設定
こちらはたくさん記事があったので割愛します。
下記のページが参考になりました。
Firebase公式のGitHubとHostingのインテグレーションが熱い

細かい設定

先ほどビルドした内容がuploadに格納されているのでhostingにアップするフォルダをuploadに指定します

firebase.json

{
  "hosting": {
    "public": "upload",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

自動作成されたymlファイルでnpmコマンドの部分を追加で記述します
firebase-hosting-pull-request.ymlと
firebase-hosting-maege.ymlの両方にビルドコマンドを追加します

firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    name: Firebase Deploy
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: install package
        run: |
          npm install
      - name: build Parcel
        run: |
          npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: project-id
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

      - name: Notify pull request build
        uses: 8398a7/action-slack@v3.8.0
        with:
          status: ${{ job.status }}
          author_name:pull request build
          fields: repo,message,commit,author,action,eventName,ref,workflow
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
        if: always()

こちらのフローはプルリクエストが作成された際とそのプルリクにコミットがpushされたときがトリガーとなっています

上記のActionが実行完了するとfirebase hosting上にプレビューページが作成されるので確認もできます！

問題なければプルリクエストをマージしてその後デプロイがされるというわけです

さいごに

ymlファイルにビルドの処理をどうやってすればいいんだろうとすごく悩んでいたのですが、わりとシンプルな記述でいけました
node.jsこれから少しずつ慣れていきたいと思います。。。

参考にさせていただいた記事

Firebase公式のGitHubとHostingのインテグレーションが熱い
[Parcel 入門 ～Parcelはwebpackの代わりになるのか～]
(https://qiita.com/soarflat/items/3e43368b2d767c730781)