1 Introduction
In the last week’s work, there was a need to pass in different values in different environments (dev, test, beta, release). First of all, the business was the primary goal. Therefore, the initial approach of the blogger was to judge the difference The hostname to pass in different values is simple and quick, but there are two shortcomings:
1) The code needs to be modified when the hostname is changed. When multiple services have this requirement, the workload will come out
2) Service No decoupling, manual adjustment is required
3) It is slightly low, and the code looks very uncomfortable.
Therefore, the blogger decided to make optimization and improvement today. By obtaining the environment variables of docker to obtain the current operating environment, once and for all, the blogger below Vue used in the minimal example is also applicable to React Angular JQ
Because the principle needs to be better explained after the project is completed, the blogger will first explain the implementation process. There may be many things that you don't understand. Therefore, after the implementation is completed, the blogger will explain one by one.
2 Minimal complete implementation
2.1 Create a minimal vue project
Since it is the smallest and fastest, so you can directly use vue scaffolding to pull a project
mkdir Get_Docker_ENV
# 创建Get_Docker_ENV文件夹
cd Get_Docker_ENV
# 进入Get_Docker_ENV文件夹
vue create vue_app
# 利用vue脚手架创建vue_app项目
Wait for the scaffolding to automatically pull the project, and the pull is complete.
The completed project directory is as follows. Add the following code to main.js. The specific reason for adding these codes will be explained in detail by the blogger after the project is completed.
const ENV_NOW = document.querySelector("html").getAttribute("env_now");
// 获取html标签的env_now属性值
if (ENV_NOW) {
Vue.prototype.$ENV_NOW = `${
ENV_NOW}`;
// 将$ENV_NOW设置为vue全局变量
}
Add the following code to export default in app.vue
created() {
console.log(this.$ENV_NOW);
}
// 打印出 this.$ENV_NOW ，主要是为测试能否获取到这个变量
Package and build the project after modification
yarn run build
# 构建项目
A dist file will be generated at this time, which is the file after the project is built
2.2 Use dockerfile to build images and run containers
In the current directory
vim dockerfile
# 创建并打开dockerfile
Edit the dockerfile file at this time
FROM nginx
# 以nginx为基础镜像
COPY ./vue_app/dist/ /usr/share/nginx/html/
# 复制 ./vue_app/dist/ 到 /usr/share/nginx/html/
# /usr/share/nginx/html/为 nginx 默认的启动文件夹
CMD ["/bin/bash", "-c", "sed -i \"s@<html@<html env_now=\"$ENV\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]
# 启动命令
# "sed -i \"s@<html@<html env_now=\"$ENV\"@\" /usr/share/nginx/html/index.html;"
# 这行代码是指将/usr/share/nginx/html/index.html中的<html 替换成 <html env_now=\"$ENV\"
# 也就是说，当docker run 时，index.html中的html标签就添加了这样一个属性
When running, just pass the variable ENV in docker run
2.3 Create image and run container
Docker build -t nginx_vue .
docker build -t nginx_vue .
# 根据dockerfile来创建nginx_vue镜像
docker run -p 6090:80 -e ENV=’now_env’ -d -t nginx_vue
# 以nginx_vue为镜像运行容器并传入环境变量ENV=’now_env’
2.4 Run test
At this point, you can visit localhost:6090 locally to see the running project, and you can see the now_env printed out in the console, that is, the project has got this variable;
at the same time, check Elements and you will see that at this time Such an attribute is dynamically added to html.
3 Detailed
In fact, I believe that seeing this, most of the students have already understood the process of practice, the blogger will sort out here,
(1) The final implementation is to add an attribute to the html tag of the constructed index.html, and dynamically give This attribute is passed by value to obtain the environment variable of docker
(2) Get this value in html in advance and copy it to the vue global, so that you can get it in the vue project
Therefore, this implementation is not limited to the framework, Vue React Angular can be used.
4 summary
The blogger actually tested it after the implementation, and there was no problem at all. However, the blogger has been thinking about it at night. Although this is much better than judging hotsname, it completely solves the defects caused by hostname. However, the html is modified to obtain the attribute value of html. , There is always a not very formal look, if you can dynamically transfer a variable directly to the project, that would be great, but this method has not been achieved by the blogger. The main reasons are as follows:
(1) The docker image is the project already It is built, which means that the project is already built at this time, and it is difficult to pass values dynamically
As it is written, the blogger seems to have an idea, that is, not to build the project, and then start the project construction and pass the value when the mirror is built. Try this first, and then record new progress