Adjusting build for AWS

OpenConceptLab · Nov 4, 2020 · e650401 · e650401
1 parent ceb63d0
commit e650401
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,4 @@ node_modules/
 src/stories/
 .storybook/
 dist/
-
+.idea/
diff --git a/Dockerfile b/Dockerfile
@@ -1,6 +1,7 @@
+# Stage-1 Build and Development Environment
 FROM node:14.11 as build
+ARG NODE_ENV=production
 ENV NPM_CONFIG_LOGLEVEL warn
-ENV NODE_ENV=${NODE_ENV:-development}
 ENV PORT=${PORT:-4000}
 ENV API_URL=${API_URL:-http://127.0.0.1:8000}
 RUN mkdir /app
@@ -10,8 +11,7 @@ ENV PATH /app/node_modules/.bin:$PATH
 ADD package.json /app/
 ADD package-lock.json /app/
 
-RUN npm install
-RUN npm install serve -g
+RUN npm install --production=false
 
 ADD webpack.config.js /app/
 ADD .babelrc /app/
@@ -27,6 +27,8 @@ RUN npm run build
 RUN cp public/bootstrap.min.css dist/
 RUN cp public/favicon.ico dist/
 
+EXPOSE ${PORT}
+
 CMD ["bash", "-c", "./start.sh"]
 
 # Stage-2 Production Environment
@@ -35,14 +37,17 @@ FROM nginx:1.12-alpine
 # Add bash
 RUN apk add --no-cache bash
 
+ADD start-prod.sh /
+RUN chmod +x start-prod.sh
+
 # Copy the tagged files from the build to the production environmnet of the nginx server
 COPY --from=build /app/dist/ /usr/share/nginx/html/
 
 # Copy nginx configuration
 ADD ngnix /etc/nginx/conf.d/
 
 # Make port 80 available to the world outside the container
-EXPOSE 80
+EXPOSE 8080
 
 # Start the server
-CMD nginx -g "daemon off;"
+CMD ["bash", "-c", "/start-prod.sh"]
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Overhauled OCL Web Authoring Interface v2
 2. Visit http://localhost:4000
 
 ### Run Production (do check CORS origin policy with API_URL)
-1. docker-compose run -p 4000:4000 -e NODE_ENV=production -e API_URL="http://127.0.0.1:8000" web bash ./start-prod.sh
+1. docker-compose -f docker-compose.yml up -d
 2. Visit http://localhost:4000
 
 

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
@@ -2,10 +2,12 @@ version: '3'
 
 services:
   web:
-    image: openconceptlab/oclweb2:dev
+    image: openconceptlab/oclweb2:${TAG-dev}
     build:
       context: .
       target: build
+      args:
+        NODE_ENV: development
     ports:
       - "4000:4000"
       - "4001:35729"
@@ -14,4 +16,4 @@ services:
     volumes:
       - .:/app:z
     environment:
-      - PORT=4000
+      - PORT=${PORT-4000}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,11 +2,13 @@ version: '3'
 
 services:
   web:
-    image: openconceptlab/oclweb2:${ENVIRONMENT-latest}
+    image: openconceptlab/oclweb2:${TAG-latest}
     build:
       context: .
+      args:
+        NODE_ENV: production
     ports:
-      - "80:4000"
+      - "4000:8080"
     restart: on-failure
     environment:
       - API_URL=${API_URL-http://127.0.0.1:8000}
diff --git a/ngnix/default.conf b/ngnix/default.conf
@@ -1,14 +1,9 @@
 server {
-    listen       80;
+    listen       8080;
     server_name  localhost;
     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
-	try_files $uri $uri/ /index.html;
-    }
-    # redirect server error pages to the static page /50x.html
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
+	    try_files $uri $uri/ /index.html;
     }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
+    "@babel/preset-react": "^7.12.5",
     "@babel/runtime": "7.0.0-beta.42",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",

diff --git a/public/env-config.js b/public/env-config.js
@@ -0,0 +1 @@
+/* Automatically populated by start-prod.sh */
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,8 @@
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/css/alertify.min.css"/>
     <!-- Bootstrap theme -->
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/css/themes/bootstrap.min.css"/>
+    <!-- ENV config -->
+    <script src="./env-config.js"></script>
     <title>OCL</title>
   </head>
   <body>

diff --git a/src/services/APIService.js b/src/services/APIService.js
@@ -3,7 +3,7 @@ import axios from 'axios';
 import {get, omit, isPlainObject, isString, defaults } from 'lodash';
 
 /*eslint no-undef: 0*/
-const APIURL = process.env.API_URL;
+const APIURL = window.API_URL || process.env.API_URL;
 const APIServiceProvider = {};
 const RESOURCES = [
   { name: 'concepts', relations: [] },

diff --git a/start-prod.sh b/start-prod.sh
@@ -0,0 +1,18 @@
+#!/bin/bash
+
+ENV_FILE="/usr/share/nginx/html/env-config.js"
+
+rm -f ${ENV_FILE}
+touch ${ENV_FILE}
+
+if [[ ! -z "${API_URL}" ]]; then
+    echo "var API_URL = \"${API_URL}\";" >> ${ENV_FILE}
+fi
+
+echo "Using env-config.js:"
+echo "----"
+cat ${ENV_FILE}
+echo "----"
+
+echo "Starting the production server..."
+nginx -g "daemon off;"