一 起因

公司项目要给客户独立部署,原来的项目的域名为:

1
2
a.xxx.com/
b.xxx.com/

改成为

1
2
xxx.com/a/
xxx.com/b/

总结一下更改的过程及内容

二 路由改动

vue路由增加base,react路由增加basename

1
2
3
4
5
6
7
8
new Router({
mode: 'history',
saveScrollPosition: true,
scrollBehavior: () => ({
y: 0
}),
base: window.env.staticPath,
})

1
2
3
export const globalHistory = createBrowserHistory({
basename: window.env.staticPath
})

三 打包路径改动

vue的话,看cli的版本,但是变化不大,基本上都是publicPath,react的话,如果是create-react-app就是homepage,其余的框架本身也是类似publicPath。

1
2
3
4
5
output: {
path: webpackConfigBase.resolve('dist'),
publicPath: '/__PUBLIC_PATH_PLACEHOLDER__/',
filename: 'static/js/[name].[chunkhash:8].js'
},

1
"homepage": "/__PUBLIC_PATH_PLACEHOLDER__",

四 多环境部署问题

上面代码中,其实我们使用了大量的变量或者标识,因为我们一个项目会部署到很多环境上面,最开始的想法是在package.json中新建很多script命令,去一一执行,但是太多了,而且你还得每次改Jenkins的打包命令,索性的是每次独立部署每个项目都要重新配置对应的docker-compose.yml文件,那么就想到了,通过docker配置去保存当前环境、打包、目录路径等内容,然后通过shell脚本去替换变量就好了。
ps: 环境部署还是得看公司整体的解决方案才行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
run.sh 文件

sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/*.html
sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/static/css/*.css
sed -i "s|/__PUBLIC_PATH_PLACEHOLDER__|$BOOT_PUBLIC_PATH|g" /usr/share/nginx/html/static/js/*.js

exec nginx -g 'daemon off;'

在Dockerfile中 执行上面的脚本

CMD ["run.sh"]

最后在docker-compose.yml文件中,更改对应的路径及配置

environment:
- NGINX_PORT=10021
- XST_DOMAIN=
- TZ=Asia/Shanghai
- BOOT_PUBLIC_PATH=https://xxx.com/

如果觉得我的文章对您有用,请随意打赏。

Alipay
感谢您的阅读,本文由 李经纶 版权所有。如若转载,请注明出处:李经纶个人博客(https://lijinglun.com/2023/05/15/独立域名项目改造为单域名项目/