Can a static page read environment variable?

Question

Can a static page read environment variable?

212 views Asked by Fluke At 13 March 2023 at 01:10

Currently I have a nginx server running in a container and want to display a static page when someone access https://example.com/showname/. The static page need to show the pod name get from the environment variable, is there a way to do this?

my env var name:deployment_env and below is static page code

<html>
    <head>
        <title>Test NGINX passed</title>
    </head>
    <body>
        <h1>deploy_env</h1>
        <h1><span id="deploy_env" style="display: block;"></span></h1>
        <script>
            var env = window.env;
            var deploy = document.querySelector('#deploy_env');
            deploy.textContent = env.deployment_env;
        </script>
    </body>
</html>

Original Q&A

There are 1 answers

**user11784** · Answer 1 · 2024-01-23T21:52:46+00:00

If you are using the official nginx docker image, there is an easy way since the image contains envsubst functionality for quite some time now.

Here is the solution as you wished. It uses the envsubst feature to replace the environment variable in a file called env.js.template. It will be substituted and written into the html folder when nginx starts.

showname.html

<html>
    <head>
        <title>Test NGINX passed</title>
        <script src="/env.js"></script>
    </head>
    <body>
        <h1>deploy_env</h1>
        <h1><span id="deploy_env" style="display: block;"></span></h1>
        <script>
            var env = window.env;
            var deploy = document.querySelector('#deploy_env');
            deploy.textContent = env.deployment_env;
        </script>
    </body>
</html>

env.js.template

window.env = {
  "deployment_env": "${deployment_env}"
}

Dockerfile

FROM nginx:1

ENV NGINX_ENVSUBST_TEMPLATE_DIR=/usr/share/nginx/templates \
    NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html

COPY env.js.template /usr/share/nginx/templates/
COPY showname.html /usr/share/nginx/html/showname/index.html

docker-compose.yml

services:
  app:
    build: .
    environment:
      deployment_env: production
    ports:
      - 8000:80/tcp

In your case, you could have it even simpler by leaving out javascript altogether and making the html page itself an nginx template:

showname.html.template

<html>
    <head>
        <title>Test NGINX passed</title>
    </head>
    <body>
        <h1>deploy_env</h1>
        <h1><span id="deploy_env" style="display: block;">${deployment_env}</span></h1>
    </body>
</html>

Dockerfile

FROM nginx:1

ENV NGINX_ENVSUBST_TEMPLATE_DIR=/usr/share/nginx/templates \
    NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html

COPY showname.html.template /usr/share/nginx/templates/showname/index.html.template

I admit that this functionality in the image was supposed to be used for configuration files only. If you want a cleaner solution, you might want to adjust the docker entrypoint to add a different envsubst usage.

TechQA.

Can a static page read environment variable?

There are 1 answers

Related Questions in HTML

Related Questions in NGINX

Related Questions in STATIC-PAGES

Popular Questions

Popular Tags

Trending Questions