nginx配置前后端分离项目------前端部署（解决跨域问题）

1、下载nginx

下载地址：http://nginx.org/en/download.html windos下载稳定版

2、将前段项目打包，执行命令：

npm run build

执行命令后在项目目录下会生成一个dist文件夹，将其拷贝到nginx的html目录下

3、配置nginx的配置文件

worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root G:/nginx-1.18.0/html/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/{ proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:8080/; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

还有一个需要注意的地方，在windos下拷贝路径为G:\nginx-1.18.0\conf路径分割符为反斜杠，而nginx的配置文件的路径分隔符为/斜杠，如果配置不当将会产生500错误

4、配置完成后，保存重启nginx：

nginx.exe -s reload

以上前段就配置完成。

本文没用配置后端，所以直接启动后端服务。

后，保存重启nginx：

nginx.exe -s reload

以上前段就配置完成。

本文没用配置后端，所以直接启动后端服务。

启动后端服务后便可直接访问：localhost。