CODEWITHSUNDEEP
reactjsdockernginxdeploymentdocker-compose
TimeFrame
TimeFrame

Reputation: 403

How to build and deploy ReactJs using docker-compose

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.

Upvotes: 0

Views: 3633

Answers (1)

Mihai
Mihai

Reputation: 10727

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.

Upvotes: 4

Related Questions