nginx配置前后端分离项目---前端部署

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。