create docker image and document instructions

Author: axelhzf

.dockerignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

.env

@@ -0,0 +1 @@
+REACT_APP_ENV={}

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# IDE
+*.idea
+
 # dependencies
 /node_modules
 /.pnp

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:11.6.0-alpine as base
+
+USER node
+WORKDIR /home/node
+
+COPY package.json yarn.lock ./
+RUN yarn
+
+COPY public public
+COPY src src
+RUN yarn build
+
+FROM nginx:1.15.2-alpine as release
+RUN apk add --no-cache jq
+
+COPY --from=base /home/node/build /var/www
+COPY nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80
+
+COPY docker-entrypoint.sh /
+ENTRYPOINT ["/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,68 +1,41 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# create-react-app-docker-environment-variables
 
-## Available Scripts
+`create-react-app` has a whole [section](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables) about how to work with environment variables. The used approach is to replace the environment variables at build time. So the generated assets (.js, .html) already have the variables replaced.
 
-In the project directory, you can run:
+The problem with this approach is that you need to rebuild the whole application every time you want to assign a different value to a variable. 
 
-### `npm start`
+This is an example of how to use environment variables at **runtime** assuming that you are using docker to deploy your application. The main benefit of this approach is that you are going to be able to use the same image in multiple environments.
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### Try it
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+Build the docker image 
 
-### `npm test`
+```
+docker build --tag cra-docker-env .
+```
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Run the image passing some environment variables prefixed with `REACT_APP_`
 
-### `npm run build`
+```
+docker run \
+    -e REACT_APP_API='http://api.com' \
+    -e REACT_APP_TOKEN='123' \
+    -p8080:80 \
+    cra-docker-env  
+```
 
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Every environment variable prefixed with `REACT_APP_` will be available in `window.ENV`.
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+Open `http://localhost:8000`. You will see the list of you environment variables.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+### How does this works?
 
-### `npm run eject`
+The `index.html` contains the code the initialize the `window.ENV` variable
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+```html
+<script>
+  var ENV = %REACT_APP_ENV%;
+</script>
+```
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+The `%REACT_APP_ENV%` will be replaced at runtime by the `docker-entrypoint.sh` file.

docker-entrypoint.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+set -eu
+
+ENV_JSON=$(env | grep '^REACT_APP_*' | jq -c '. | split("\n") | map(select(. != "")) | map(split("=") | { (.[0]) : .[1] }) | reduce .[] as $item ({}; . * $item)' -R -s)
+ESCAPED_ENV_JSON=$(echo $ENV_JSON | sed 's/\"/\\\"/g' | sed 's/\//\\\//g' | tr -d '\n' | tr -d '[[:blank:]]')
+sed -i 's/%REACT_APP_ENV%/'"$ESCAPED_ENV_JSON"'/g' /var/www/index.html
+
+exec "$@"

nginx.conf

@@ -0,0 +1,58 @@
+# auto detects a good number of processes to run
+worker_processes auto;
+
+#Provides the configuration file context in which the directives that affect connection processing are specified.
+events {
+    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
+    worker_connections 8000;
+    # Tells the worker to accept multiple connections at a time
+    multi_accept on;
+}
+
+
+http {
+    # what times to include
+    include       /etc/nginx/mime.types;
+    # what is the default one
+    default_type  application/octet-stream;
+
+    # Sets the path, format, and configuration for a buffered log write
+    log_format compression '$remote_addr - $remote_user [$time_local] '
+        '"$request" $status $upstream_addr '
+        '"$http_referer" "$http_user_agent"';
+
+    server {
+        # listen on port 80
+        listen 80;
+        # save logs here
+        access_log /var/log/nginx/access.log compression;
+
+        # where the root here
+        root /var/www;
+        # what file to server as index
+        index index.html index.htm;
+
+        location / {
+            # First attempt to serve request as file, then
+            # as directory, then fall back to redirecting to index.html
+            try_files $uri $uri/ /index.html;
+            add_header Cache-Control "no-cache, no-store, must-revalidate no";
+            etag off;
+        }
+
+        # Media: images, icons, video, audio, HTC
+        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+          expires 1M;
+          access_log off;
+          add_header Cache-Control "public";
+        }
+
+        # Javascript and CSS files
+        location ~* \.(?:css|js)$ {
+            try_files $uri =404;
+            expires 1y;
+            access_log off;
+            add_header Cache-Control "public";
+        }
+    }
+}

public/index.html

@@ -22,6 +22,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <script>
+      var ENV = %REACT_APP_ENV%;
+    </script>
+
     <title>React App</title>
   </head>
   <body>

src/App.js

@@ -8,9 +8,9 @@ class App extends Component {
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <pre>
+            {JSON.stringify(window.ENV, null, 2)}
+          </pre>
           <a
             className="App-link"
             href="https://reactjs.org"

yarn.lock

@@ -7901,7 +7901,7 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
   integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
@@ -7971,7 +7971,7 @@ [email protected]:
   optionalDependencies:
     fsevents "1.2.4"
 
-[email protected]:
+react@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
   integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==