はじめに
こちらの記事はビルドツールを勉強のために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 --public-url ./",
"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
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
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の代わりになるのか～
↧