ユドナリウムを CLOUDFLARE の Workers & Pages に設置したメモ

# 概要
[以前はFirebaseにユドナリウムを設置](https://qiita.com/hibohiboo/items/8375c9cd075da1f94d58)したが、1.17から新SkyWay用にバックエンドが必要になったため、CloudFlareに設置してみた。

[設置したユドナリウム - https://yakumi.pages.dev/](https://yakumi.pages.dev/)

# ローカル環境
- エディタ: VSCode
- Nodeエンジン: Node.js v22
- シェル: gitbash

# 準備
## ユドナリウムの準備

ユドナリウムのソースコードをgithubからダウンロードしておく。

[ユドナリウム - フロントエンド](https://github.com/TK11235/udonarium)
[ユドナリウム - バックエンド](https://github.com/TK11235/udonarium-backend)

## SkyWayの準備
[サインアップ](https://console.skyway.ntt.com/signup/)は完了しているものとする。

### プロジェクトの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/bc364383-ea14-d098-0d0f-023372ae36d9.png)


### アプリケーションの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/d91a2fb2-952e-84a4-d844-528ec41e891e.png)


### アプリケーションIDとシークレットキーの確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/aaad3375-6eab-5b89-2264-a76b2a639d3c.png)

後に、バックエンドの環境変数に登録するのでメモしておく。

環境変数|設定値|例
--|--|--
SKYWAY_APP_ID|アプリケーションID|00xx00x0-x0x0-00x0-x00x-xx0000x0x0xx
SKYWAY_SECRET|シークレットキー|ErXXXX00xxxXxx0XXXX/XXXXxXXXXXXXxXXXxxXXX0=

## CloudFlareの準備

### サインアップ
[cloudflareのサインアップページ](https://dash.cloudflare.com/sign-up)にアクセス。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/fadbfe67-2d2c-f77c-c87f-52dfcd8eba51.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/078f2e08-25e6-5eae-efd8-a6358012305f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/3c7b5816-7556-f413-2439-0d8c5da11578.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/51f3807a-1ef0-a26b-26f3-373e242ae850.png)

登録したメールアドレスに来たメールのリンクをクリック。

ブラウザが下記の画面になったら完了。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/171b81b3-cbf6-56af-456e-44099143e596.png)

# デプロイ
## フロントエンドのデプロイ（デプロイされるドメインの確認）
フロントエンドのソースコードのルートディレクトリで下記のコマンドを実行。

```
npm i
npm run build && npx wrangler pages deploy dist/udonarium
```

Ok to prroceed? には y を入力。

```
$ npx wrangler pages deploy dist/udonarium
Need to install the following packages:
wrangler@3.78.7
Ok to proceed? (y) y
```

しばらくすると、ブラウザで承認を求められるので「Allow」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/26710e9e-c0af-4577-971f-02c9aaefb159.png)


承認すると、プロジェクトの名前を入れろとか言われる。適当に好きな名前を入れる。

```
√ Enter the name of your new project: ... hoge
√ Enter the production branch name: ... hoge-cloudflare
```

改善に協力くださいは、yesでもnoでも好きなほうを。自分はyesにした。メトリクスを送ることになるので、若干通信が多めに発生するのかも。

```
√ Would you like to help improve Wrangler by sending usage metrics to Cloudflare? ... yes
```

これでデプロイされる。
ブラウザのCLOUDFLAREのダッシュボードからデプロイされていることを確認できる。
（表示されなければ、少しまってF5などでページ更新)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/e6205c20-75f7-8db7-58c8-f67612357072.png)

「訪問する」でユドナリウムがデプロイされたことを確認できる。
ただし、まだSkyWayの設定ができていないのでちゃんとは動かない。
バックエンドの環境変数に利用するので、フロントエンドのドメインをメモしておく。

この例では `https://yakumi.pages.dev/`

環境変数|設定値|例|
--|--|--
ACCESS_CONTROL_ALLOW_ORIGIN|フロントエンドのドメイン|`https://yakumi.pages.dev/`

## バックエンドのデプロイ

バックエンドのソースコードを開き、ファイル`packages/backend/cloudflare-workers/wrangler.toml`を編集して保存する。

```yaml:packages/backend/cloudflare-workers/wrangler.toml
name = "udonarium-backend"
main = "src/index.ts"
compatibility_date = "2024-04-24"

[vars]
SKYWAY_APP_ID = "準備でメモしたアプリケーションID"
SKYWAY_SECRET = "準備でメモしたシークレットキー"
SKYWAY_UDONARIUM_LOBBY_SIZE = 4
ACCESS_CONTROL_ALLOW_ORIGIN = "フロントエンドのドメイン"
```

デプロイする

```
npm i
npm run cloudflare-workers:deploy
```

デプロイするとバックエンドのURLが表示される。
下記の例だと`https://udonarium-backend.hibohiboo66-cloudflare.workers.dev`の部分。
フロントエンドのデプロイに使用するためメモしておく。

```
$ npm run cloudflare-workers:deploy

> udonarium-backend@1.0.0 cloudflare-workers:deploy
> npm run deploy -w @udonarium-backend/cloudflare-workers


> @udonarium-backend/cloudflare-workers@1.0.0 deploy
> wrangler deploy --minify src/index.ts


 ⛅️ wrangler 3.75.0 (update available 3.78.7)
-------------------------------------------------------

Total Upload: 22.25 KiB / gzip: 8.76 KiB
Your worker has access to the following bindings:
- Vars:
  - SKYWAY_APP_ID: "準備でメモしたアプリケーションID"
  - SKYWAY_SECRET: "準備でメモしたシークレットキー"
  - SKYWAY_UDONARIUM_LOBBY_SIZE: 4
  - ACCESS_CONTROL_ALLOW_ORIGIN: "フロントエンドのドメイン"
Uploaded udonarium-backend (2.81 sec)
Deployed udonarium-backend triggers (0.36 sec)
  https://udonarium-backend.hibohiboo66-cloudflare.workers.dev
```

## フロントエンドのデプロイ

先ほどメモしたバックエンドのURLを設定ファイル`src/assets/config.yaml`に記載して保存する。

```diff:src/assets/config.yaml
backend:
  mode: skyway2023 #'skyway2023' or 'skyway'
-  url: https://{your-backend-hostname} #Your Backend API URL
+  url: https://udonarium-backend.hibohiboo66-cloudflare.workers.dev/
webrtc: #非推奨（旧SkyWay）
  key: aaaaaaaa-bbbb-ccccc-dddd-eeeeeeeeeeee #[deprecated] Your (old) SkyWay API key
app: #未使用
dice: #未使用
```

再度デプロイする。
```
npm run build && npx wrangler pages deploy dist/udonarium
```

# 動作確認
フロントエンドをデプロイしたページにアクセスし、ユドナリウムが利用できることを確認する。

https://yakumi.pages.dev/

ローカルで確認したい場合の記事は[別途記載](https://qiita.com/hibohiboo/items/38ec8a8beed4429f16a3)。

# 参考

https://developers.cloudflare.com/workers/get-started/guide/