How to conect docker nginx with express and react app on windows - css

Question

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

Answer 1

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