首先我们需要明白一个前提, 前端打包出来的东西是 html, css, js, 字体, 图片……
他是没有能力访问服务器的环境变量的. 所以如果要动态使用环境变量, 我大概想了一想, 有3种方式.
- nginx 插件有能力访问环境变量
- node 环境
- shell
第一种办法思来想去太麻烦了, 首先Nginx配置一直是让我脑壳疼的东西. 还有就是有些链接和配置是没有转发的, 现在又需要转发太麻烦了.
第二种被否了, 因为如果包含node环境, 包太大, 而且启动的时候build 太慢.
所以我选择了第三种
1
2
3
4
5
6
7
8
|
COPY update.env.sh /usr/share/nginx/update.env.sh
RUN chmod +x /usr/share/nginx/update.env.sh
CMD ["/bin/bash", "-c", "/usr/share/nginx/update.env.sh && nginx -g 'daemon off;'"]
|
然后 shell 脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| #!/bin/bash
sed -i "s|proxy_pass http://.*:.*;|proxy_pass "$VUE_APP_MODEL_BASE_URL"/;|g" /etc/nginx/conf.d/default.conf
# 找包含指定内容的文件
file_path=$(grep -rl 'location.protocol.indexOf("s")<0?' /usr/share/nginx/html)
# 检查是否找到一个文件
if [ -z "$file_path" ]; then
echo "未找到符合条件的文件。"
exit 1
fi
# 检查是否找到多个文件
file_count=$(echo "$file_path" | wc -l)
if [ "$file_count" -gt 1 ]; then
echo "找到多个符合条件的文件，请检查。"
exit 1
fi
# 替换文件内容
sed -i 's|Nr=window.location.protocol.indexOf("s")<0?"[^"]*":"[^"]*"|Nr=window.location.protocol.indexOf("s")<0?"'$VUE_APP_NOVNC_BASE_URL'":"'$VUE_APP_NOVNC_BASE_URLS'"|' "$file_path"
echo "替换完成。"
|
解决问题.
这个方法本来也很麻烦的, 得益于 chatgpt, 写这种脚本简直不要太轻松.
