こんにちは。フロントエンドリスキリングおじさんです。
前回の問題点を受けて、
フロントエンドとバックエンドの両方を同じポートでアクセスできるよう、環境構築します。
前提情報
実施時期
2023年3月
実行環境
Windows 11
やりたいこと
フロントエンド: 3000ポート
バックエンド： 8080ポート
でそれぞれ動いているが、
フロントエンド→バックエンドのAPIへのアクセスにおいて、
相対的にアクセスさせたい
×: "http://foo.bar.baz:8080/api/"
〇: "/api/"
実現方法
Nginxを先頭に立たせ、エンドポイントによってアクセスを3000ポートと8080ポートに転送する
Nginxの準備
Nginxのダウンロード
公式ページからダウンロードし、好きなところに解凍します。
執筆時点では、安定版の"nginx/Windows-1.22.1"を使いました。
nginx.confの編集
conf配下のnginx.confを編集します。
なお、デフォルトでコメントアウトされているところは省略しています。
http {
include mime.types;
default_type application/octet-stream;
server {
# Nginxがlocalhost:80でアクセスを受け付けます。
listen 80;
server_name localhost;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# "http://localhost/"配下のアクセスは3000番ポートに転送します。
location / {
proxy_pass http://localhost:3000/;
}
# "http://localhost/api/"配下のアクセスは8080番ポートに転送します。
location /api/ {
proxy_pass http://localhost:8080/api/;
}
}
}
これでNginxの設定は完了です。
フロントエンドの改修
前回のソースから、以下のように改修します。
~~~省略~~~
- const url = "http://localhost:8081/api/hello"; // バックエンドAPIのURL
+ const url = "/api/hello"; // 相対パスに変更
useEffect(() => {
axios.get(url).then((response) => {
setGreet(response.data); // APIのレスポンスをgreetに詰める
});
}, []); // 第二引数の配列に入れた変数が更新されるたび、第一引数の内容が再実行される。今回は再実行の必要は無いので空
~~~省略~~~
検証
各種アプリの起動
Nginxの起動
以下のコマンドでNginxを起動します。
cd <Nginxディレクトリ>
start nginx
なお、下記コマンドでNginxを停止できます。
cd <Nginxディレクトリ>
nginx -s stop
フロントエンド、バックエンドの起動
フロントとバックエンドも起動させておきます。
cd <フロントエンドのプロジェクトルート>
npm start
localhost:80へアクセスしてみる
Nginxが開放している80番ポートにアクセスしてみます。
バックエンドのAPIの結果が表示されました。
localhost:3000へアクセスしてみる
では、フロントのlocalhost:3000へアクセスするとどうなるでしょうか。
挨拶文は表示されず、ぐるぐるだけが表示されています。
ブラウザの開発者ツールで見てみると、
localhost:3000/api/helloにアクセスしようとして404が返ってきました。
"/api/hello"にアクセスできるのは、
- 80番ポート(Nginx)経由
- 8080番ポート(もともとのバックエンドサーバのポート)経由
そのどちらかのみだからですね。
まとめ
Webシステム制作を学ぶにあたり、
「フロントとバックそれぞれは作れたけど、どうやって連携するか？」は、
最初の壁だと思います。
「こんな感じで解決できるのか～」と感じていただければ幸いです。