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

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

### PlayCanvasとは？

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

[https://developer.playcanvas.com/ja/user-manual/introduction/](https://developer.playcanvas.com/ja/user-manual/introduction/)


### GitHub Actionsを使用する

GitHubのリポジトリで「Actions」を選択します。
![1-2440c1b3-78e0-4618-a30d-39c1ea0da573.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/26f7d65a-4ce6-2a54-683f-0f94716234c9.png)


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

![2-a48c4ec4-c9e1-445c-98b3-9027c469fdc4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9a5a00d3-e253-ce8c-df4e-9328cc6b7340.png)

Start Commitを選択します。

![3-1f0fbe35-a386-44dc-8fc9-c33d72bd0440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/7ca5d2ea-3988-eb73-0771-54a310d0f515.png)

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

![jibi-9df78823-ef04-4554-895a-90e7a893f09c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/09fe7f32-9e6d-241d-927b-9ed79bc4d5ea.png)

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

![4-ae86be86-bae4-49b5-9ef2-516e057aa200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b14dc5f3-6967-34cd-7e95-8da97d5b9ad3.png)

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

![5-9339acde-3901-47bd-8d32-467e23c8764a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/2388b84d-90f8-5b18-26ae-9b65fdc471f1.png)

nodejs.ymlを書き換えます

```yaml
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」を選択します。

![hie-13fd042e-0b86-4dea-81c3-20146abbf196.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/4cf915e1-86f5-68e3-8e40-459351fea218.png)

### playCanvas.jsonを生成する

PlayCanvasのAPIキーは[こちら](https://playcanvas.com/account)から取得します。
![aaaa.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/1fdfe104-dc78-671c-e97e-a11ff57b2898.png)

```bash
 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の環境変数はこちらのコマンドを実行して取得します。

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

![push.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/47bf0b89-74cb-3834-2cee-573d2c151d0d.png)