はじめに
この記事は「自分だけにちょうどいいレシート家計簿アプリを作ってみよう」と走り出したひよっ子プログラマーが、時間的に追い込まれAIに言われるがまま脳死で動いた結果直面したエラーを記録として残すものです。
今回はバックエンドのデプロイ先であるRailwayを初めて触った際に直面した502 Bad Gatewayエラーについて書いていきます。
ちゃんと理解を深めたうえで歩みを進められている方々にとっては「何故そこで躓くの…？」というレベルの内容になるかと思います。
それでもアウトプットすることで自分の中に落とし込むために（そして毎月の記事作成を達成させるためにも）恥を晒していきます。
誤り等ございましたらぜひご指摘いただければ嬉しいです、どうぞよろしくお願いいたします！
Railwayとは
Qiitaを読む方はご存知かと思いますが、自分の理解整理のためにも少し説明させていただきます。
RailwayはWebアプリやAPIなどを簡単にクラウドにデプロイ（公開）できるサービスです。
PostgreSQL、MySQLなどのデータベースを数クリックで追加もできるようです。その際ローカルで環境を作る必要はありません。
APIキーなどの秘密情報もGUIで管理できます。
Vercelなどはフロントエンドのデプロイ特化ですが、Railwayはバックエンドも含めて全て対応してくれます。
無料枠もあるので、ちょっと試したいなってものがある方にはとてもお勧めできるサービスです。
ただし今回の個人開発では以下のような技術で進めていくため、Railwayはバックエンドのデプロイ先（サーバーの置き場所） として利用予定です。
レシート家計簿アプリの技術選定（予定）
フロントエンド：Expo（React Native）
バックエンド：Express（Node.js）
DB：Firebase Firestore
インフラ：Railway
データの流れイメージ図
502 Bad Gateway の原因
結論、エラーの原因はPORT設定の不整合 でした。
エラー発生までの流れ
1. Railwayへのデプロイ
Railway CLIを使用してプロジェクトをデプロイ：
cd プロジェクトのbackend
railway login
railway init
railway up
デプロイ自体は成功し、ビルドも正常に完了しました。
2. ドメイン生成
Railwayのダッシュボードで公開URLを生成する際、ポート番号の入力を求められました。
コードを確認すると：
const PORT = process.env.PORT || 3000;
デフォルト値が3000だったので、3000を入力してドメインを生成します。
3. 502 Bad Gatewayエラー発生
生成されたURL（https://your-railway-app-url.up.railway.app/）にアクセスすると：
502 Bad Gateway
Application failed to respond
言われた通りに設定したのにサーバー側の設定エラー！？ と焦ります。
しかし、ログを見ただけで原因は判明しました：
Server is running on port 8080
ポート番号が違う！！！
解決方法: ドメインのポート設定を修正
- Railwayダッシュボード → Settings → Public Networking
- ドメイン設定の編集
- ポートを3000から8080に変更
- 保存
これで正常にアクセスできるようになりました！
{"message": "Receipt App API is running!"}
ちなみに、この502 Bad Gatewayエラーが発生した時に並走してくれていたAIはClaudeです。
エラー改善のために質問するとVariables タブで環境変数を追加 という指示が出ました。
おそらくこの方法でも改善はするんでしょうが、ドメイン生成時のポート番号指定をRailway側に合わせる方がいいのでは？と思いダッシュボードから変更すると改善したので、今回は環境変数の追加はしていません。
調べていくと、RailwayにはMagicPorts機能というものがあり自動的にポート番号を割り振る（多くの場合は 8080） ということが判明。
まとめ
今回の「502 Bad Gateway」エラーは、単純にポート設定の不整合 が原因でした。
実際に手を動かしてみて、Railwayの仕組みについて少し理解が深まった気がします。
- Railwayは Magic Ports 機能によって、自動的にポート番号を割り振る（多くの場合は
8080） - ローカルでは問題ないが、本番サーバー側を
3000に固定するのは仕組みに逆らうアンチパターン（好ましくない設計方法） - 本番環境では必ず
process.env.PORTを参照してポート番号を設定することが大事
直感的に「Railwayの設定を8080に合わせる」選択をしたことで、結果的にベストプラクティスにたどり着けました。
今月中にOCR機能の実装までやって、来月は実装に関する技術記事が出せたらいいな、と思っています。
（いけるかなぁ…）