🔥
Github ActionsでNuxtjsをfirebase hostingにデプロイする
GithubActionsとは
試すこと
masterブランチにプッシュすると、firebase hostingにデプロイする
前提
- Firebaseのプロジェクトを作成していること
-
yarn create nuxt-appでnuxtのプロジェクトができていること - githubのrepository作成済みであること
やること
- CIに必要なFirebaseのtoken取得
- Githubに環境変数の登録
- ymlの編集
CIに必要なFirebaseのtoken取得
firebaseのtokenについてはこちらを参照
firebase login:ci
でCIなどで使うためのtokenが取得できる。
発行した認証トークンは、Googleアカウントに紐付いたトークンです。認証したGoogleアカウントが他のFirebaseプロジェクトにもアクセス可能な場合、そのプロジェクトにも利用可能です。
とのことなので、取り扱いの注意が必要
Githubに環境変数の登録
githubのrepositoryのsettingsから、secretを選択し、firebaseのtokenをFIREBASE_TOKENとして入れておく
ymlの編集
.github/workflows/deploy.yml
# https://github.com/marketplace/actions/github-action-for-firebase
name: Build and Deploy
on:
push:
branches:
- master
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
- name: Install Dependencies
run: npm install
- name: Build
run: npm run generate
- name: Archive Production Artifact
# generateしたdistフォルダを永続化する
uses: actions/upload-artifact@master
with:
name: dist
path: dist
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
# build job で永続化したdistフォルダを取得する
- name: Download Artifact
uses: actions/download-artifact@master
with:
name: dist
path: dist
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
これは、以下のリンクのものをほぼそのまま利用 firebase-toolsのコマンドをgithub Actionsで簡単に使えるようにしてくれるものかと思います。
artifact
成果物を使えば、ジョブの完了後にデータを永続化でき、そのデータを同じワークフロー中の他のジョブと共有できます。
upload-artifactで指定したディレクトリがgithubのActionsの詳細で見ることができる。
このファイルをダウンロードできたりする。
needs
このジョブの実行前に正常に完了する必要があるジョブを示します。 文字列型または文字列の配列です。 1つのジョブが失敗した場合、失敗したジョブを続行するような条件式を使用していない限り、そのジョブを必要としている他のジョブはすべてスキップされます
Discussion