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の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をされるたびにデプロイをすることができます。
