docker-compose, ELB를 활용한 Nuxt3 배포

김성훈·2022년 11월 20일
0
post-thumbnail

Nuxt3 설치

Nuxt3 설치
$ npx nuxi init nuxt3-docker-app

$ cd nuxt3-docker-app
$ npm install

Nginx Proxy 폴더 및 파일을 생성합니다

/docker/nginx-proxy/docker-compose.yml

/docker/nginx-proxy/docker-compose.yml

version: '2'
services:
  nginx-proxy:
    image: nginxproxy/nginx-proxy
    container_name: nginx-proxy
    ports:
      - "80:80"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - /var/log/docker/nginx/config:/etc/nginx/conf.d
    networks:
      - nginx-proxy
networks:
  nginx-proxy:
    name: nginx-proxy

Dockerfile 생성

/Dockerfile

# see https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact
ARG NODE_VERSION=node:16.14.2

FROM $NODE_VERSION AS dependency-base

# create destination directory
RUN mkdir -p /app
WORKDIR /app

# copy the app, note .dockerignore
COPY package.json .
COPY package-lock.json .
RUN npm ci

FROM dependency-base AS production-base

# build will also take care of building
# if necessary
COPY . .
RUN npm run build

FROM $NODE_VERSION-slim AS production

COPY --from=production-base /app/.output /app/.output

# Service hostname
ENV NUXT_HOST=0.0.0.0

# Service version
ARG NUXT_APP_VERSION
ENV NUXT_APP_VERSION=${NUXT_APP_VERSION}

# Run in production mode
ENV NODE_ENV=production

# start the app
CMD [ "node", "/app/.output/server/index.mjs" ]

docker-compose 파일생성
VIRTUAL_HOST에 자신이 설정한 도메인을 입력합니다

/docker-compose.yml

version: '3.7'
services:
  app:
    build:
      context: ./
      dockerfile: Dockerfile
    container_name: nuxt-docker-app
    restart: unless-stopped
    ports:
      - "3000:3000"
    expose:
      - "3000"
    environment:
      - VIRTUAL_HOST=user156.com
      - VIRTUAL_PORT=3000

networks:
  default:
    external:
      name: nginx-proxy

디렉토리 구조

아마존 AWS EC2 접속합니다
폴더구조는 /home/nuxt3-docker-app에 위치해 있습니다

Nginx-Proxy 설정
$ cd /home/nuxt3-docker-app/docker/nginx-proxy
$ docker network create nginx-proxy
$ docker-compose up -d --build

Nuxt3 빌드
$ cd /home/nuxt3-docker-app
$ docker-compose up -d --build

${ip}:3000 접속해봅니다

Certificate Manger
Certificate Manger에 들어가서 인증서를 요청합니다


연결해 놓은 도메인을 적습니다. 만약 와일드 카드로 다수의 도메인을 적용하고 싶으면 앞에 *.user156.com 형식을 적습니다

인증서 ID선택

CNAME값을 추가하겠습니다

Routes 53에서 레코드를 생성합니다

30분내에 인증서 등록이 완료됩니다

Route 53에 도메인을 연결해 놓았고 ELB를 활용하여 SSL을 적용해 보겠습니다

EC2에 접속하여 대상그룹을 선택합니다

로드밸런서를 생성합니다

! 주의
security groups 에서 반드시 default정책을 쓰면 안되고 따로 설정한 보안그룹을 선택해야 합니다.
인바운드 규칙에서 모든 트래픽 허용을 선택한 경우 로드밸런스가 작동하지 않습니다.

http로 접속시 https로 리다이렉팅 설정

로드밸런서에 들어가서 이름을 선택합니다

Route53에 로드밸런스 적용
레코드를 생성합니다
서브도메인을 설정하시면 subdomain에 도메인 입력하시면 됩니다.

짜잔 적용이 완료되었습니다

0개의 댓글