0. 도커 설치

• .

1. /nginx.conf 작성

• 리액트 리포지토리의 루트 경로에 nginx.conf 파일을 만든다.
• listen 포트는 도커 컨테이너 포트 바인딩 aaaa:bbbb 일 때 bbbb와 일치시킨다.

server {
    listen 3000;
    
    location / {
        root /var/www/http;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

추가: 리액트 접근 base url이 / 가 아니고 /webgl 꼴인 경우

server {
    listen 3000;
    
    # 기존 location 블록
    location / {
        root /var/www/http;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    # /webgl/로 시작하는 요청 처리
    location ~ ^/webgl/(.+) {
        rewrite ^/webgl/(.+) /$1 last;
    }
}

2. /Dockerfile 작성

• 리액트 리포지토리의 루트 경로에 Dockerfile 파일을 만든다.
• 사전 준비(npm package.json build 스크립트 필요)

"scripts": {
    "build": "react-scripts build"
},

########################################################################
#                stage-0 : node 소스코드 빌드                           #
########################################################################
FROM node:20.5-alpine3.17

# 이미지 내에서 명령어를 실행할 디렉토리 설정
WORKDIR /usr/src/app

COPY . .

# 빌드 
RUN npm install
RUN npm run "build"

########################################################################
#             stage-1 : 빌드된 어플리케이션 nginx로 제공                 #
########################################################################
FROM nginx:1.21.6-alpine

# state:0에서 빌드된 파일을 /var/www/http 로 복사
COPY --from=0 /usr/src/app/build /var/www/http
# nginx 설정파일 복사
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g",  "daemon off;"]

3. 리액트 프로젝트 리포지토리 준비

• 경로 예시 : ~/react-example

4. 도커 명령어

• 이미지 생성, 컨테이너 시작

docker build -t react-example-im:latest /home/ubuntu/react-example/
docker run -d --name react-example-con -p 3000:3000 react-example-im:latest

5. 도커 이미지/컨테이너 재생성 명령어

# 1. ID 확인
docker ps
docker images

# 2. 제거
docker rm -f {컨테이너ID}
docker rmi -f {이미지ID}

# 3. 다시 생성
docker build -t react-example-im:latest /home/ubuntu/react-example/
docker run -d --name react-example-con -p 3000:3000 react-example-im:latest