docker_for_phaser3_vite_typescript

概要

ViteにてPhaser3をTypeScriptで書くためのDocker環境のサンプル。

利用手順

当リポジトリをクローンする。あるいはzipでダウンロードする。
Visual Studio Codeを起動し、クローンした先のフォルダを開く。
vscodeのメニューから「Reopen in container」を選択する。コンテナのビルドが始まるため、しばらく放置する。
cd docker_for_phaser3_vite_typescriptを実行して移動する。
yarn installを実行する。
yarn devを実行して、ブラウザで「localhost:8000」にアクセスする。Phaser3の画面が表示されれば成功。3000ポートじゃないので注意。8000ポートにしている理由は注意点を参照。

注意点

Viteのポート指定

yarn devした際のポート番号はデフォルトポートから変更している。

export default defineConfig({
  build: {
   //  中略
  },
  server: {
    port: 8000  // ここを追加
  }
});

portで指定しないとデフォルトとして3000ポートを使うのだが、たまたま別のコンテナで使ってたりするとポートが利用できない。わりと3000はよく使うので、最初から別のポートを使うようvite.config.tsに追記している。現状はポート番号として~~テキトーに~~8000を指定しているが、このポート番号が衝突する場合は別の番号に変更してからDockerコンテナをビルドする。

Viteのインライン化阻止

デフォルト設定だと、Viteは4k以下の小さな画像を勝手にbase64でインライン化してしまう。すると、Phaser.jsから参照できなくなりリンク切れを起こしてしまう。これを阻止するため、vite.config.tsを編集する。

export default defineConfig({
  build: {
    assetsInlineLimit: 0,  // これ
    //  中略
});

この問題の厄介なところは、開発時は見えていた画像がbuildすると見えなくなる点。それまでは順調に開発できていても、buildする際にインライン化するので、そこで初めてリンク切れを起こして問題が表面化する。

`devcontainer.json`の書き換え

当リポジトリをWindowsで利用しようとしたとき、ファイルdevcontainer.jsonにおけるフォルダ指定を書き換える必要があった。

"dockerComposeFile": [
   "..\\docker-compose.yml", # ここの行
   "docker-compose.yml"
],

「1つ上のフォルダにあるdocker-compose.yml」を指している部分について、本来スラッシュ1つ/だった部分をバックスラッシュ2つ\\に変更してエスケープしている。macOSなど他のプラットフォームだと問題ないのだが、Windowsに関してのみこの部分がスラッシュ1つだとうまく解釈できずエラーになった。今はどうかわからないが・・・。

ysko909 / docker_for_phaser3_vite_typescript Goto Github PK