継続的インテグレーション

Wonderland Editor Docker Imageを使用すると、Wonderland Engineプロジェクトの効率的な継続的インテグレーションとデリバリーを設定できます。

このページでは、以下の最も人気のあるCIサービスで効率的な自動ビルドとデプロイを設定する方法を説明します:

さらに、このページではビルドを自動でアップロードする方法を説明します:

Gitlab CI / Gitlab Pages 

任意のdockerランナー（例: gitlab.comの共有ランナー）をGitlabで使用します。

設定 

.gitlab-ci.ymlは以下のようになります:

 1stages:
 2  - build
 3  - deploy
 4
 5package:
 6  image: wonderlandengine/editor:latest
 7  stage: build
 8  script:
 9    # WonderlandEditorがログインするためのWLE_CREDENTIALS変数を設定
10    - WonderlandEditor --windowless --package --project Project.wlp
11  cache:
12    key: ${CI_COMMIT_REF_SLUG}
13    paths:
14      - cache/
15  artifacts:
16    paths:
17      - deploy
18
19pages:
20  image: alpine:3.14
21  stage: deploy
22  rules:
23    # main/masterブランチのみにデプロイ
24    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
25  before_script:
26    - apk add gzip
27  script:
28    - gzip -k deploy/*.*
29    - mv deploy public
30  artifacts:
31    paths:
32      - public

$WLE_CREDENTIALSはアクセストークンを含む変数です。次のステップで設定します。

変数 

Gitlab CI用の変数はGitlabのウェブインターフェイスで見つかります: Settings > CI/CD > Variables。

「Add Variable」をクリックし、名前をWLE_CREDENTIALSに設定します。その値はAPIトークンで、アカウントページの「API-Token」で取得できます。 名前と有効期限を入力し、「Create New API-Token」をクリックします。トークンはリストの一番上の新しく作成されたエントリからコピーできます。

公開プロジェクトのための「Protect variable」を有効にして、マージされていないマージリクエストがCI変数にアクセスできないようにしてください。

キャッシュ 

最も時間がかかるタスクはテクスチャの圧縮です。キャッシュ（cache/ディレクトリに）すると大幅に高速化されます。したがって、このフォルダをCIキャッシュに指定するか、ソース管理にファイルをチェックインすることが有用です。

GitHub Workflows / GitHub Pages 

任意のdocker対応ランナー（例: GitHubのホストランナー）をGitHubで使用します。

設定 

ワークフローファイル（例: .github/workflows/github-pages.yml）は以下のようになります:

 1on: [push]
 2
 3permissions:
 4  contents: read
 5  pages: write
 6  id-token: write
 7
 8jobs:
 9  package:
10    runs-on: ubuntu-latest
11    container:
12      image: wonderlandengine/editor:latest
13    steps:
14    - name: Install Git
15      run: apt-get update && apt-get install -y git git-lfs
16    - uses: actions/checkout@v4
17      with:
18        lfs: true
19    - name: Package
20      run: /usr/local/bin/entrypoint.sh WonderlandEditor --windowless --package --project Project.wlp --output ./public/
21      env:
22          WLE_CREDENTIALS: ${{ secrets.WLE_CREDENTIALS }}
23    - name: Gzip
24      run: find ./public/ -type f ! -name '*.gz' -exec gzip -k "{}" \;
25    - name: Upload artifact
26        uses: actions/upload-pages-artifact@v3
27        with:
28          path: ./public
29
30  deploy-pages:
31    needs: package
32    runs-on: ubuntu-latest
33    if: ${{ format('refs/heads/{0}', github.event.repository.default_branch) == github.ref }}
34    steps:
35      - name: Deploy to GitHub Pages
36        uses: actions/deploy-pages@v4

Project.wlpはプロジェクトファイルです。

$WLE_CREDENTIALSはemail:passwordを含むシークレットです。次のステップで設定します。

deploy-pagesジョブはリポジトリのデフォルトブランチ（通常main）でのみ実行されます。

シークレット 

GitHub Workflows用のシークレットはGitHubのウェブインターフェイスで見つかります: Settings > Secrets > Actions。

画面右上の「New repository secret」をクリックし、名前をWLE_CREDENTIALSに設定します。 その値はAPI-Tokenで、アカウントページの「API-Token」で取得できます。 名前と有効期限を入力し、「Create New API-Token」をクリックします。トークンはリストの一番上の新しく作成されたエントリからコピーできます。

シークレットはフォークからのプルリクエストには渡されないため、外部の共同作業者からのプルリクエストではワークフローが実行されない可能性があります。

Bitbucket CI 

任意のdocker対応ランナー（例: GitHubのホストランナー）をGitHubで使用します。

設定 

パイプラインファイル（例: bitbucket-pipelines.yml）は以下のようになります:

 1image: wonderlandengine/editor:latest
 2
 3pipelines:
 4  default:
 5    - step:
 6        name: 'Build'
 7        script:
 8          - /usr/local/bin/entrypoint.sh WonderlandEditor --windowless --package --project Project.wlp
 9        artifacts:
10          - deploy/**

Project.wlpはプロジェクトファイルです。

$WLE_CREDENTIALSはemail:passwordを含むシークレットです。次のステップで設定します。

Bitbucketは現在、Gitlab PagesやGitHub Pagesのような静的ページホスティングサービスを提供していません。 代わりに、これをネットリファイへのデプロイと組み合わせて使用できます。

デプロイ先: Netlify 

ここでは、Netlify CLIを使用して「継続デプロイ」を行います。

設定 

Gitlab CIで説明したように.gitlab-ci.ymlを設定します。

デプロイをステージに追加します:

1stages:
2  - build
3  - deploy

次に、ファイルの最後に以下のデプロイジョブを追加します:

1netlify:
2  image: node:15
3  stage: deploy
4  script:
5    - npm install -g netlify-cli
6    - netlify deploy --dir=public --prod

変数 

Gitlabのウェブインターフェイスで、Gitlab CI用の変数を見つけます: Settings > CI/CD > Variables。

キーとしてNETLIFY_AUTH_TOKENを持つ変数を追加し、その値をnetlifyのアクセス トークンに設定します。ここで作成できます：こちら。

同様に、NETLIFY_SITE_IDのキーを持つ別の変数を追加します。その値をデプロイサイトの 「Site ID」に設定します。これは、 site settings > General > Site details > Site informationで見つけられます。 （サイトをまだ作成していない場合は、ガイドを こちらに従ってください）。

HeyVRへの公開 

CIからHeyVRへ公開するには、非公式の “heyvr-cli"パッケージをnpmで使うことができます。

最終的な公開ステップはHeyVR開発者ポータルで行う必要があります。

認証 

HeyVR アカウント設定で、“Developer Access Token"の下からAPIキーを取得します。

トークンを値として持つCI変数またはシークレットHEYVR_ACCESS_TOKENを追加します。

GitHub Workflowsでは、トークンを環境に追加する必要があります:

1  env:
2    HEYVR_ACCESS_TOKEN: ${{ secrets.HEYVR_ACCESS_TOKEN }}

ビルドのプッシュ 

CIからビルドをプッシュする際には、プロジェクトが deploy/フォルダにパッケージされていることを確認し、次のコマンドをCIスクリプトに追加してください:

1  - npm i -g heyvr-cli
2  - heyvr --version $CI_COMMIT_TAG --gameId "heyvr-game-id"

“heyvr-game-id"は、heyvrで作成したゲームのスラグです。

GitHub Actionsの場合は、$CI_COMMIT_TAGを${{ github.ref_name }}に置き換えてください。

Itch.ioへの公開 

Itch.ioはCLIツール“butler” を提供しており、ビルドをゲームページにアップロードします。

認証 

Gitlab CIまたはGitHub Workflowsのための公開を自動化するには、 次のコマンドを実行してAPIキーを取得する必要があります:

1butler login

このコマンドは、APIキーを書き込んだファイルのパスを出力します。 内容をコピーしてBUTLER_API_KEYという名前のCI変数またはシークレットに追加します。

詳しくはItch.io documentationページをご覧ください。

Butlerのインストール 

CIジョブでbutlerコマンドを利用可能にするには、 butlerが事前にインストールされたdockerイメージを使用できます:

1    image: dosowisko/butler

ここではdosowisko/butlerを使用しますが、 多くの代替品があります。

ビルドのプッシュ 

CIからビルドをプッシュする際には、プロジェクトが deploy/フォルダにパッケージされていることを確認し、次のコマンドをCIスクリプトに追加してください:

1  - butler push ./deploy user/game:channel-name

詳しくはItch.io documentationページをご覧ください。

明示的なバージョン 

タグからデプロイするときには、明示的なバージョン番号を追加することもできます。 Gitlab CIの場合は--userversion $CI_COMMIT_TAGを使用し、GitHub Actionsの場合は --userversion ${{ github.ref_name }}を使用してください。