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

chen_sir_sh2024-11-05 12:42

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

1.下载ngnix

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

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

javascript 复制代码

yarn build

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

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

主要配置server监听

javascript 复制代码

    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 location
        location @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服务的目录下，运行服务

javascript 复制代码

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

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