How to deploy a react application with docker in 5 steps

1. DockerFile of Frontend

if your environment variable is for example
http://localhost:8000/api put only /api

FROM node:14

WORKDIR /app

COPY . /app

ENV REACT_APP_REST=/api

RUN npm install

RUN npm i -g serve

RUN npm run build

EXPOS…


This content originally appeared on DEV Community and was authored by Nelson Adonis Hernandez

1. DockerFile of Frontend

if your environment variable is for example
http://localhost:8000/api put only /api

FROM node:14

WORKDIR /app

COPY . /app

ENV REACT_APP_REST=/api

RUN npm install

RUN npm i -g serve

RUN npm run build

EXPOSE 5000

CMD ["serve", "-s", "build"]

2. DockerFile of Backend

FROM node:14

WORKDIR /app

COPY . /app

RUN npm install

EXPOSE 8000

CMD [ "npm", "run", "serve" ]

3. Endpoint of Backend with Express JS

The endpoint begins with /api as we had defined it in the Frontend

const express = require("express");
const app = express();
const games = require("./api");
const cors = require("cors");

app.use(cors());
app.use(express.json());

app.get("/api/games", ({res}) => {
  res.status(200).json(games);
});

const port = 8000;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

4. Create file DockerFile of Nginx

FROM nginx:latest

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

5. Create Nginx conf

events {
        worker_connections 768;
        # multi_accept on;
}

http {
    server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html =404;

        location / {
            proxy_pass http://frontendreact:5000;
        }

        location /api {
            proxy_pass http://backendnode:8000;
        }
    } 
}

6. Docker compose

version: "3.9"
services:
  backendnode:
    build: ./backendnode
    expose:
      - "8000"
    volumes:
      - ./backendnode:/usr/src/app
  frontendreact:
    build: ./frontend
    expose:
      - "5000"
    volumes:
      - ./frontend:/usr/src/app
  nginx:
      build: ./nginx
      ports:
        - "80:80"
      links:
        - frontendreact
        - backendnode
      restart: always

Code of example in Github ?


This content originally appeared on DEV Community and was authored by Nelson Adonis Hernandez


Print Share Comment Cite Upload Translate Updates
APA

Nelson Adonis Hernandez | Sciencx (2021-08-11T03:10:18+00:00) How to deploy a react application with docker in 5 steps. Retrieved from https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/

MLA
" » How to deploy a react application with docker in 5 steps." Nelson Adonis Hernandez | Sciencx - Wednesday August 11, 2021, https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/
HARVARD
Nelson Adonis Hernandez | Sciencx Wednesday August 11, 2021 » How to deploy a react application with docker in 5 steps., viewed ,<https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/>
VANCOUVER
Nelson Adonis Hernandez | Sciencx - » How to deploy a react application with docker in 5 steps. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/
CHICAGO
" » How to deploy a react application with docker in 5 steps." Nelson Adonis Hernandez | Sciencx - Accessed . https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/
IEEE
" » How to deploy a react application with docker in 5 steps." Nelson Adonis Hernandez | Sciencx [Online]. Available: https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/. [Accessed: ]
rf:citation
» How to deploy a react application with docker in 5 steps | Nelson Adonis Hernandez | Sciencx | https://www.scien.cx/2021/08/11/how-to-deploy-a-react-application-with-docker-in-5-steps/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.