build: deploy using docker with dynamic env vars

closes #38

.gitignore

@@ -27,3 +27,7 @@ cypress/screenshots
 cypress/videos
 /.nyc_output
 /coverage
+
+
+# jetbrains
+.idea

.productioncontainer/docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3'
+services:
+  app:
+    build:
+      context: ..
+      dockerfile: Dockerfile.prod
+    env_file:
+      - ../.env.production
+    ports:
+      - '80:80'

Dockerfile

@@ -0,0 +1,15 @@
+FROM mhart/alpine-node:12
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# install app dependencies
+COPY package.json /usr/src/app/
+RUN yarn install
+
+# bundle app source
+COPY . /usr/src/app
+
+EXPOSE 3000
+
+CMD ["yarn", "start"]

Dockerfile.build.dev

@@ -0,0 +1,13 @@
+FROM mhart/alpine-node:12
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# install app dependencies
+COPY package.json /usr/src/app/
+RUN yarn install
+
+# bundle app source
+COPY . /usr/src/app
+
+CMD ["yarn", "build"]

Dockerfile.build.prod

@@ -0,0 +1,13 @@
+FROM mhart/alpine-node:12
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# install app dependencies
+COPY package.json /usr/src/app/
+RUN yarn install
+
+# bundle app source
+COPY . /usr/src/app
+
+CMD ["yarn", "build"]

Dockerfile.prod

@@ -0,0 +1,27 @@
+# stage1 - build environment
+FROM node:14-alpine as build
+
+RUN apk add --no-cache ca-certificates jq
+
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY ./package.json /app/
+COPY ./yarn.lock /app/
+RUN yarn
+COPY . /app
+RUN jq 'to_entries | map_values({ (.key) : ("$" + .key) }) | reduce .[] as $item ({}; . + $item)' ./src/env.json > ./src/env.tmp.json && mv ./src/env.tmp.json ./src/env.json
+RUN yarn build
+
+# stage 2 - production environment
+FROM nginx:stable-alpine
+
+RUN apk add --no-cache ca-certificates bash
+
+ENV JSFOLDER=/usr/share/nginx/html/static/js/*.js
+COPY ./scripts/start.sh /usr/bin/start.sh
+RUN chmod +x /usr/bin/start.sh
+COPY --from=build /app/build /usr/share/nginx/html
+# override default configuration
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["start.sh"]

nginx/nginx.conf

@@ -0,0 +1,21 @@
+server {
+
+  listen 80;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+    # to redirect all the requests to index.html,
+    # useful when you are using react-router
+
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+
+}

scripts/start.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+export EXISTING_VARS=$(printenv | awk -F= '{print $1}' | sed 's/^/\$/g' | paste -sd,);
+for file in $JSFOLDER;
+do
+  envsubst $EXISTING_VARS < $file > file.tmp && mv file.tmp $file
+done
+nginx -g 'daemon off;'

src/config/constants.js

@@ -1,6 +1,9 @@
+import { API_HOST as API_HOST_ENV } from '../env.json';
+
 export const APP_NAME = 'Graasp';
 
-export const API_HOST = process.env.REACT_APP_API_HOST || 'default';
+export const API_HOST =
+  API_HOST_ENV || process.env.REACT_APP_API_HOST || 'http://localhost:3111';
 
 export const DESCRIPTION_MAX_LENGTH = 30;
 

src/env.json

@@ -0,0 +1,3 @@
+{
+  "API_HOST": false
+}