[Synology Nas] 운영 서버 이전

DataBase 이전이 마무리 되었으니 운영중이던 웹애플리이션도 서버 이전을 해야한다. iwinv 클라우드에서 서버를 대여해서 프론트엔드 웹 어플리케이션을 올려 두었다. 서버를 내리기 위해서 Synology Nas 서버로 이전을 하려고 한다. 이전 방식은 Docker에서 Nginx를 웹서버로 두고 배포를 해볼려고 한다.

BackEnd 서버 이전

1. Dockerfile 설정

# Stage 1: Nest.js 앱 빌드
FROM node:lts as build

# 환경 변수를 사용하여 MySQL 연결 정보 설정
ENV MYSQL_USER=root
ENV MYSQL_PORT=3306
ENV MYSQL_HOST=my-db-host
ENV MYSQL_PASSWORD=password
ENV MYSQL_DATABASE=database
ENV PORT=8888

WORKDIR /app
COPY package.json .
COPY package-lock.json .

RUN npm install  # 앱의 의존성 설치

COPY . .

RUN npm run build  # Nest.js 앱 빌드

# Stage 2: Node.js를 사용하여 Nest.js 앱 서빙
FROM node:lts

WORKDIR /app

COPY --from=build /app/dist /app/dist
COPY --from=build /app/node_modules /app/node_modules

# Nest.js 애플리케이션의 기본 포트
EXPOSE 3000

# Nest.js 애플리케이션 실행
CMD ["node", "dist/main.js"]

Nest.js로 이루어진 애플리케이션을 올리기 위해서 node를 설치한다. 버전은 lts(Long-Term Support)를 선택하여준다.
Dockerfiledms .env파일을 인식하지 않기 때문에 환경 변수는 Dockerfile에 추가해서 사용이 가능하다. 하지만 이렇게 되면 민간함 내용이 Dockerfile에 하드코딩으로 담기기 때문에 보안상의 위험이 있다. 추후에 Docker 컨테이너를 실행할때 환경 변수를 제공하여 실행 시키게 세팅을 바꿀 예정이다.

2. Dockerfile 파일 레포지터리 올리기

3. 서버에서 Clone 받기.

4. 서버에서 Dockerfile을 실행하여 Docker 이미지 빌드

docker build -t my-docker-image .

docker build: Docker 이미지를 빌드하는 Docker CLI 명령어
-t my-docker-image: 빌드된 Docker 이미지에 태그를 지정하는 옵션. 이미지의 이름 지정.
.: Dockerfile이 위치한 다렉토리를 나타낸다. Docker CLI에게 이 디렉토리의 Dockerfile을 찾으라고 지시함.

5. 생성된 이미지를 사용하여 컨테이너 실행

docker run -d --name my-container -p 3000:3000 my-docker-image

docker run: Docker 컨테이너를 실행하는 Docker CLI 명령어
-d: 백그라운드 모드로 컨테이너를 실행하는 옵션이다. 즉, 백그라운드에서 실행된다.
--name my-container: 실행할 컨테이너에 이름을 지정하는 옵션.
-p 3000:3000: 호스트의 포트와 컨테이너의 포트를 연결하는 옵션이다.
my-docker-image: 실행할 Docker 컨테이너에 사용할 Docker 이미지의 이름이다.

FrontEnd 서버 이전

1. Dockerfile 설정

# Stage 1: Build react app
# Node.js LTS 버전을 사용하여 React 애플리케이션 빌드
FROM node:lts as build

WORKDIR /app
COPY . .

RUN npm install  # 앱의 의존성 설치
RUN npm run build  # React 애플리케이션 빌드

# Stage 2: Serve react app with Nginx
# Nginx latest 버전을 사용하여 React 애플리케이션 서빙
FROM nginx:latest

# Nginx 구성 파일 복사
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 빌드된 React 애플리케이션 복사
COPY --from=build /app/build /usr/share/nginx/html

# 컨테이너의 포트 80을 호스트의 포트에 연결
EXPOSE 80

# Nginx 실행
CMD ["nginx", "-g", "daemon off;"]

React도 백엔드와 똑같이 설정해준다.

2. nginx.conf 설정

server {
    # 80 포트에서 요청 수신
    listen 80;
    # 서버 이름 설정
    server_name localhost;

    # 루트 경로 지정 및 기본 문서 설정
    location / {
        root /usr/share/nginx/html;
        index index.html;
        # 요청된 파일이 없을 경우 /index.html 반환
        try_files $uri $uri/ /index.html;
    }

    # 오류 페이지 설정
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

nginx 설정은 간단하게 80번 포트로 들어오는 요청을 루트 디렉토리에서 정적 파일을 서빙 하도록 해준다.
서빙: 단순히 클라이언트에게 데이터나 파일을 제공하는 것을 의미한다.

3. Dockerfile과 nginx.conf 파일 레포지터리 올리기

4. 서버에서 Clone 받기.

5. 서버에서 Dockerfile을 실행하여 Docker 이미지 빌드

docker build -t my-docker-image .

6. 생성된 이미지를 사용하여 컨테이너 실행

docker run -d --name my-container -p 8080:80 my-docker-image

7. 공유기에서 8080 포트 포워딩 해주기.

이렇게 해주면 host:8080/ 으로 접속을 하면 서버에 8080으로 매핑이 되고, 서버 8080포트가 docker container에서 container 80번 포트로 연결을 해서 웹사이트가 배포가 되는거를 확인할수 있다.