LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-19

はじめに

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

Parcel Setup

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の代わりになるのか~

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0