Skip to main content

静的ファイルを生成して設置

リリース一覧にあるweb-server-static.zipに相当するファイルを生成する方法についての解説です。この解説の方法を用いることで、静的ファイルに環境変数などのデータを静的ファイルに埋め込むなどといった機能を使うことができますが、基本的にはweb-server-static.zipを使用するほうが簡単であるためそちらを推奨します。

ビルド方法

Node.js の v16 もしくは v14 がインストールされていない場合はインストールしてください。npm もあわせてインストールしてください(通常は Node.js と一緒にインストールされます)。

Node.js と npm のバージョンは次のコマンドで確認できます。

$ node --version
$ npm --version
note

コマンドを実行する際は、$の文字は入力しないでください。

yarn がインストールされていない場合は、次のコマンドを実行して yarn をインストールします。

$ npm install -g yarn
note

Flocon は npm や pnpm には対応していないため、yarn は必須です。

API サーバーのソースコードをダウンロードします。様々な方法がありますが、ここでは git clone を用いてダウンロードする方法を解説します。下のコマンドを実行して GitHub からソースコードをダウンロードします。なお、この例では -b には release ブランチを指定していますが、代わりにタグを指定することもできます。

$ git clone https://github.com/flocon-trpg/servers.git -b release --depth 1

ダウンロードされた server フォルダはリネームしたり別の場所に移動しても構いません。ただし、パスに全角文字が含まれているとエラーが出ることがあるため、全角文字を含まないようにすることを推奨します。

server/apps/web-server フォルダ内で .env.local ファイルを作成します。

info

.env.localではなく環境変数やenv.txtを用いて設定することも可能です。これらを併用して別々に設定することも可能です。これらの違いは、.env.localと環境変数で設定した内容(Next.js の機能に従うため、NEXT_PUBLIC_から始まらないものは無視されます)はyarn run exportを実行したときに生成される静的ファイルの JavaScript ファイルなどに埋め込まれますが、env.txtの内容は埋め込まれないという点です。

作成した .env.local ファイルをメモ帳で開き、web-server 設定ツールを利用して変数を書き込んで保存します。あくまで一例としてですが、.env.local ファイルは最終的に下のようになります。

NEXT_PUBLIC_FIREBASE_CONFIG='{"apiKey":"***","authDomain":"***.firebaseapp.com","databaseURL":"https://***.firebaseio.com","projectId":"***","storageBucket":"***.appspot.com","messagingSenderId":"***","appId":"***"}'
NEXT_PUBLIC_API_HTTP=https://example.com
NEXT_PUBLIC_API_WS=wss://example.com
NEXT_PUBLIC_AUTH_PROVIDERS=email,google
NEXT_PUBLIC_FIREBASE_STORAGE_ENABLED=true

server/apps/web-server フォルダ内で次のコマンドを実行して、必要なパッケージをインストールします。なお、これには合計 1GB 程度の空きストレージ容量が必要です。また、これには数分から十数分程度の時間がかかることがあります。

$ yarn workspaces focus
note

yarn workspaces focusの代わりにyarn installなどを実行しても構いません。ですがyarn installでは API サーバーに必要なパッケージもインストールしようとするため、環境によっては bcrypt パッケージなどのインストールに失敗します。そのためyarn workspaces focusのほうが無難だと思われます。

次のコマンドを実行して、静的ファイルを作成します。これには数分から十数分程度の時間がかかることがあります。

$ yarn run export
info

yarn run buildを実行したときにMODULE_NOT_FOUNDというエラーが出る場合は、パスに全角文字などが含まれていないかどうか確認してください。

info

パスに全角文字が含まれる状態でyarn workspaces focusなどを実行していた場合、yarn run buildを実行するとThe command failed for workspaces that are depended upon by other workspaces; can't satisfy the dependency graphというエラーが出て失敗することがあります。この場合は、パスに全角文字を含まないようにしてからserversフォルダにあるnode_modulesフォルダを削除して、yarn workspaces focusを実行するところからやり直してください。

note

yarn run buildを実行するとESLint must be installed in order to run during builds: yarn add --dev eslintというエラーが出ますが、無視して構いません。

最終的にoutフォルダが生成されます。この中には HTML ファイル、画像ファイル、JavaScript ファイルなどといった静的ファイルが入っています。これをホスティングサービスなどにアップロードすることで Web サーバーの設置が完了します。

caution

生成されたoutフォルダと.nextフォルダ内のファイルには、一部の環境変数や .env.localファイルのデータが埋め込まれています。そのため、これらのファイルを第三者と共有することは推奨されません。

静的ファイルをアップロードするホスティングサービスは Netlify や Firebase Hosting など様々なものがありますので、いずれかの方法でデプロイしてください。