Godotでエクスポートしたプロジェクトを、IBM Cloud Code Engine で動かすまで

# 概要
この記事は、汎用2D/3Dゲームエンジンの「Godot（Godot Engine）」からエクスポートしたゲームを、IBM Cloud Code Engineで動かすまでの手順をまとめたものです。「Godot」はバージョン4.3を使用しています。

# IBM Cloud Code Engineを使う理由
IBM Cloud Code Engineを使うことで、インターネットで公開するためのドメインやSSL/TLSサーバ証明書が自動で付与されるとともに、自動スケール機能があるため、ゲームの公開に大変向いています。

# Godot（Godot Engine）
Godot（Godot Engine）は、汎用2D/3Dのゲームエンジンで、WindowsやMac、Linuxで使用することができます。Webブラウザ上で動くゲームや、スマートフォン、タブレット端末、PC向けのゲームを開発することができます。
公式Webサイト：https://godotengine.org/

# 本記事で使うGodotのサンプル
本記事では、GodotからHTML5エクスポートしたゲームを、コンテナとしてビルドし、IBM Cloud Code Engineで動かすまでを確認するためのなので、Godotのサンプルゲームである「[Platformer 3D Demo](https://godotengine.org/asset-library/asset/2748)」を読み込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/eee3209b-b4cd-49d4-06c7-f0fde4e5029c.png)

# TLS証明書の上書き設定を行い、Godotからエクスポートする手順
Godotのプロジェクトをそのままエクスポートした場合、IBM Cloud Code EngineのようにSSL/TLSサーバ証明書が自動付与される場合は、SSL/TLSサーバ証明書が上書きされずにエラーが発生します。
したがって、Godot側でエクスポートする際に、SSL/TLSサーバ証明書の上書き設定が必要になります。
## TLS証明書の上書き設定
Godotの画面で「プロジェクト」>>「プロジェクト設定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/0bb555a3-6e72-63c8-500d-1a4596cd82ef.png)

「一般」タブ内の「設定のフィルター」で「TLS」を入力します。表示された「高度な設定」のトグルをオンにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/22d8968d-b699-14de-e69a-09aa96491e1d.png)

下図のようになれば良いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c6d711d3-b240-fcd0-7458-6ce2004a084a.png)

## HTML5としてエクスポート
Godotの画面で「プロジェクト」>>「エクスポート」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/a63b109e-9569-d4df-716e-087b3317762e.png)

「追加」をクリックし、表示される「Web」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/1918bfaa-151f-907d-7568-9a79dab12057.png)

「エクスポート」画面で、「Web（実行可能）」を選びます。
「リソース」タブ内の「リソース以外のファイル/フォルダをエクスポートするためのフィルター」に、「*.crt」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/d8dfa217-7da7-810c-d82f-5a4768cd429d.png)

「プロジェクトのエクスポート」をクリックします。「index.html」として保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/5da6a7e6-f399-536c-fd79-9285fa1586f3.png)

