【簡単】GitHub Actionsを使って静的ファイルをFirebase Hostingにデプロイをする【PlayCanvas】

GitHub ワークフローを使用してPlayCanvasのプロジェクトをFirebase Hostingにデプロイをする方法を紹介します。

PlayCanvasとは？

PlayCanvasは、インタラクティブなウェブコンテンツ用のビジュアル開発プラットフォームです。作成するツールとウェブアプリは、どちらもHTML5を使用しています。 プラットフォームはウェブでホストされているため、インストールするものは何もなく、対応されているウェブブラウザを実行する任意のデバイスからアクセスできます。

https://developer.playcanvas.com/ja/user-manual/introduction/

GitHub Actionsを使用する

GitHubのリポジトリで「Actions」を選択します。

試しにNode.jsのワークフローを選択します。

Start Commitを選択します。

.github/workflowが作成されました。

PushされたためCIが動きます

package.jsonが存在していないリポジトリでスクリプトを実行しようとしているため失敗します。

nodejs.ymlを書き換えます

name: Node CI

on: [push]

jobs:
  deploy:
    runs-on: windows-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: install
        run: |
          yarn
      - name: yarn install, build, and test
        run: |
          yarn
          yarn playcanvas:init -t ${{ secrets.PLAYCANVAS_ACCESS_TOKEN }} -p ${{ secrets.PLAYCANVAS_PROJECT_ID }} -s ${{ secrets.PLAYCANVAS_SCENES }} -b ${{ secrets.PLAYCANVAS_BRANCH_ID }} -n ${{ secrets.PLAYCANVAS_PROJECT_NAME }} -r ${{ secrets.PLAYCANVAS_REMOTE_PATH }}
          cat playcanvas.json
          yarn playcanvas:download
          yarn deploy --token "${{ secrets.FIREBASE_TOKEN }}" --project "${{ secrets.PROJECT_ID }}"
        shell: bash
        env:
          CI: true

このままだとエラーが出るので環境変数を設定します。環境変数の設定方法「Settings　→ Secrests」を選択します。

playCanvas.jsonを生成する

PlayCanvasのAPIキーはこちらから取得します。

 npx playcanvas-tools init

環境変数	playcanvas.jsonの値	取得先
PLAYCANVAS_ACCESS_TOKEN	accessToken	playcanvas.json
PLAYCANVAS_BRANCH_ID	branchId	playcanvas.json
PLAYCANVAS_PROJECT_ID	projectId	playcanvas.json
PLAYCANVAS_PROJECT_NAME	projectName	playcanvas.json
PLAYCANVAS_REMOTE_PATH	remotePath	playcanvas.json
PLAYCANVAS_SCENES	scenes	playcanvas.json

Firebaseの環境変数はこちらのコマンドを実行して取得します。

npx firebase-tools login:ci

Firebase Hostingをまだ使用していない場合には

npx firebase-tools init

こちらを使用してFirebase Hostingの設定を行います。

環境変数	値	取得先
FIREBASE_TOKEN	token	Firebase CLI
PROJECT_ID	projectId	Firebase CLI / Firebase管理画面

この設定をするとPushをされるたびにデプロイをすることができます。