로컬 프로젝트에 Docker 이미지 생성 후 배포하기

1. Docker 이미지 생성

1) 로컬 프로젝트 빌드

그동안 yarn start로 개발만 하던걸 이제 빌드시키자.

yarn build

루트에 build/ 폴더가 생성된다!
버그 발생하면 빌드 성공할때까지 다 잡기

2) Dockerfile 생성

루트에 Dockerfile을 생성한다. 확장자 없이 걍 생성하면 됨.
vscode 사용중이고 Docker 확장프로그램을 설치했다면 아래와 같이 아이콘이 고래모양으로 생길것임

내용은 아래와 같이 작성한다.

# 1. Node.js 이미지에서 빌드
FROM node:20-alpine AS build

# 작업 디렉토리 설정
WORKDIR /app

# 패키지 파일 복사
COPY package.json yarn.lock ./

# 의존성 설치
RUN yarn install

# 프로젝트 소스 코드 복사
COPY . .

# React 프로젝트 빌드
RUN yarn build

# 2. 빌드된 정적 파일만 가져와서 Nginx에서 서비스
FROM nginx:alpine

# Nginx 설정 파일 복사 (기본 제공되는 설정 사용 가능)
COPY nginx.conf /etc/nginx/conf.d/default.conf

# React 빌드 파일을 Nginx 루트 경로로 복사
COPY --from=build /app/build /usr/share/nginx/html

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

이때, 서버에 올리지 않아도 되는 파일들이 있다.
예를 들어 node_modules 폴더 하위 파일들

루트경로에 .dockerignore파일을 생성하고 아래와같이 작성하면 제외된다.

node_modules/

3) Nginx 설정 파일 작성

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

4) Docker 이미지 빌드

docker build -t my-react-app .

여기서 . 이거 빼먹으면 안됨. 현재디렉토리에 있는 Dockerfile을 build하라는 의미.

5) .tar 파일 생성 및 서버 복사

.tar 파일이 진짜 Docker 이미지 파일이다.
Dockerfile은 아직 이미지 아님. 이제 진짜임

docker save -o my-react-app.tar my-react-app
scp my-react-app.tar user@server-ip:/var/www/html/

• 여기서 scp를 하는 과정에 에러가 많이났다.
  permission denied 에러인데, 서버에 SSH 접속해서 위에 작성한 'user' 계정에 /var/www/html/ 폴더에 관한 권한을 부여하면 된다.

Azure VM에서 Docker 이미지 로드 및 실행

1) 서버에서 이미지 로드

docker load -i my-react-app.tar

2) 컨테이너 실행

docker run -d -p 80:80 --name react-app my-react-app

끝끝
중간중간 에러가 많이 났는데 그건 나중에 정리하겠음