[Docker] 서버에서 react 같이 배포하기

이상협·2022년 10월 3일

Docker

목록 보기

5/6

오늘은 [Docker] nginx + nodejs + mongodb 배포하기 에서 했던 결과물에서 추가로 react 프로젝트를 빌드해서 같이 배포해보려고 한다.

이번에 해보는 방법은 nginx에서 react 프로젝트를 빌드해서 빌드된 파일을 nginx 이미지로 넣어서 배포해보려고 한다.

🎈 파일 경로

.
├── docker-compose.yml      // 여러 이미지를 한번에 배포시켜주는 파일
├── nginx
│   ├── Dockerfile          // conf 폴더 안의 파일을 복붙해주기 위한 도커파일
│   ├── nginx.conf
│   ├── .dockerignore
│   ├── react               // react 프로젝트
│   │   ├── node_modules
│   │   ├── public
│   │   ├── src
│   │   ├── package-lock.json
│   │   └── package.json
│   └── sites-available
│       ├── back.conf       // 배포할 서버를 연결하기 위한 파일
│       └── front.conf
└── server                
    ├── Dockerfile          // 필요한 모듈 설치 및 프로젝트 빌드용 파일
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── .dockerignore       // 도커 이미지에 넣지 않을 파일 목록
    └── src

nginx의 폴더 구조가 전이랑 조금 다른 것을 볼 수 있다.
바꾸면서 큰차이는 없을거 같았지만 두개의 location을 넣는게 익숙치 않아서 일부러 분리해서 넣는다고 조금 변경이 되었다.

🎈nginx.conf

nginx의 설정이 들어가는 핵심 파일로 크게 변경되는 내용은 없지만, 나중에 변경하기 쉽게 따로 작성해주면 편하다.

// nginx.conf
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    # include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;  // 추가해야하는 부분
}

마지막줄의 내용이 추가된 내용으로 sites-available( docker에서 sites-enabled로 옮길 예정 )의 파일들을 전부 include하기 위해 사용한 구문이다.

🎈sites-available

react 프로젝트와 서버를 각각 배포하기위해 작성한 파일들이다.

react.conf

// react.conf
server {
    listen 8100;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm; 
        try_files $uri $uri/ /index.html;
        expires -1;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

back.conf

// back.conf
upstream server-todolist {
    server host.docker.internal:8080;
}

server {
    listen 80;

    location / {
        proxy_pass http://server-todolist;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Host $server_name; 
    }
}

🎈Dockerfile

FROM node:16 as builder

WORKDIR /usr/src/app

COPY ./react/package*.json ./       // react 모듈 정보를 해당 경로로 복사
RUN npm install                     // 필요 모듈 설치

COPY ./react .                      // 필요한 파일들 전부 복사

RUN npm run build                   // react 프로젝트 필드

FROM nginx

RUN rm /etc/nginx/conf.d/default.conf

# COPY ./conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/nginx.conf                           // nginx 기본설정 파일 복사
COPY ./sites-available/back.conf /etc/nginx/sites-available/
COPY ./sites-available/front.conf /etc/nginx/sites-available/   // sites-available 안의 파일들 전부 복사
COPY --from=builder /usr/src/app/build /usr/share/nginx/html    // 빌드된 파일들 복사

RUN mkdir -p /etc/nginx/sites-enabled/\
    && ln -s /etc/nginx/sites-available/back.conf /etc/nginx/sites-enabled/

RUN mkdir -p /etc/nginx/sites-enabled/\
    && ln -s /etc/nginx/sites-available/front.conf /etc/nginx/sites-enabled/
// sites-available의 파일들을 링크로 전부 연결

WORKDIR /usr/share/nginx/html

🎈 docker-compose

  nginx:
    build: ./nginx-todolist
    container_name: nginx
    restart: always
    depends_on:
      - server-todolist
    ports:
      - 8000:80
      - 8100:8100
    extra_hosts:
      - "host.docker.internal:host-gateway"
    networks:
      - backendv

두개의 프로젝트를 배포하기 때문에 포트를 하나 추가를 해주었다.

이제 최종 경로로 빠져나와서
$ docker-compose up --build -d를 해주면 된다.