도커 프론트엔드 소스코드 배포

Next.js 프로젝트 준비

 

Docker-compose로 배포 구성 준비

 

1. 3000번 포트로 Next.js 프레임워크 서비스 

FROM node:18

WORKDIR /app/homepage
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["bash", "-c", "yarn build && yarn start"]

 

2. nginx 80포트와 연결을 위해 nginx 컨테이너 준비

FROM nginx:latest
USER root
RUN rm /etc/nginx/nginx.conf
COPY ./infra/nginx/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

 

3. nginx.conf (주요 내용만 추가)

http {
    upstream frontend {
      server frontend:3000;
    }
    server {
        listen 80;
        location / {
          proxy_pass http://frontend;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

 

4. docker run으로 80 포트 연결하여 컨테이너 실행 후 서비스