前端通过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就可以打开前端项目了。