使用nginx本地部署项目

前提，下载配置nginx（需配置path环境变量）

1.把自己写的项目打包，如 yarn build

2.在nginx-1.20.2 文件夹下创建 h5 文件夹

3.将打包出来的文件，放入新创建的文件夹中

4.配置 nginx-1.20.2下的 conf文件夹下的 nginx.conf文件,（注：（1）root可提出至server外，http内.（2）多个项目可一起部署配置）

worker_processes  2; 

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 /Users/admin/Desktop/nginx-1.20.2/h5/;
        }
         
        # 项目的访问路径(与写的项目相对应)，如：/a2或/axx都可以访问（访问路径唯一可写 .*a2 ）
        location ~* .*a[2,xx] {
                   # 打包文件所放地(新创建文件夹所在地)
            alias /Users/admin/Desktop/nginx-1.20.2/h5/;
            try_files $uri $uri/ /index.html;
            index index.html;
        }
    }

}

5.启动nginx，如：

C:\Users\admin\Desktop\nginx-1.20.2>start nginx

6.访问项目,如

补充：

1. 如果项目有基础路径，如：vite.config.js base:'/abc'

则（1） nginx.conf 配置

   location ~* .*abc/[100,200,xxx] {
            alias /Users/admin/Desktop/nginx-1.20.2/h5/abc/;
            try_files $uri $uri/ /abc/index.html;
            index index.html;
        }

（2）打包文件路径 xxxx\nginx-1.20.2\h5\abc

2. 如果想修改访问域名，则

（1）在例如C:\Windows\System32\drivers\etc打开hosts文件，配置 127.0.0.1 自定义域名，

如：127.0.0.1 wwc.jg.cn

（2）nginx.conf 配置 server_name 自定义域名;如：server_name wwc.jg.cn;

多个域名使用空格隔开，如：server_name wwc.jg.cn sd.cs.com

3. 如果有接口请求跨域，如需使用 https://xxx.xxx.cn/api/xxx 接口请求，则：

nginx.config配置

        location /api { # 这里设的是location /api/，根据需要灵活修改
            proxy_pass https://xxx.xxx.cn/api/; # 接口请求路径
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS'; # 根据需要灵活修改HTTP请求方法
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }

额外信息：

如果找不到https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js

有可能是开了Clash for Windows 的代理 System Proxy

需关掉

使用nginx本地部署项目

猜你喜欢