React 앱 도커화

해보자

A quick note: react is ready to go in production. but backend (nodejs) could be improved further. So you could also focus only on react!

project
└───backend
          - index.js
          - .env
└───frontend

"type": "module",

NODE_ENV = development
PORT = 5000

import express from 'express'
import dotenv from 'dotenv'

dotenv.config()

const app = express()

app.get('/', (req, res) => {
    res.send('API is running')
})

const PORT = process.env.PORT || 5000

app.listen(PORT, () =>
    console.log(`
Server running in ${process.env.NODE_ENV} mode on ${PORT} Port`)
)

Now we are going to dockerize our app.

도커 파일 서버

node_modules
Dockerfile
.gitignore
.git

FROM node:16.14.0-slim

#create app directory inside docker
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install

#Bundle source code
COPY . .
EXPOSE 5000

CMD ["npm","run","dev"]

node_modules
Dockerfile
.gitignore
.git

FROM node:16.14.0-slim
# Working directory
WORKDIR /user/src/frontend
# Install dependencies
COPY package*.json ./
RUN npm install
# Copy local files to frontend folder
COPY . .
EXPOSE 3000

CMD ["npm","start"]

FROM node:16.14.0-slim AS build-stage
ENV NODE_ENV production
# Add a work directory
WORKDIR /user/src/frontend
# ENV PATH /app/node_modules/.bin:$PATH
# Cache and Install dependencies
COPY package*.json ./
# COPY yarn.lock .
RUN npm install --production
# Copy app files
COPY . .
# Build the app

RUN npm run build

FROM nginx:1.21.6-alpine
ENV NODE_ENV production
# Copy built assets from builder
COPY --from=build-stage /user/src/frontend/build /usr/share/nginx/html
# Add your nginx.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# Expose port
EXPOSE 80
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

version: '3'
services:
  frontend:
    container_name: react-dev
    build:
      context: ./frontend
    ports:
      - 3000:3000
    env_file: ./frontend/.env
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/user/src/frontend
      - /user/src/frontend/node_modules

version: '3'
services:
  frontend:
    container_name: react-prod
    image: react-prod
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    ports:
      - 1337:80
    env_file: ./frontend/.env

Malik-Idrees / 머른-템플릿-도커

MERN 스택 템플릿

project
└───backend
└───frontend
└───.env

"type": "module",

Let's install express server $ npm i express
$ npm i dotenv

Replace .env with below:

NODE_ENV = development
PORT = 5000

import express from 'express'
import dotenv from 'dotenv'
dotenv.config()

const app = express()

app.get('/', (req, res) => {
    res.send('API is running')
}