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

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

ビルド方法

まず、Node.js の LTS もしくは Maintenance に該当するバージョンと、yarn をインストールしてください。

注記

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 ファイルを作成します。

備考

.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

注記

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

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

$ yarn run export

備考

パスに全角文字が含まれる状態で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を実行するところからやり直してください。

outフォルダが生成されます。この中には HTML ファイル、画像ファイル、JavaScript ファイルなどといった静的ファイルが入っています。これをオンプレミスサーバーで利用するかホスティングサービス(Netlify や Firebase Hosting など様々なものがあります)などにアップロードすることで Web サーバーの設置が完了します。

注意

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

古いバージョンでは web-server-static.zip という名前です。 ↩

ビルド方法​

Footnotes​

ビルド方法

Footnotes