1. 下载nginx，解压；（随便放在哪里）

2. 在nginx-1.26.0文件夹下创建web文件夹，继续在web文件夹下创建abcd.test.cn文件夹（文件夹的名字就叫abcd.test.cn）；

3. 配置前端代理；（注意端口是90，与下文后端端口 和 nginx.conf中后端配置端口 呼应）

4. 通过 yarn build 或其它打包命令，打包前端项目，获得dist文件夹

5. 将dist文件夹中的东西复制，全部放在 abcd.test.cn文件夹中；

6. 配置后端项目端口90

7. 直接运行后端项目（也可以打包后端项目再通过 java -jar 运行）

8. 配置域名：C:\Windows\System32\drivers\etc下的hosts文件中添加127.0.0.1 abcd.test.cn

        （1）如果提示没有权限更改可以将该文件移动至桌面，改好了再放回去，移动时点击继续；

9. 配置 nginx.conf文件（该文件位于 \nginx-1.26.0\conf 下）；

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 abcd.test.cn;
        index index.php index.html index.htm default.php default.htm default.html;
        root D:\\nginx-1.26.0\\web\\abcd.test.cn;
    
        # 前端
        location / {
             alias /nginx-1.26.0/web/abcd.test.cn/;
             try_files $uri $uri/ /index.html;
             index index.html;
        }
    
        #后端
        location /openapi/ {
             proxy_pass http://127.0.0.1:90/openapi/ ;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Real-Port $remote_port;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    
        access_log  D:\\nginx-1.26.0\\web\\abcd.test.cn\\abcd.test.cn.log;
        error_log  D:\\nginx-1.26.0\\web\\abcd.test.cn\\abcd.test.cn.error.log;
    }
 
}

10. 在nginx-1.26.0文件夹下，通过 start nginx 启动nginx;（停止nginx命令为nginx -s stop）

11. 浏览器输入http:abcd.test.cn 即可访问项目;

其它：

（1）正向代理与反向代理理解

正向代理：你去取钱，工作人员把钱给你，工作人员对于你来说是正向代理；

反向代理：工作人员 对于 取钱的这些业务 来说是 反向代理； 

此例：你去找nginx访问项目，nginx通过配置的localhost去 前端/后端 将得到的再返回给你（所以nginx对于前后端项目来说是反向代理）（这里的前端/后端都有自己的端口，是不能和nginx端口一样的）

（2）关于此例

        a. 访问路径为协议：域名（或ip）：端口，在浏览器输入http:abcd.test.cn，相当于访问nginx，nginx的端口为上文写的listen 80，在http协议下：80端口可以省略不写（在https协议下：43端口可以省略不写）

        b. 域名不能写xx.xxx.cn格式，例如，我域名最开始写的是gf.test.cn，结果访问不了项目，改成abcd.test.cn就可以访问了（不排除是其它什么的原因导致写gf.test.cn访问不了）

（3）后端打包的文件，不用专门建一个openapi文件夹，再把打包出来的文件放进去，再通过java -jar 运行；打包好后，就直接在项目下通过java -jar 运行就可以了；

（4）上文后端配置中 location /openapi/ 中的 /openapi/ 指的是nginx接收到前端要调用的接口能匹配 /openapi/ 时，实际去后端调用http://127.0.0.1:90/openapi/，与后端打包的文件路径无关；