How to build and deploy ReactJs using docker-compose

Question

I'm trying to make that every time a new change is made on the app I do not need to build the app, and then run the docker-compose file. What I'm trying to do is that when I change code in my application (ReactJs) to just go and run docker-compose file, so then docker-compose will build and run it using nginx.

Here's what my docker-compose.yml looks like:

version: '2'

services:
  nginx:
    image: 'bitnami/nginx:1.14.2'
    ports:
      - '80:8080'
    volumes:
      - ./build:/var/www/my-app
      - ./nginx.conf:/opt/bitnami/nginx/conf/nginx.conf:ro

Right now with this code, I need to build the application myself running npm run build and then go and run the docker-compose file so it would take the changes.

I don't exactly know how to do it, so I assume I need to create a Dockerfile run npm run build and then call the bitmani/nginx:1.14.2 based on their docs: https://hub.docker.com/r/bitnami/nginx/

FROM node:8.7.0-alpine

RUN npm install

RUN npm run build

docker run --name nginx \
  -v /path/to/my_vhost.conf:/opt/bitnami/nginx/conf/vhosts/my_vhost.conf:ro \
  -v /path/to/nginx-persistence/nginx/conf/bitnami/certs:/bitnami/nginx/conf/bitnami/certs \
  bitnami/nginx:latest

and in docker-compose.yml call build . instead of image: bitnami/nginx.

If you are in development mode than you wouldn't use npm run build but use npm run start and its built in server. Then for production deploys you should use a multi-stage Docker file and nginx. — Shawn C.
– Shawn C., Commented Apr 1, 2019 at 13:13

Mihai · Accepted Answer · 2019-04-01 13:25:32Z

4

You should use a stage build for this. Your Dockerfile should look like this:

# Stage 1 - Building image
FROM node:8.7.0-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2 - Running image
FROM bitnami/nginx:1.14.2

COPY --from=node /usr/src/app/build /var/www/my-app
COPY ./nginx.conf /opt/bitnami/nginx/conf/nginx.conf

And your docker-compose:

version: '3.3'

services:
  myApp:
    image: myapp:1.0
    container_name: my-app
    build: .
    ports:
      - 80:8080

I adapted this from one of my projects so if you have any issues let me know and I'll check them.

I hope it helps.

answered Apr 1, 2019 at 13:25

Mihai

11k3 gold badges24 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to build and deploy ReactJs using docker-compose

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related