How Docker dynamically inserts and uses variables in front-end projects

Preface

According to project requirements, when implementing the logout function, different logout URLs need to be called according to the test environment and the production environment. This article will introduce how to set variables in the Docker front-end image and how to use variables.

Solution

In the stage of generating front-end containers, you can use the same image and pass in parameters according to different environments to create different front-end containers. Below we will share an example of dynamically inserting and using variables during the container execution phase.

step

1. start.shCreate a file in the root directory with the following content:

#!/usr/bin/env sh

cat /etc/nginx/nginx.conf
nginx -g "daemon off;"

Note: #!/usr/bin/env shThis does not mean the comment, but the meaning of selecting the compiled language. It is recommended to use sh because bash may not be installed on every server.

Note: Why add it nginx -g "daemon off;"?
Because in order for the container to continue to run, there must be a foreground process. Here, nginx is converted into a foreground process.

2. Copy it in the Dockerfile start.sh, copying it from outside the container to inside the container:

...
COPY start.sh /app/start.sh

3. Create a file in the root directory nginx.conf.template. First nginx.confcopy the code from and then add ENV_VARSa placeholder under http -> server in the file. The code is as follows:

http {
    ...
    server {
        .....
        location /env.json {
            default_type application/json;
            return 200 '${ENV_VARS}';
        }
    }
}

4. Create a method to obtain variables on the server side of the project, the code is as follows:

type Env = {
    
    
  logoutUrl?: string;
};

export async function getEnvironmentVariables() {
    
    
  return request<Env>('/env.json', {
    
     method: 'GET' });
}

5. Add a method to use variables in the project code, the code is as follows:

const logout = () => {
    
    
    getEnvironmentVariables()
      .then((data) => {
    
    
        const logoutUrl = data?.logoutUrl;
        if (logoutUrl) {
    
    
         ...
        }
      })
      .catch((e) => {
    
    
        ...
      });
  };

6. After building the image normally, when generating the container, you can replace the string nginx.conf.templatein the original front-end file by passing parameters through environment variables ENV_VARS:

docker run -e ENV_VARS='{"logoutUrl": "xxxxxx"}' --name test -p 81:8000 -itd swr.test:v0.0.31

sh start.sh

Note: If the replaced environment variable is in JSON format, the variable value needs to be enclosed in single quotes, and the attribute value within the variable value needs to be enclosed in double quotes. For example:ENV_VARS='{"logoutUrl": "xxxxxx"}'

Afterword

This design enables the logout address to be decoupled through environment variables when the front-end is deployed in an independent container, avoiding the workload of building images again and again. I hope this article is helpful to you. If you have any questions, please leave a message below to communicate. If this article is helpful to you, please give me a like to support it.

I hope the above optimization suggestions are helpful to you! If you have any other questions or need further optimization, please feel free to let me know.