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에 도메인 입력하시면 됩니다.
짜잔 적용이 완료되었습니다