さて、ブレヒロAPIを使ったゲームを自分のパソコンで作れた。ここまではできた。そうすると次に思うのは、「これ、自分だけじゃなくて他の人にも遊んでもらいたいな」ということですよね。
ただ、ここから先の「公開」という作業は、初心者にとってなかなかハードルが高い。今回の記事では、AIに指示を出しながら一歩ずつ進めていく、というやり方を前提に解説していきます。自分でコードを一から書ける必要はありません。AIにうまく頼めれば、公開まで到達できます。
ここで最初にお伝えしておきたいことがあります。 この記事は、公開までの「全体の流れ」と「各ステップで何をやっているのか」をつかむためのものです。記事に書いてあるコマンドや設定を一字一句そのまま実行するためのものではありません。なぜかというと、皆さんのプロジェクトの構成や環境はそれぞれ違うからです。同じ手順でも、フォルダ名が違ったり、使っているファイルが違ったりすれば、細かい部分は変わってきます。
ではどうするのがベストか。この記事で「こういう順番で、こういうことをやるんだな」という全体像をつかんでおく。その上で、実際の作業はAIに自分のプロジェクトの情報を渡しながら、一緒に考えて進める。これが一番確実です。
記事の中には各ステップで「AIにはこう頼むといい」という具体的な指示文も入れてあります。それをそのままコピーして使ってもいいですし、自分の状況に合わせてアレンジしても構いません。大事なのは、「全体の地図をこの記事で手に入れて、実際の道はAIと一緒に歩く」という進め方です。
この記事は、こういう方に向けて書いています。自分のパソコンではゲームが動いている。ログイン機能も動いている。でも、公開の仕方がわからない。GitやNetlifyもよくわからない。ここまでもAIに手伝ってもらいながら作ってきた。そういう方です。
結論から言います。やることは大きく分けて5つです。自分のプロジェクトをGitで管理する。それをGitHubに送る。Netlifyに読み込ませる。環境変数を設定する。そしてブレヒロ側の設定を本番用に変える。この順番でやれば公開できます。
まず最初に知っておいてほしいこと
ここが一番大事なところです。
ブレヒロAPIを使ったゲームは、「HTMLファイルをそのままアップロードすれば終わり」というものではありません。なぜかというと、ログイン処理やアクセストークンのやり取りには、「サーバー側の仕組み」が必要だからです。
ここで「サーバー側の仕組み」という言葉が出てきました。これは何かというと、たとえばこういうことです。皆さんがネット通販で買い物をするとき、画面には商品一覧が表示されますよね。でも、「この人はログイン済みかどうか」「クレジットカード情報は正しいか」といった確認は、皆さんの目には見えないところ、つまりサーバー側で処理されています。ブレヒロAPIゲームのログイン処理も同じで、ブラウザだけでは完結しない裏側の処理が必要なのです。
ですから、index.htmlというファイルだけアップロードすればいいわけではない。秘密の鍵にあたる「Client Secret」という情報をブラウザに置いてはいけない。ログインやデータ取得のためのサーバー処理が必要になる。こういうことなんです。
そこで今回は、Netlify Functionsという仕組みを使います。これは何かというと、Netlifyというサービスの中で、サーバー側の処理を動かせる機能です。自分でサーバーを用意しなくても、Netlifyがそれを肩代わりしてくれるわけです。
初心者の方がここで一番つまずきやすいのは、「Netlifyにファイルをドラッグ＆ドロップしたら終わりでしょ？」と思ってしまうことです。たとえば、自分で作ったHTMLだけのホームページなら、それでいいんです。でも、ログイン機能があるアプリはそうはいきません。サーバー側の処理も一緒に持っていく必要があります。
ここでまず、AIにこう頼んでみてください。
ローカルで動いている BFH API ゲームを Netlify で公開したいです。 現在は Node サーバーで OAuth と /api/* を処理しています。 静的アップロードではなく、Netlify Functions 対応に変えてください。
さらに、こう続けるとより正確な結果が返ってきます。
server.mjs の OAuth と API 処理を Netlify Functions に分解してください。 フロント側のパスは /auth/* と /api/* のまま維持してください。 Client Secret はブラウザに出さず、環境変数で扱ってください。
この段階で「何を言っているのかわからない」と感じた方も安心してください。上の文章をそのままコピーしてAIに貼り付ければ、AIが具体的なファイル構成やコードを出してくれます。中身を完全に理解している必要はありません。
ステップ1：自分のプロジェクトをGit管理にする
では順番にやっていきましょう。
まず、自分の作業フォルダをGitで管理できるようにします。Gitというのは、ファイルの変更履歴を記録してくれる仕組みです。「第1版」「第2版」と、誰がいつ何を変えたかを全部記録してくれます。
PowerShellを開いて、自分のプロジェクトフォルダに移動します。
cd "自分のプロジェクトフォルダのパス"
次にGitを初期化します。
git init
git branch -M main
ここで非常に重要なのが「.gitignore」というファイルです。これは、「Gitに記録しなくていいファイルの一覧」を書いておくものです。
なぜこれが必要かというと、たとえば「.env」というファイルには、あなたのゲームの秘密の鍵やパスワードにあたる情報が入っています。これをうっかりGitHubに上げてしまうと、全世界に公開されてしまいます。家の鍵を玄関の外に貼り付けているようなものです。
ですから、最低限こういう内容を.gitignoreに書いておきます。
.env
.env.local
.env.*.local
server.out.log
server.err.log
.netlify/
node_modules/
要するに、「公開してはいけないもの」と「公開する必要のないもの」を、最初に除外しておくということです。
もしこの段階で「自分のプロジェクトに合った.gitignoreがわからない」と思ったら、AIにこう聞いてください。
自分のプロジェクトのファイル一覧はこれです。 （フォルダの中身を貼り付ける） この中で .gitignore に入れるべきものを教えてください。
PowerShellでファイル一覧を出すには、プロジェクトフォルダで以下を実行すれば取れます。
Get-ChildItem -Recurse -Name
この結果をそのままAIに貼れば、「これは除外した方がいい」「これは含めていい」と判断してくれます。
ステップ2：GitHubにアップロードする
次はGitHubです。GitHubというのは、Gitで管理しているファイルをインターネット上に置いておける場所です。いわば、ソースコードの保管庫です。
GitHubで新しいリポジトリ（保管場所）を作ります。このとき、注意点があります。「Add a README file」「Add .gitignore」「Choose a license」というチェック項目が表示されますが、これらには一切触れず、空の状態で作ってください。
なぜか。すでに自分のパソコン側にファイルがあるからです。GitHub側にも最初からファイルを作ってしまうと、「どっちが正しいの？」という食い違いが起きて、初心者の方は高確率でここで止まります。引っ越し先の部屋にすでに家具が置いてあると、自分の家具を運び込むときにぶつかってしまう。だから空っぽの部屋を用意する、ということです。
リポジトリができたら、自分のパソコンからファイルを送ります。
まず、Gitに自分の名前とメールアドレスを登録します。
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメール"
メールアドレスを公開したくない方は、GitHubが用意している「非公開メールアドレス」を使うのが安全です。GitHubの「Settings」→「Emails」で確認できます。
その後、ファイルを記録（コミット）します。
git add .
git commit -m "Initial BFH Netlify version"
もし「dubious ownership」というエラーが出た場合は、表示された指示に従ってフォルダのパスを登録します。
git config --global --add safe.directory 'あなたのプロジェクトフォルダのパス'
コミットできたら、GitHubのURLを登録してファイルを送ります。
git remote add origin https://github.com/あなたのID/リポジトリ名.git
git push -u origin main
これで、あなたのソースコードがGitHubに上がりました。
ここでエラーが出て止まった場合、AIにはこう聞くのが一番早いです。
GitHubにpushしようとしたら、このエラーが出ました。 何をすればいいですか？
（PowerShellに表示されたエラーメッセージをそのまま貼る）
ポイントは、エラーメッセージを自分で解読しようとせず、そのままコピーして貼ることです。AIはエラーメッセージから状況を正確に読み取れるので、「次にこのコマンドを実行してください」と具体的に返してくれます。
ステップ3：NetlifyにGitHubのリポジトリを読み込ませる
次はNetlifyの設定です。
Netlifyにログインしたら、「Add new site」→「Import an existing project」→「GitHub」と進んで、先ほど作ったリポジトリを選びます。
もし「どのリポジトリにアクセスさせるか」と聞かれたら、「All repositories（全部）」ではなく「Only select repositories（選んだものだけ）」にするのがおすすめです。必要なものだけを見せる方が安全だからです。家に業者さんを呼ぶとき、全部屋の鍵を渡すのではなく、作業に必要な部屋の鍵だけ渡す方が安心ですよね。それと同じです。
Netlifyの設定画面では、次のように入力します。「Branch to deploy」はmain。「Base directory」は空欄。「Build command」も空欄。「Publish directory」は「.」（ドット1つ）。「Functions directory」は「netlify/functions」。
なぜBuild commandを空欄にするのか。それは、今回のプロジェクトが「ビルド」という変換作業が必要な構成ではなく、「そのまま使えるHTMLファイル」と「Netlify Functions」の組み合わせだからです。
この設定画面で「何を入れたらいいかわからない」と感じたら、AIにこう聞いてください。
いまNetlifyの設定画面でこの項目が表示されています。 自分のプロジェクト構成はこうです。 （フォルダ構成を貼る） 何を入力すればいいか教えてください。
（設定画面に表示されている項目名をそのまま貼る）
AIに渡す情報は「画面に何が表示されているか」と「自分のプロジェクトがどういうフォルダ構成か」の2つです。この2つがあれば、AIは正確に答えを出せます。
ステップ4：環境変数を設定する
ここが公開作業の最も重要なポイントです。
ブレヒロAPIゲームには、秘密の鍵や接続先の情報が必要です。具体的には、Client ID、Client Secret、Session Secret、OAuthの接続先URL、APIの接続先URL、ログイン後の戻り先URLなどです。
これらの情報は、ソースコードの中に直接書いてはいけません。なぜなら、GitHubに上げたソースコードは誰でも見られるからです。では、どこに書くのか。Netlifyの「環境変数」という仕組みを使います。
これは何かというと、Netlifyの管理画面の中だけで保管される設定値のことです。ソースコードには含まれないので、外部からは見えません。レシピ（ソースコード）には「秘伝のタレを加える」とだけ書いておいて、タレの中身は別の金庫（環境変数）にしまっておく、というやり方です。
Netlifyのプロジェクト画面から「Project configuration」→「Environment variables」と進み、「Add a variable」で1つずつ追加します。
追加するものは、BFH_CLIENT_ID、BFH_CLIENT_SECRET、BFH_SESSION_SECRET、BFH_SCOPE、BFH_AUTH_URL、BFH_TOKEN_URL、BFH_API_BASE_URL、BFH_CORE_BASE_URL、BFH_UNITS_PATHなどです。
BFH_SESSION_SECRETは自分で作るランダムな文字列です。PowerShellなら、たとえばこのコマンドで作れます。
[guid]::NewGuid().ToString() + [guid]::NewGuid().ToString()
初心者の方が迷いやすいのが「BFH_REDIRECT_URI」です。これは、Netlifyで公開したあとのURLがわかってから設定するのが確実です。たとえばNetlifyのURLが「https://あなたのサイト名.netlify.app」なら、BFH_REDIRECT_URIは「https://あなたのサイト名.netlify.app/auth/callback」となります。
「どの環境変数に何を入れればいいかわからない」という場合は、AIにこう頼んでください。
ローカルで使っている .env ファイルの中身はこれです。 （.envの内容を貼る） Netlifyの環境変数にはどの名前でどの値を入れればいいか、一覧で教えてください。
ここで1つ注意があります。.envの中身にはClient Secretなどの秘密情報が含まれています。AIに貼ること自体は作業上必要ですが、この内容をブログやSNSに貼らないよう気をつけてください。
ステップ5：ブレヒロ側の設定を本番用に変える
Netlify側の設定だけでは、まだ終わりません。ブレヒロの「Developer Portal」という管理画面側でも、設定を本番用に変える必要があります。
具体的には、Developer Portalのアプリ設定画面で、リダイレクトURI（ログイン後の戻り先）を「https://あなたのNetlifyドメイン/auth/callback」に、ログアウト後のリダイレクトURIを「https://あなたのNetlifyドメイン」に、CORSオリジン（通信を許可する相手先）を「https://あなたのNetlifyドメイン」に変更します。
ここが「localhost」（自分のパソコンの意味）のままになっていると、本番環境ではログインできません。実はこれが、初心者の方が一番ハマりやすいところです。
「Netlifyに公開したのに、なぜかログインできない」というとき、原因はほぼ間違いなくこのリダイレクトURIの設定漏れです。引っ越しをしたのに郵便局に転居届を出していないようなもので、郵便物（ログイン後の情報）が旧住所（localhost）に届いてしまっている状態です。
ここでつまずいた場合のAIへの聞き方はこうです。
Netlifyにデプロイしてサイトは表示されるのですが、ログインボタンを押すとエラーになります。 Netlify側の環境変数はこう設定しています。 （環境変数の名前と、秘密情報以外の値を貼る） BFH Developer Portal側の設定はこうなっています。 （Developer Portalの設定画面の内容を貼る） 何が間違っているか教えてください。
「ログインできない」とだけ言うのではなく、「Netlify側の設定」と「BFH側の設定」の両方をAIに見せるのがコツです。両方の情報があれば、AIは食い違いを見つけて指摘してくれます。
ステップ6：再デプロイして動作確認する
環境変数やリダイレクトURIの設定を変えたら、もう一度デプロイ（公開処理）をやり直します。Netlifyの「Deploys」画面から「Trigger deploy」を押すか、GitHubに新しいコミットを送れば自動で再デプロイされます。
再デプロイが終わったら、本番のURLで以下の流れを確認してください。トップページが開くか。「BFHでログイン」を押すとブレヒロの認可画面に飛ぶか。認可後、サイトに戻ってくるか。所持ユニットやスフィアの情報が読み込めるか。そして実際にゲームがプレイできるか。ここまで通れば、公開は完了です。
動作確認で何か問題が起きた場合は、AIにこう伝えてください。
NetlifyにデプロイしたブレヒロAPIゲームで、以下の動作確認をしています。 （1）トップページ → 表示される （2）ログインボタン → ブレヒロの認可画面に飛ぶ （3）認可後 → ここでエラーになる エラーの内容はこうです。 （ブラウザに表示されたエラーや、Netlifyのログを貼る）
このように、「どこまではうまくいって、どこで止まったか」を伝えるのが重要です。AIは「成功した部分」と「失敗した部分」の境目がわかれば、原因をかなり絞り込めます。
困ったときの頼り先は2つある
ここからは、作業全体を通じて大事な話をします。
AIに相談するのが基本の進め方ですが、AIだけでは解決しない場面も出てきます。特に、ブレヒロのAPI仕様に関わる部分や、Developer Portalの画面が変わった場合などは、AIの知識が追いついていないことがあります。
そういうときは、ブレヒロ技術部というDiscordの部活を頼ってみてください。ブレヒロのAPIを使って開発をしている人たちが集まっている場所で、実際にAPIを触っている人から直接アドバイスをもらえます。「AIにこう聞いたけど解決しなかった」という経緯も含めて相談すると、的確な回答が返ってきやすくなります。
つまり、頼り先は2つです。まずAIに聞く。それで解決しなければブレヒロ技術部で聞く。この2段構えで進めれば、大抵のことは乗り越えられます。
AIに頼むときの基本の考え方
ここで、AIへの頼み方について整理しておきます。記事の中でも各ステップに具体的な聞き方を書きましたが、共通するコツは3つあります。
1つ目は、「わからない」と正直に言うこと。遠慮して曖昧に進めると、かえって遠回りになります。「よくわかりません」「初心者向けにもっと具体的に教えてください」とはっきり伝えてください。
2つ目は、いま見えている画面やエラーメッセージをそのままコピーして貼ること。AIは「何が起きているか」が正確にわかれば、かなり的確に次の手順を教えられます。逆に「なんかうまくいきません」だけだと、情報が足りず回り道になります。
3つ目は、作業を一度に全部頼まず、段階を分けて頼むこと。たとえば最初に「Netlify Functions対応にしてください」と頼み、それが終わったら「GitHubへのpush手順を教えてください」と続ける。一度に全部やろうとすると、AIの回答も長くなりすぎて混乱しやすくなります。
たとえば公開手順を整理してもらいたいなら、こう頼みます。
初心者向けに、GitHub への push、Netlify import、環境変数設定、 BFH Developer Portal 側の Redirect URI 変更まで、順番に説明してください。 秘密情報の扱いも注意点として含めてください。
そして途中で止まったら、こうです。
よくわかりません。 いまこの画面で止まっています。 次に何を押せばいいかだけ教えてください。
（画面の文言をコピーして貼る）
初心者がハマりやすいポイントの整理
ここで、よくある落とし穴を整理しておきます。
まず、.envファイルをGitHubに上げてしまうこと。これは秘密の鍵を全世界に公開してしまうことになるので、必ず.gitignoreに入れてください。
次に、GitHubでリポジトリを作るときにREADMEを自動生成してしまうこと。これをやると最初のアップロードでつまずきます。空のリポジトリにしてください。
それから、Netlifyにファイルをドラッグ＆ドロップで公開しようとすること。ログイン機能があるアプリは、この方法では動きません。GitHub連携で読み込ませてください。
そして、BFH_REDIRECT_URIをlocalhost（自分のパソコン用の設定）のままにしてしまうこと。これでは本番でログインできません。
さらに、Netlify側は変えたのにBFH Developer Portal側を変え忘れること。両方を本番URLに合わせる必要があります。
最後に、わからないのに曖昧なまま先に進めてしまうこと。これも初心者がハマる大きな原因です。止まったら、AIに正直に状況を伝える。それでも解決しなければブレヒロ技術部で聞く。この順番です。
まとめ
ローカルで動いているブレヒロAPIゲームを公開するには、次の流れで進めます。Gitで管理を始める。GitHubにアップロードする。NetlifyにGitHubを連携させる。環境変数を設定する。ブレヒロのDeveloper Portal側の設定を本番URLに変える。再デプロイして動作を確認する。
一見やることが多く見えますが、1つ1つは単純な作業です。そして、この作業は自分一人で全部理解してやる必要はありません。AIに段階ごとに指示を出しながら進める。つまずいたら画面やエラーをそのまま貼って聞く。AIで解決しなければブレヒロ技術部で聞く。この3段構えで臨めば、公開まで十分到達できます。
ブレヒロAPIでゲームを作っている方にとって、公開までできるようになると世界が一気に広がります。自分のパソコンの中だけの実験から、「他の人にも遊んでもらえる作品」に変わるからです。ぜひ挑戦してみてください。
この記事で紹介している方法は、すべて無料の範囲で使えます。
GitHubは、公開リポジトリも非公開リポジトリも無料で作れます。個人利用であれば費用はかかりません。
Netlifyも無料プランがあり、クレジットカードの登録も不要です。ただし、現在のNetlifyの無料プランは「月300クレジット」という上限があります。この300クレジットの中に、サイトの公開処理、通信量、サーバー処理の実行回数などがすべて含まれています。個人が作ったゲームを少人数で遊ぶ程度であれば、この無料枠で十分収まります。
もし月の途中でクレジットを使い切ると、サイトが一時停止になります。ただし、無料プランの場合は上限を超えて勝手に課金されることはありません。「知らないうちにお金がかかっていた」ということは起きない設計です。翌月になればクレジットがリセットされて、また使えるようになります。
Git自体は無料のソフトウェアなので、これも費用はかかりません。
実際にこの手順で公開した作品がこちらです↓
https://frontier-relic-run.netlify.app/