Merge pull request #30 from jpelbertrios/gh-7-dockerise-ui

Gh 07 dockerise ui

README.md

@@ -94,8 +94,8 @@ To run the UI React app in a docker container, follow the steps below:
 Make sure you are in the UI directory when running the commands.
 
 * `docker -v` to check whether you have docker installed, if not visit: (https://docs.docker.com/get-docker/)
-* `docker build -t ui . ` builds the ui docker container.
-* `docker run -d -p 80:3000 ui ` runs the UI application on port 3000 within the container, which is mapped to port 80 on the host
+* `docker build -f Dockerfile.prod -t kai-ui-image:latest .` builds the ui docker container.
+* `docker run -it -p 80:80 --rm kai-ui-image:latest` runs the UI application on port 80 within the container, which is mapped to port 80 on the host
 * `docker ps` lists the current running docker containers. Copy the CONTAINER ID.
 * `docker logs -f [container ID]` shows a log of the actions happening to the UI container.
 

ui/Dockerfile → ui/Dockerfile.dev

@@ -4,4 +4,4 @@ ENV PATH /app/node_modules/.bin:$PATH
 COPY package*.json ./
 COPY . ./
 RUN npm install --silent
-CMD ["npm", "start"]
+CMD ["npm", "start"] 

ui/Dockerfile.prod

@@ -0,0 +1,30 @@
+# STAGE 1 - BUILD UI APP
+FROM node:13.12.0-alpine as build
+
+# specify /app working directory inside the image
+WORKDIR /app
+# add node_modules
+ENV PATH /app/node_modules/.bin:$PATH
+# copy package & package-lock json to app/ inside the image
+COPY ./package*.json /app/
+# install npm dependencies
+RUN npm install --silent
+# copy all code to app/ directory inside the image
+COPY . /app
+# build app
+RUN npm run build
+
+
+# STAGE 2 - Build IMAGE & COPY REACT UI BUILD FILES
+FROM nginx:1.17.8-alpine
+
+# copy build files inside the image to directory where Nginx serves from
+COPY --from=build /app/build /usr/share/nginx/html
+# remove the default Nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+# copy Nginx config file to the ui image 
+COPY nginx/nginx.conf /etc/nginx/conf.d
+# expose port 80 for the Nginx server to listen to
+EXPOSE 80
+# run Nginx in foreground and not as daemon
+CMD ["nginx", "-g", "daemon off;"]

ui/README.md

@@ -4,6 +4,19 @@
 
 In the project directory, you can run:
 
+#### Docker
+
+To run the UI React app in a docker container, follow the steps below:
+Make sure you are in the UI directory when running the commands.
+
+* `docker -v` to check whether you have docker installed, if not visit: (https://docs.docker.com/get-docker/)
+* `docker build -f Dockerfile.prod -t kai-ui-image:latest .` builds the ui docker container.
+* `docker run -it -p 80:80 --rm kai-ui-image:latest` runs the UI application on port 80 within the container, which is mapped to port 80 on the host
+* `docker ps` lists the current running docker containers. Copy the CONTAINER ID.
+* `docker logs -f [container ID]` shows a log of the actions happening to the UI container.
+
+Once the process has finished, visit (http://localhost:80), where you will be able to see the UI.
+
 #### `npm start`
 
 Runs the app in the development mode. Open [http://localhost:8080](http://localhost:8080) to view it in the browser.

ui/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 /index.html; 
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+
+}