はじめに

初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。

今回の目的

前回、Web＋API+DBの環境を構築しました。

今回は、ビルドしたNext.jsが動く環境をつかって、ローカル環境の開発を即時反映（ホットリロード）させられるようにします。

使用したものや事前準備

・Macbook Pro
・Visual Studio Code

主に参考にさせていただいた記事

実際にやってみた

単純でした。ローカルでNext.jsを立ち上げれば、特に修正もなくいけるはず。
API呼び出しはginxなのでそこで捌いてくれるでしょう。（フラグ）

起動します。
コンテナ起動

docker compose up

ローカルのNext.js起動

cd web
npm run dev

動いている確認します。

CORSエラーを返されました。同一オリジンポリシーに引っかかったようです。

ベストプラクティスがあるかと思いますが、上記の記事を参考にNginxのconfファイルにヘッダー設定を追加します。

       add_header Access-Control-Allow-Origin *;

server {
    listen       80;
    server_name  localhost;

    location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    }

    location /Hello {
       root /var/www/src/webroot/index.php;
       add_header Access-Control-Allow-Origin *;
       fastcgi_param HTTP_PROXY "";
       fastcgi_pass api:9000;
       include fastcgi_params;
    }
}

再起動して確認しましょう。
Next.jsからAPI呼び出しができていることも確認できました。

ソース＆データの即時反映確認

実際に修正して変更がかかるか確認します。

Next.js

問題なく、「World」から「のっぽ」になりました
変更前

変更後

PostgreSQL

データが変更されても表示が変更されるか確認しました。
問題なさそうです。

CakePHP

APIも変更したら更新がかかるか確認します。
返還するデータ内容をresultsからmassageに変更します。

問題なく更新がかかりました。

最後に

同一オリジンポリシー問題にぶち当たる日が来るとは思ってもいませんでした。
いい勉強になりました。まだわからないところがあるのでNginxの勉強でまとめてやりたい。
あとは、思ったよりもDB、APIも素直に更新が反映されてよかったです。