AWS EC2에 Vite 애플리케이션 Docker로 배포하기

 

🔎 Vite 애플리케이션 설정

• vite의 이미지 폴더 경로: /public/assets/img

vite.config.ts

• base: dist 폴더에 생성된 index.html 에서 참조하는 파일 경로 ./ 로 세팅
  • https://vitejs.dev/config/#base
• assetsInclude: dist 폴더 생성시 .jpg 포함되도록 추가

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
  assetsInclude: ['**/*.jpg'], 
});

 

vite 애플리케이션 빌드

• dist 폴더 생성(배포용 폴더)

$ npm run build

🔎 Docker 배포 준비

Docker 이미지 준비

• DockerFile
• nginx 이미지 통해서 dist/index.html 을 80포트로 연결해줌

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx:latest

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 dist 폴더 생성 /app/dist
RUN mkdir ./dist

# host pc의 현재경로의 dist 폴더를 workdir 의 dist 폴더로 복사
ADD ./dist ./dist

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 default.conf 를 아래 경로에 복사
COPY ./default.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

 

nginx 설정 파일

• default.conf

server {
    #add_header Access-Control-Allow-Origin *;
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root    /app/dist;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

🔎 Docker 배포

Docker Image 생성

• -f : 도커파일 path
• -t : 도커 이미지 이름:태그 (태그 안붙이면 latest)

$ docker build -f DockerFile -t sample .

 

Docker Container 실행

• -d : 백그라운드로 실행
• -p : 포트포워딩 설정
• --name : 컨테이너 이름 설정

$ docker run -d -p 80:80 --name sample sample

 

Docker Container 내부 접속

$ docker exec -it sample /bin/bash