赞
踩
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/,与后端打包的文件路径无关;
(5)运行start nginx 后,若需要更换前端打包文件,可直接更换,不需要重启nginx;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。