下边举了三个前后端分离项目的事例,配置都差不多linux服务器端口开放,只不过我想写详尽一些给大家看,由于我配置第一个项目的时侯还好,并且配置第二个项目遇见了一些问题。所以多写几个反例,便捷你们看的明白一些。
更改vue项目中config下的index.js配置文件,加上代理
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //代理标识
target: 'http://localhost:8888',
changeOrigin: true, // 允许跨域
secure: false,
pathRewrite: {
'^.api': '/'
}
},
'/apis': { //代理标识
target: 'http://localhost:8889',
changeOrigin: true, // 允许跨域
secure: false,
pathRewrite: {
'^.apis': '/'
}
},
'/apiss': { //代理标识
target: 'http://localhost:8887',
changeOrigin: true, // 允许跨域
secure: false,
pathRewrite: {
'^.apiss': '/'
}
},
}
打开Linux上的安装的nginx下的目录,对nginx.conf文件进行更改
在server443上面进行更改
server {
listen 443 ssl;
server_name www.upahead.cn;
root /www/wwwroot/upahead.cn;#前端文件存放地址(官网 前端文件存放地址)
index index.html index.htm;
ssl_certificate cert/cert_file_name.pem;
ssl_certificate_key cert/cert_file_name.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / { # 前端项目一
index index.html index.htm;
}
location /manager{ # 前端项目二
alias /www/wwwroot/upahead.cn/manager/;#(Xxx 管理系统 前端文件存放地址)
try_files $uri $uri/ /manager/index.html;
index index.html index.htm;
}
location /farm{ # 前端项目三
alias /www/wwwroot/upahead.cn/farm/;#(Xxx 智慧农场 前端文件存放地址)
try_files $uri $uri/ /farm/index.html;
index index.html index.htm;
}
# https跨域配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
location /api { # 后端项目一
rewrite ^/api/?(.*)$ /$1 break;
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_pass http://xx.xx.xx.xx:8888/; # 转发地址
}
location /apis { # 后端项目二
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xx.xx.xx.xx:8889/; # 转发地址
}
location /apiss { # 后端项目三
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://xx.xx.xx.xx:8887/; # 转发地址
}
}
问题二:端口开放问题
假如访问项目不报跨域问题了,而是报504,这么通常情况下就是没有开放端口。
放行443端口、以及前端项目的端标语
1.由于我用的是阿里云服务器,所以步入阿里云,开放安全组规则linux服务器端口开放,
我一共有三个项目,那就把三个项目的端口都开放了
2.或则在“宝塔面板”上放行端口
问题三:查看前端代码是否报错或未启动
还有些前两个都配置了,并且后端难以访问前端,那就先瞧瞧:
1.项目是否正常启动,查看进程命令
lsof-i:8888(这儿的8888是你前端项目的端标语);
1.若果是SpringBoot项目,这么可以尝试修改SpringBoot的版本,回退一个版本试试
2.瞧瞧包是否导出完整
3.瞧瞧端标语是否被占用造成难以启动
2.项目是否报错了,查看日志命令,依据错误找对应的解决方法
tail-fnohup.out
tail-100fnohup.out
tips1:这是我自己写项目遇见的一部份问题,你们的问题不可能全部都一样,所以我发出来给你们借鉴一下。也有可能这就是大家遇见的问题linux安装,那我这篇文章就发挥了它的好处了。
tips2:这种配置都是我自己早已使用过的,我的好多个项目都用的这个配置adobe air linux,所以没哪些问题,你们可以瞧瞧!
tips3:也可以把问题抛到评论区,我瞧瞧之前有没有碰到过类似的问题,可以帮你们解答一下的(我几乎每天都在的)。