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

Posted 2023-02-22

【中文标题】单独的 Vue 前端和 Express 后端的 NGINX 设置

【英文标题】：NGINX setup for separate Vue Frontend and Express Backend

【发布时间】：2019-03-11 19:37:41

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

一种完全适合使用 nginx 代理传递请求以从您的 vue 前端表达的方法。

【参考方案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;
  

【讨论】：

哦，这很有道理！因此，对于“/”的调用，vue 将被提供服务，并且 vue 与 express 所在的“/api”对话。非常感谢！