React + vite + typescript 프로젝트 도커 이미지 빌드

Dockerfile

#Dockerfile
FROM node:18-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build


FROM nginx:stable-alpine

COPY --from=build /app/dist /usr/share/nginx/html

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

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

node:18-alpine 버전 설치

 

작업디렉터리를 /app으로 설정

package*.json파일을 복사

패키지 파일을 바탕으로 npm install 을 실행하여 모듈 설치

 

copy 로 파일 전체 복사

npm run build 로 리액트 프로젝트 빌드

 

nginx:stable-alpine 설치

위쪽 작업 결과를 --from=build 로 가져와서 쓸 수 있다.

빌드 결과물인 /app/dist를 nginx안에 있는 /usr/share/nginx/html으로 복사

 

충돌방지를 위해 기존 default.conf 파일 삭제

커스텀으로 만든 nginx.conf 를 nginx 안으로 복사

 

------------------------

nginx.conf 파일

server {
    listen          80;
    server_name     localhost
    # access_log /var/log/nginx/access.log;
    # error_log /var/log/nginx/error.log;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}