首先我们需要明白一个前提, 前端打包出来的东西是 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, 写这种脚本简直不要太轻松.