3

I found many tutorials about those but none uniting the 3 of them. I want to learn how to do that because I need to start deploying react websites I made and I wanted to deploy them on my domain and hosting on my computer for testing purposes.

In what order should I learn those to archive that ? What tutorials do you recommend ? I found some tutorials about them but got really confused with the cascade of things to learn. I got windows power shell working, did some node tutorials some express ones and managed to run nginx on docker but couldn't finish.

I am feeling ok with my css, js, and react, made a little game got some things working did some practice but now I am kind of stuck. I really appreciate any help or suggestions you can provide to keep going on my learning path.

Bellow are the video tutorials I watched : CSS https://www.youtube.com/watch?v=1Rs2ND1ryYc React https://www.youtube.com/watch?v=DLX62G4lc44

1 Answer 1

11

You can use a docker-compose.yml file to define and run multi container Docker applications. And then with a single command you can build and start all your services.You can run both Linux and Windows programs and executables in Docker. Docker creates thin virtual environments for your apps. Here is an example of what you want.This is the folder structure:

|--client  
     |--Dockerfile
     |--components
     |--index.js
|--server
     |--Dockerfile
     |--index.js
|--nginx
     |-- Dockerfile
     |--default.conf
|--docker.compose.yml

Dockerfile for the react client:

FROM node:alpine as builder
WORKDIR '/app'
COPY ./package.json . /
RUN npm install
COPY . .
RUN npm run build

Dockerfile for nginx

FROM nginx 
COPY ./default.conf /etc/nginx/conf.d/default.conf

default.conf for nginx

upstream client {
    server client:3000;
}

upstream api {
    server api:5000;
}

server {
    listen 80;

    location / {
        proxy_pass  http://client;
    }
    location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass  http://api;
    }
}

Dockerfile for node/express server

FROM node:alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
CMD [ "npm", "run", "start" ]

docker-compose.yml file. You can switch mongo with any database you want to use for your api.You can build and run evrything with docker-compose up --build from the main project directory(where the docker-compose file is )

version: '3'
services:
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - '80:80'
  mongo:
    container_name: mongo
    image: mongo
    ports:
      - '27017:27017'
  api:
    restart: always  
    build:
      dockerfile: Dockerfile
      context: ./server
    volumes: 
      - /app/node_modules
      - ./server:/app
    links:
      - mongo
    ports:
      - '5000:5000'
    depends_on:
      - mongo
  client:
    build:
      dockerfile: Dockerfile
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
    links:
      - api
2
  • Thanks for the answer. I have some doubts, and it might take me a while to do everything right I think. So first i have to find some tutorials about docker compose file right ? Does the first dockerfile have termination like dockerfile.yml or i just create a "file" name Dockerfile and paste that text ? Webstorm have right click open in terminal so is that how i should run those commands ? Lets see if I understand it right, i open windows power shell change directory to my app and type "docker-compose up --build" is that it ? will this create the folder structure ? Jan 30, 2020 at 10:38
  • 1
    No, it will not create the folder structure. It's to build and run the Dockerfiles . docker-compose file is useful because with it you have a single entry point for all the services you want to run. You can read the docs its very easy. Here is my repo from which I took the code and slightly altered it. You can just clone it and start from there. It is a little different because there are Dockerfile.devs for development phase and regular Dockerfiles for supposed deployment;) Here it is github.com/ConstantineGochev/react-docker-multi
    – C.Gochev
    Jan 30, 2020 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.