某ゲームの図鑑作成備忘録 その3

前回までのあらすじ

• Node.js 側の準備（API用）
• GitHub リポジトリ作成と設定
• 要件定義のまとめ

今回の作業内容

RenderでのNode.js APIデプロイ手順をまとめました。
この手順通りにやれば、ローカルで作ったExpressのAPIをWeb上に公開できます。

RenderでNode.js APIをデプロイする手順

前提条件

• WindowsまたはMac環境（今回はWindows）
• Node.js（LTS版）インストール済み
• Git & GitHubアカウント
• VS Codeなどのエディタ

---

1. Renderにログイン

1. https://render.com にアクセス
2. 「Sign in with GitHub」をクリックしてログイン

---

2. Web Service作成

1. 「New → Web Service」をクリック
2. GitHubリポジトリ（monster-api）を選択
3. 設定入力

項目	内容
Name	monster-api（任意）
Region	Singapore（アジア最寄り）
Branch	main
Build Command	npm install
Start Command	node index.js

1. 「Create Web Service」をクリック
2. デプロイ完了後、URLが発行される
   例: https://example.com

---

3. 動作確認

ブラウザまたはPostmanでアクセス：

https://monster-api.onrender.com/monsters

[
  { "id": 1, "name": "ドラゴン" },
  { "id": 2, "name": "ゴブリン" }
]

• JSONが返れば成功！

---

4. 更新方法

ローカルで変更後：

git add .
git commit -m "update API"
git push

Renderが自動で再ビルド＆デプロイしてくれる。

5. 小ネタ：Render画面が真っ白になったとき

Renderの管理画面で「画面が真っ白で操作できない…」というときの対処法です。

1. シークレットモードで開く

   • Chrome: Ctrl+Shift+N
   • Firefox: Ctrl+Shift+P
     → 拡張機能やキャッシュの干渉を回避できます

2. ブラウザのキャッシュをクリア

   • Chrome: 「設定 → プライバシーとセキュリティ → 閲覧履歴データの削除」
   • 「キャッシュされた画像とファイル」を削除

3. 拡張機能を一時停止

   • AdBlock系やトラッキング防止拡張が原因のことがあります
   • chrome://extensions/ からOFFにして再読み込み

4. GitHub認証を再リンク

   • Render右上 → Account Settings → Connected Accounts
   • GitHubを一度切断して再接続

5. Renderステータス確認

   • まれにRender側の障害で画面がロードされない場合があります
   • https://status.render.com をチェック

💡 ほとんどの場合はシークレットモードで開くと直ります

---

⚠️ 注意

• このサンプルはダミーデータのみ使用
• 実際のAPIや個人情報は公開しないこと
• Render URLは教育・サンプル用に伏せています

次回の作業内容

Flutter環境の設定・最低限のUIの骨組みまでを作成