单独的 Vue 前端和 Express 后端的 NGINX 设置

Question

在将 vue 前端与 express 后端分开部署时，我想知道正确的 nginx 设置 - 不是在服务器或域方面分开，而是在服务方式方面。

在开发过程中，我在vue目录中使用npm serve，而要构建一个生产版本，它是通过npm run build生成的。应该提供生成的dist 文件夹，我的问题是当后端在同一台服务器上时如何完成。

假设对于后端，express 正在公开路由。 这里应该是nginx在express前面吗？ vue 前端正在调用这些路由，但需要提供静态文件。根据docs，这可以使用serve 来完成。这是用于生产的吗？再说一遍，nginx应该排在前面吗？

我想知道，因为路线会是：

浏览器请求 -> Nginx 到 Vue 前端 -> Vue 前端 -> Nginx 到 后端

这是一个合适的方法还是我误解了这个？

Answer 1

这里应该是nginx在express前面吗？

是的，这是个好主意。

您必须为 Vue 和 Express 使用一组不同的 URL，因此 Nginx 在查看请求 URL 时将能够理解要做什么：将 Vue 文件或代理提供给 Express。 Nginx 有多种分类传入请求的选项：通过不同的主机名、路径、两者的组合等。

例如，在所有 Express 路由前添加 /api/ 路径前缀。然后像这样配置nginx：

这不是生产就绪配置，我只是想提示您应该在 nginx 文档中寻找什么

server {
  listen 80;
  server_name mydomainname.com;

  location /api {
    proxy_pass http://localhost:8000;  # port that Express serves,
                                       # better change to UNIX domain socket
  }

  location / {
    root /vue_root/dist;
  }
}