使用Nginx将前端和后端进行协作

1 年 ago

清, 扬

1 minute

你好，我是前端魔法师。
根据上次的问题，我将建立一个可以同时访问前端和后端的环境。

前提信息

实施时间

2023年3月 – 三月，2023年

执行环境

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的配置已经完成了。 (Nginx de .)

前端的修改

从之前的源代码开始，进行以下改进。

~~~省略~~~

- const url = "http://localhost:8081/api/hello"; // バックエンドAPIのURL
+ const url = "/api/hello"; // 相対パスに変更

  useEffect(() => {
    axios.get(url).then((response) => {
      setGreet(response.data); // APIのレスポンスをgreetに詰める
    });
  }, []); // 第二引数の配列に入れた変数が更新されるたび、第一引数の内容が再実行される。今回は再実行の必要は無いので空

~~~省略~~~

验证 (validate)

启动各种应用程序

Nginx的启动

运行以下命令启动Nginx。

cd <Nginxディレクトリ>
start nginx

另外，您可以使用以下命令停止Nginx。

cd <Nginxディレクトリ>
nginx -s stop

前端和后端的启动

我会同时启动前台和后台。

cd <フロントエンドのプロジェクトルート>
npm start

尝试访问 localhost 的 80 端口。

バックエンドのAPIの結果が表示されました。

试着访问 localhost:3000

如果访问前端的localhost:3000，会发生什么呢？

そのどちらかのみだからですね。

总结

学习Web系统开发时，我认为最初遇到的难题是”前端和后端如何协作”，虽然我可以分别开发它们，但是如何实现它们的联动是困难的。如果你能对”如何解决这种问题”有所感悟，我会非常高兴。