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
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
build . instead of
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.
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?