# エクスポートしたファイルのコンテナ作成
次の手順で作業を行います。Godotの公式ドキュメントの[How to Quickly Build, Deploy, and Serve Your HTML5 Game](https://www.docker.com/blog/how-to-quickly-build-deploy-and-serve-your-html5-game/)を参考に実施しましょう。
## Dockerfileの作成
Godotで「index.html」を保存したディレクトリ（Windowsで言えばフォルダ）内に、Dockerfileを作成します。
```
FROM nginx 
COPY . /usr/share/nginx/html
```
## Docker Hubにログイン
Docker Hub接続します。Docker Hubのユーザー名は、例として、workuser1 とします。
workuser1の部分を、各自のDocker Hubのユーザー名に読み替えて作業しましょう。
```
docker login --username workuser1
```
## コンテナをビルド
Godotで「index.html」を保存したディレクトリ（Windowsで言えばフォルダ）内で、次のコマンドを実行します。
```
docker build -t workuser1/robo .
```
ビルドしたコンテナのイメージを確認するために、次のコマンドを実行します。
```
docker images
```
実行結果例 (IMAGE IDは、docker buildの実行毎に異なります。）
```
REPOSITORY          TAG       IMAGE ID       CREATED         SIZE
workuser1/robo     latest    215e5221e3bf   3 minutes ago   298MB
```

# コンテナレジストリにコンテナを登録
次のコマンドを実行し、ビルドしたコンテナを、Docker Hubに登録します。
```
docker push workuser1/robo:latest
```
完了すると、次のように表示されます。docker.ioで始まる部分を指定することで、Godotからエクスポートしたゲームを含むコンテナイメージを、IBM Cloud Code Engineをはじめ、コンテナ運用環境で動かすことができます。
```
The push refers to repository [docker.io/workuser1/robo]
20ac94203423: Pushed
11de3d47036d: Mounted from library/nginx
16907864a2d0: Mounted from library/nginx
2bdf51597158: Mounted from library/nginx
0fc6bb94eec5: Mounted from library/nginx
eda13eb24d4c: Mounted from library/nginx
67796e30ff04: Mounted from library/nginx
8e2ab394fabf: Mounted from library/nginx
```

# IBM Cloud Code Engineでコンテナを動作
## IBM Cloudにアクセスします。
IBM Cloud Code Engine にアクセスします。>> https://cloud.ibm.com/codeengine/overview

## Project を作成
IBM Cloud Code Engine 上で、「Projects」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/dddf1932-893b-af68-c77e-6e51d221742f.png)

「Create」をクリックし、Projectを作成します。Projectは、アプリケーションを管理する場所です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/dbf2e199-132a-83da-1304-6008fe37d184.png)

Project内に、アプリケーションを作成します。

## アプリケーションの作成
workuser1の部分を、各自のDocker Hubのユーザー名に読み替えて作業しましょう。
Project画面で、「Applications」をクリックします。その後、「Create」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c05e9b3b-3212-32a3-1ffd-38fe1f716d6a.png)

「Image reference」に、コンテナイメージをプッシュした際に取得した、docker.ioから始まるURLを記述します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/6bc2d361-ef37-08f7-c231-9f2bb64f1eac.png)

画面下に移動し、「Min number of instances」を0インスタンスにします。「Max number of instances」を2インスタンスにします。
なお、「CPU and memory」を「0.5 vCPU/1GB」でも今回のゲームであれば動かすことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c36fe7a2-6d17-1a04-dc8d-77f0b5c1c6dc.png)

「Optional settings」の「Image start options」を開き、「Listening port」に「80」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ed64e3b7-a1ab-09bd-82be-572b3db71508.png)

「Create」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/584d03ec-70ac-c875-138d-92de98ca668d.png)

アプリケーション名の右隣が、「Deploying」から「Ready」になるまで待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/a9343df9-bdd4-6de2-be5f-47c48fa4a581.png)

画面右上の「Test application」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/e77e4239-9148-b303-406b-b19d6601e8e1.png)

「Application URL」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/c87a3227-d4b6-db9f-9dcf-4604d90b9e9d.png)

Godotからエクスポートしたサンプルゲームが表示されます。実際にプレイできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/fd26dd71-e6df-bdbe-1169-bc471b69de68.png)

このとおり、ドメインとSSL/TLSサーバ証明書が付与されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ffe36db4-f8e0-08d4-5255-9254695f1b42.png)

コンテナの稼働状況が表示されます。「Min number of instances」を0インスタンスにしたので、ゲームにアクセスしていないときは、0インスタンスになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41414/ce049510-e7af-ce8b-4c28-fe795bd73531.png)

# まとめ
本記事では、Godotからエクスポートしたゲームを、コンテナとしてビルドし、IBM Cloud Code Engineで動かすまでの手順を確認しました。Godot（Godot Engine）で開発したゲームの実行環境として、IBM Cloud Code Engineが選択肢に入ればと思います。