Normally speaking, we use docker build Nodejs container, the code will have preset parameters, environment variables as the various environments, such as URL database, etc.
But as a front-end applications react, the compiled code, the code generated using Nginx proxy running in a browser, it is noted that in no environment variable browser in this thing, so the original environment variables in the background Nodejs server solutions , the front end projects unavailable React
In fact, process does not exist in a browser environment, it is specific to Nodejs in the conversion process, webpack process will be used to replace all of the content that appears process.env given string value, which shows the front end React project you want to get parameters can only be configured during docker build.
To find a solution, when we start the container, it can be injected into a particular time environment variables, then we can read the environment variables from inside the container. We can write it to a file, which can provide service by the Nginx (React or application), it uses the <script> tag introduced into index.html
So at that moment, we can run a bash script that creates a JavaScript file, the environment variable will be designated as the global Window corresponding attributes, will inject it into your browser to facilitate our applications available in the global
Create a project and create the content of the file .env
# Generate React App create-react-app react-nginx-variable cd react-nginx-variable # Create default environment variables that we want to use touch .env echo "API_URL=https//default.dev.api.com" >> .env
Create a script env.sh
#!/bin/bash # Recreate config file rm -rf ./env-config.js touch ./env-config.js # Add assignment echo "window._env_ = {" >> ./env-config.js # Read each line in .env file # Each line represents key=value pairs while read -r line || [[ -n "$line" ]]; do # Split env variables by character `=` if printf '%s\n' "$line" | grep -q -e '='; then varname=$(printf '%s\n' "$line" | sed -e 's/=.*//') varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//') fi # Read value of current variable if exists as Environment variable value=$(printf '%s\n' "${!varname}") # Otherwise use value from .env file [[ -z $value ]] && value=${varvalue} # Append configuration property to JS file echo " $varname: \"$value\"," >> ./env-config.js done < .env echo "}" >> ./env-config.js
Process flow
(1) delete the old file and create a new file.
(2) write JS code, text and open the object allocated to the global window object.
(3) reads each line and .env file into key / value pairs.
(4) Find the environment variable, if set, its value is used, otherwise, the default value .env file.
(5) attach it to the object we assign to the global window object
(6) shut down the text objects
Then we add the following script in index.html in the <head>
<script src="%PUBLIC_URL%/env-config.js"></script>
And write a line of code in the code App.js in Home
<p>API_URL: {window._env_.API_URL}</p>
Then react in the project package.json
"scripts": { "dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start", "test": "react-scripts test", "eject": "react-scripts eject", "build": "react-scripts build'" },
You can then use yarn dev to run the project in the machine, you should see on the screen has been successfully acquired .env variables in the file
Of course, we can also modify the contents of the file .env React project in order to see the results in the local run
But as to when SIT / UAT / PROD environment, the use of docker-compose run the project
version: "3.2" services: web: Image: baking / workbench: 20190627.2 ports: - "5000:80" environment: - " API_URL = weschen.production.example.com "
Display pages, that is weschen.production.example.com