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/,与后端打包的文件路径无关;