実装で学ぶフルスタックWeb開発での学び#1

経緯

「実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン」という書籍でdockerコンテナ上での環境構築と開発をしていました。
dockerに触れることが初めてということと、この本がWindows環境での実装を想定していたことから、Macでも学習できるように色々と工夫をしました。
その備忘録です。

Macでの環境構築で参考にした記事
Docker+NextJS+Django+PostgreSQLで環境構築してみる
モダンなWebアプリ(Django, Next.js, Docker, AWS)を開発する #環境構築編
実際に作成したMacでの開発環境のリポジトリ↓

Next.js上にAPIを用意する

P.129でAPIを作成する章でよく分からないリダイレクトに引っかかったので、その問題の内容と解決方法です。

問題

APIをNext.jsのサーバーサイド機能を使用して作成したのち、作成したapiを確認するためにhttp://localhost:3000/api/helloにアクセスしようとすると、http://host.docker.internal:8000/api/helloにリダイレクトされるというもの。

原因

P.90でnext.config.jsファイルを以下のように変更したこと。
frontend/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    async redirects() {
        return [
            {
                source: '/api/:path*',
                destination: 'http://host.docker.internal:8000/api/:path*',
                permanent: true,
            },
        ]
    }
}

module.exports = nextConfig

解決方法

以下のようにコメントアウトすることで、リダイレクトされないようになった。
frontend/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    // async redirects() {
    //     return [
    //         {
    //             source: '/api/:path*',
    //             destination: 'http://host.docker.internal:8000/api/:path*',
    //             permanent: true,
    //         },
    //     ]
    // }
}

module.exports = nextConfig

変更後

ブラウザのキャッシュを削除してから、Dockerの再起動する。

docker-compose down
docker-compose build
docker-compose up -d

解決後

以下のようにJSONが返却される。