Running NX React App Using Docker Compose

Question

I have a created a React App using NX. What I intend to do is run the React App along side the DB and API using using Docker Compose. (Code Repo)

To dockerize the React App, I initially created the following Dockerfile:

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install 
RUN npm install react-scripts@3.4.1 -g 

# add app
COPY . ./

# start app
CMD ["npm","run", "start"]

Which I based off of Dockerizing a React App

Next, I created the Docker Compose file:

version: "3"

services:
  react-nx-docker:
    container_name: react-nx-docker
    build:
      context: ./react-nx-docker/
      dockerfile: Dockerfile
    volumes:
      - ./react-nx-docker/:/app
      - /app/node_modules
      # - ".:/app"
      # - "/app/node_modules"
    ports:
      - 4201:4200
    stdin_open: true
    restart: on-failure

When I ran docker-compose -f compose.yml up, after building the container successfully ran.

react-nx-docker    | > react-nx-docker@0.0.0 start /app
react-nx-docker    | > nx serve
react-nx-docker    | 
react-nx-docker    | **
react-nx-docker    | Web Development Server is listening at http://localhost:4200/
react-nx-docker    | **
react-nx-docker    | Starting type checking service...
react-nx-docker    | Using 6 workers with 2048MB memory limit
react-nx-docker    | ℹ ｢wds｣: Project is running at http://localhost:4200/
react-nx-docker    | ℹ ｢wds｣: webpack output is served from /
react-nx-docker    | ℹ ｢wds｣: 404s will fallback to //index.html
react-nx-docker    | No type errors found
react-nx-docker    | Version: typescript 3.8.3
react-nx-docker    | Time: 2457ms
react-nx-docker    | Hash: 78453c13d7e47ac4c965
react-nx-docker    | Built at: 06/13/2020 2:20:50 PM
react-nx-docker    | Entrypoint main [big] = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
react-nx-docker    | Entrypoint polyfills [big] = runtime.js runtime.js.map polyfills.js polyfills.js.map
react-nx-docker    | Entrypoint styles [big] = runtime.js runtime.js.map styles.js styles.js.map
react-nx-docker    | chunk {main} main.js, main.js.map (main) 360 KiB ={runtime}= ={vendor}= [initial] [rendered]
react-nx-docker    | chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 567 KiB ={runtime}= [initial] [rendered]
react-nx-docker    | chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={styles}= ={vendor}= [entry] [rendered]
react-nx-docker    | chunk {styles} styles.js, styles.js.map (styles) 336 KiB ={runtime}= [initial] [rendered]
react-nx-docker    | chunk {vendor} vendor.js, vendor.js.map (vendor) 1.04 MiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
react-nx-docker    | ℹ ｢wdm｣: Compiled successfully.

But I was unable to access the React App at localhost:4201.

I then pivoted to use a multi-stage Dockerfile approach:

FROM node:12 AS react-nx-base
WORKDIR /app
COPY . .
RUN npm ci -S
RUN npm run build -S
RUN npm prune --production -S

FROM nginx:alpine AS react-nx-ui
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY --from=react-nx-base /app/dist/apps/react-nx-docker .

FROM node:12 AS react-nx-api
EXPOSE 3333
WORKDIR /app
COPY --from=react-nx-base /app/node_modules /app/node_modules
COPY --from=react-nx-base /app/dist/apps/api .
CMD ["node", "main.js"]

Along with a nginx.conf:

worker_processes  1;

events {
    worker_connections  1024;
}

http {

    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    upstream api {
        server react-nx-api:3333;
    }

    server {
        listen 80;
        server_name  localhost 10.*;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }

    server {
        listen 3333;
        server_name  localhost 10.*;

        location / {
            proxy_pass http://api;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
        }
    }
}

Lastly, an updated Compose file:

version: "3.4"
services:
  react-nx-api:
    container_name: react-nx-api
    build:
      context: ./react-nx-api/
      target: react-nx-api
    networks:
      tymg:
  react-nx-ui:
    container_name: react-nx-ui
    build:
      context: ./react-nx-api/
      target: react-nx-ui
    ports:
      - 80:80
      - 3333:3333
    networks:
      tymg:
networks:
  tymg:

Source: Migrating Full-Stack Apps from Poly-Repo to Mono-Repo

When I ran the service, I saw the following error message:

ERROR: build path /Users/master/Projects/Docker/NX-React-Docker-Compose/react-nx-api either does not exist, is not accessible, or is not a valid URL.

Does anyone know what I'm doing wrong?

I'm still pretty new to Docker and Nginx, so I know I'm doing something incorrect. I created a repository with all the code I've created for this project.

Running NX React App Using Docker Compose

0 Answers