前端通过nginx部署一个本地服务的方法

前端通过nginx部署一个本地服务的方法：

1.下载ngnix

nginx
下载完成后解压缩后运行nginx.exe文件

2.打包你的前端项目文件

yarn build 

把生成的dist文件复制出来，替换到nginx的html文件下

3.配置conf目录的nginx.conf文件

主要配置server监听

    server {listen       8088;server_name  localhost;location / {root  D:\\nginx-1.26.2\\nginx-1.26.2\\html;try_files $uri $uri/ @router;index  index.html index.htm;}location /api/ {proxy_pass http://localhost:1001/;  #匹配到/api/关键字可以转换到指定服务下proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 处理前端路由的 named locationlocation @router {# 这里通常指向你的前端入口文件，例如 index.html# 也可以在这里进行更复杂的反向代理设置rewrite ^/(.*)$ /index.html last;}location = /favicon.ico {log_not_found off;access_log off;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

root D:\nginx-1.26.2\nginx-1.26.2\html;配置静态文件的目录，
正常是单斜杠，如果报错就试试双斜杠
location /api/ 匹配到/api/关键字可以转换到指定后端服务下
try_files $uri $uri/ @router; location @router 是为了避免刷新报错

4.运行nginx服务

运行cmd 运行到nginx服务的目录下，运行服务

cd xxxx/nginx-1.26.2
nginx -t 
nginx -s reload //重新运行

以上配置完成后打开localhost:8088就可以打开前端项目了。