本次部署使用Tomcat运行Java服务,docker安装nginx运行vue项目的方式。
过程中碰到一些坑,简单记录一下。
贴一张nginx.conf中server的配置,80端口又占用,所以改为88。以后可能会部署多个项目,所以用路径区分项目的方式放置文件。用反向代理指定服务端地址。
server {
listen 88;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /tt/ {
root /usr/share/nginx/html/; #这里写vue项目打包好的dist文件的地址
index index.html index.htm;
}
location /yygsgxc/ {
root /usr/share/nginx/html/; #这里写vue项目打包好的dist文件的地址
try_files $uri $uri/ @router; #刷新页面配置
index index.html index.htm;
}
location @router {
rewrite ^.*$ /yygsgxc/index.html;
}
location /yygsgxcprod-api/ {
proxy_redirect off;
proxy_pass_header Server;
proxy_set_header X-Scheme $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://10.204.170.210:9080/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
页面指向
root指令 设置了 静态根目录 为 html。
index指令 设置了 目录的默认文件 为 index.html。
try_files指令 设置了 文件查找规则 为 $uri $uri/ /index.html。即3个规则,先从 $uri 查找,再从 $uri/ 目录中查找,最后查找 /index.html。
反向代理
(1)
$http_host
:代理服务器本身IP。(2)
$remote_addr
:前一节点的IP,并不一定是用户的真实IP。(3)
$proxy_host
:代理服务器请求的host,即后端服务器/源站的IP,后端服务器有可能还是代理服务器。(4)
$proxy_port
:代理服务器请求的后端服务器的端口。(5)
$http_x_real_ip
:获取的是前一节点的X-Real-IP的值。(6)
$proxy_add_x_forwarded_for
:获取的是前一节点的X-Forwarded-For的值。(7)proxy_redirect off; 关闭重定向
(8)proxy_pass http://10.204.170.210:9080/; docker内部的localhost和外部的不一样,所以指向服务端直接用ip不能用localhost
router.js
export default new Router({
mode: 'history', // 去掉url中的#
base: '/yygsgxc/',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
base
类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"
vue.config.js
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/yygsgxc/" : "/",
.env.production
# 前端请求路径/生产环境
VUE_APP_BASE_API = '/yygsgxcprod-api'
如果代码中有 location.href 需要根据文件名进行调整,否则会失败例如
location.href = '/index'; =》 location.href = '/yygsgxc/index';