More than 1 year has passed since last update.

Next.jsの開発環境整備（Next.js＋Nginx+CakePHP+PostgreSQL）

Last updated at 2024-02-29Posted at 2024-02-29

はじめに

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

今回の目的

前回、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;
    }
}