Dockerizing react client

Author: gmgalvan

.travis.yml

@@ -13,6 +13,7 @@ before_install:
   - sudo mv docker-compose /usr/local/bin
 
 before_script:
+  - export REACT_APP_USERS_SERVICE_URL=http://127.0.0.1
   - docker-compose up -d --build
 
 script:

docker-compose-prod.yml

@@ -33,5 +33,19 @@ services:
     restart: always
     ports:
       - 80:80
+    depends_on:
+      - users
+      - client 
+  
+  client:
+    container_name: client
+    build:
+      context: ./services/client
+      dockerfile: Dockerfile-prod
+      args:
+        - NODE_ENV=production
+        - REACT_APP_USERS_SERVICE_URL=${REACT_APP_USERS_SERVICE_URL}
+    ports:
+      - '3007:80'
     depends_on:
       - users

docker-compose.yml

@@ -35,5 +35,21 @@ services:
     restart: always
     ports:
       - 80:80
+    depends_on:
+      - users
+      - client 
+  
+  client:
+    build:
+      context: ./services/client
+      dockerfile: Dockerfile
+    volumes:
+      - './services/client:/usr/src/app'
+      - '/usr/src/app/node_modules'
+    ports:
+      - 3007:3000
+    environment:
+      - NODE_ENV=development
+      - REACT_APP_USERS_SERVICE_URL=${REACT_APP_USERS_SERVICE_URL}
     depends_on:
       - users

services/client/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+coverage
+build
+env
+htmlcov
+.dockerignore
+Dockerfile
+Dockerfile-prod

services/client/Dockerfile

@@ -0,0 +1,17 @@
+# base image
+FROM node:11.12.0-alpine
+
+# set working directory
+WORKDIR /usr/src/app
+
+# add `/usr/src/app/node_modules/.bin` to $PATH
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+
+# install and cache app dependencies
+COPY package.json /usr/src/app/package.json
+COPY package-lock.json /usr/src/app/package-lock.json
+RUN npm ci
+RUN npm install [email protected] -g --silent
+
+# start app
+CMD ["npm", "start"]

services/client/Dockerfile-prod

@@ -0,0 +1,43 @@
+###########
+# BUILDER #
+###########
+
+# base image
+FROM node:11.12.0-alpine as builder
+
+# set working directory
+WORKDIR /usr/src/app
+
+# install app dependencies
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+COPY package.json /usr/src/app/package.json
+COPY package-lock.json /usr/src/app/package-lock.json
+RUN npm ci
+RUN npm install [email protected] -g --silent
+
+# set environment variables
+ARG REACT_APP_USERS_SERVICE_URL
+ENV REACT_APP_USERS_SERVICE_URL $REACT_APP_USERS_SERVICE_URL
+ARG NODE_ENV
+ENV NODE_ENV $NODE_ENV
+
+# create build
+COPY . /usr/src/app
+RUN npm run build
+
+
+#########
+# FINAL #
+#########
+
+# base image
+FROM nginx:1.15.9-alpine
+
+# copy static files
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html
+
+# expose port
+EXPOSE 80
+
+# run nginx
+CMD ["nginx", "-g", "daemon off;"]

services/nginx/dev.conf

@@ -3,6 +3,15 @@ server {
   listen 80;
 
   location / {
+    proxy_pass http://client:3000;
+    proxy_redirect    default;
+    proxy_set_header  Host $host;
+    proxy_set_header  X-Real-IP $remote_addr;
+    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header  X-Forwarded-Host $server_name;
+  }
+
+  location /users {
     proxy_pass        http://users:5000;
     proxy_redirect    default;
     proxy_set_header  Host $host;

services/nginx/prod.conf

@@ -3,6 +3,15 @@ server {
   listen 80;
 
   location / {
+    proxy_pass http://client:80;
+    proxy_redirect    default;
+    proxy_set_header  Host $host;
+    proxy_set_header  X-Real-IP $remote_addr;
+    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header  X-Forwarded-Host $server_name;
+  }
+
+  location /users {
     proxy_pass        http://users:5000;
     proxy_redirect    default;
     proxy_set_header  Host $host;