独立域名项目改造为单域名项目

一起因
公司项目要给客户独立部署，原来的项目的域名为：

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

改成为

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

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

二路由改动
vue路由增加base，react路由增加basename

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。

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: 环境部署还是得看公司整体的解决方案才行。

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/

上次更新：2024-10-10 17:42:49

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