静的ファイルを生成して設置
リリース一覧にあるweb-server-static.zip
に相当するファイルを生成する方法についての解説です。この解説の方法を用いることで、静的ファイルに環境変数などのデータを静的ファイルに埋め込むなどといった機能を使うことができますが、基本的にはweb-server-static.zip
を使用するほうが簡単であるためそちらを推奨します。
ビルド方法
Node.js の v16 もしくは v14 がインストールされていない場合はインストールしてください。npm もあわせてインストールしてください(通常は Node.js と一緒にインストールされます)。
Node.js と npm のバージョンは次のコマンドで確認できます。
$ node --version
$ npm --version
コマンドを実行する際は、$の文字は入力しないでください。
yarn がインストールされていない場合は、次のコマンドを実行して yarn をインストールします。
$ npm install -g 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 run build
を実行したときにMODULE_NOT_FOUND
というエラーが出る場合は、パスに全角文字などが含まれていないかどうか確認してください。
パスに全角文字が含まれる状態で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
を実行するところからやり直してください。
yarn run build
を実行するとESLint must be installed in order to run during builds: yarn add --dev eslint
というエラーが出ますが、無視して構いません。
最終的にout
フォルダが生成されます。この中には HTML ファイル、画像ファイル、JavaScript ファイルなどといった静的ファイルが入っています。これをホスティングサービスなどにアップロードすることで Web サーバーの設置が完了します。
生成されたout
フォルダと.next
フォルダ内のファイルには、一部の環境変数や .env.local
ファイルのデータが埋め込まれています。そのため、これらのファイルを第三者と共有することは推奨されません。
静的ファイルをアップロードするホスティングサービスは Netlify や Firebase Hosting など様々なものがありますので、いずれかの方法でデプロイしてください。