Docker環境でNext.jsのSSRの実装をしていたら途中ハマったので、解決策を備忘録として残しておきます。
こんな人には役に立つかもしれません。
- Dockerを使っており、フロントエンドとバックエンドでコンテナを分けている
- Next.jsでSSRまたはSSGを実装する
私の開発環境は以下の通り。
- フロントエンド：Next.js (v13.1.6)
- バックエンド：Python, Django REST framework(v3.13.1), PostgreSQL(v14)
フロントエンドとバックエンドでそれぞれDockerコンテナを設けて開発しており、バックエンドではNginxを導入しています。
事の経緯
途中までSSR等使うことなく開発を進めていましたが、追加機能の実装に伴い必要に迫られたのでトップページでSSRを実行しました。
フロントエンドはローカルホスト3000番, バックエンドはlocalhost8000番で開発を進めており、下記のようなコードを加えたところ...
export async function getServerSideProps(context:any) {
const { data } = await axios.get("http://localhost:8000/api/foo/");
return {
props: {
data: data
},
};
}
localhostにアクセスできなくなり、500エラーを返すようになってしまった。
そのときのエラーメッセージとしては下記のようなものです。
Connect ECONNREFUSED 127.0.0.1:8000
色々調べた感じ原因は2つあり、二段階で解決する必要がありそう。
原因と解決策1
ということでまず1段階目。
Docker環境下でSSRする場合はホスト側ではなくコンテナ側のポートを指定する必要がありそう...というわけでそのようにAPIのコール先を書き換える。
例えばバックエンドでnginxを使っているなら docker-compose.yml には下記のように記述されているんじゃないかと思います。
version: "3.9"
services:
app:
...(省略)
db:
...(省略)
nginx:
ports:
- 8000:80
...(省略)
このときnginxのservice名はnginx、ポート80でリッスンしているので、下記のようにします。
// Before
const { data } = await axios.get("http://localhost:8000/api/foo/");
// After
const { data } = await axios.get("http://nginx:80/api/foo/");
これで1つ目のエラーが解決できました。
ローカルホストにアクセスすると先のエラーメッセージは出なくなります。
が、今度は次のようなエラーが出ます。
Error: getaddrinfo ENOTFOUND nginx
