Svelte - Docker + Nginx 를 이용한 배포하기

Svelte 배포시 Docker를 활용한 방법을 정리해보고자 한다.
Svelte는 Build를 구성하였을때 최적화하여 Output을 만들어 주기 때문에 여기에 웹서비스를 함께 구성하면 효과적이다.

이때 함께 사용할 만한 옵션으로 Nginx가 효율성이 높다.

그럼 먼저 테스트 Application을 템플릿을 통해 구성하도록 하자.

(본 작업은 만약 구성한 Svelte 앱이 없는 경우 최초에 진행하는 작업이다. 별도의 개발한 프로젝트가 있다면 생략한다.)

npx degit sveltejs/template svelte_test
cd svelte_test

 

Dockerfile 생성

Dockerfile 구성은 어렵지 않다. 아래와 같이 package.json와 package-lock.json 파일을 복사한다.

그리고 npm 설치 및 빌드를 통해 build 경로로 운영에 필요한 파일을 생성한다.

이후 nginx html 경로로 build를 진행하도록 한다. 

FROM node:12 AS build

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./
RUN npm run build

FROM nginx:1.19-alpine
COPY --from=build /app/public /usr/share/nginx/html

아후 docker build를 통해 Docker Image를 생성한다.

docker build . -t svelte_test

이후 잘 실행되는지, 아래 명령과 같이 확인할 수 있다.

docker run --rm --name=svelte_test -p 5000:80 svelte_test