Docker-compose Next.js spring-boot 배포하기

Dockerfile을 작성해주었다. 

FROM node:18.19.1 AS builder

# 작업 디렉토리 /app 설정
WORKDIR /app

# 컨테이너에 package.json와 package-lock.json 파이을 복사한다. 
COPY package.json .

# npm 설치
RUN npm install

COPY . .

# Next.js를 빌드한다.
RUN npm run build

# 이미지 생성
FROM nginx

# 오픈할 포트를 적어둔다.
EXPOSE 3000

# default.conf을 /etc/nginx/conf.d/ 경로에 있는 default.conf에 복사한다.
COPY ./default.conf /etc/nginx/conf.d/default.conf

COPY --from=builder app/out /usr/share/nginx/html

 

해당 폴더는 리액트를 빌드해주는 폴더 안에 넣어주어 작성하였다. 

이제 default.conf를 작성해주자.

디렉토리 위치가 굉장히 중요한데 각자 마다 디렉토리 위치는 다를 테니 각자에 맞는 디렉토리로 설정해주기

 

 

default.conf

server {
    listen 3000;

    location / {

        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

 

nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name photocard.site www.photocard.site;

        location /.well-known/acme-challenge/ {
            root /var/www/certbot;
            allow all;
        }

        location / {
            return 301 https://$host$request_uri;
        }
    }
    server {
        listen 443 ssl;
        server_name 도메인;

        ssl_certificate /etc/letsencrypt/live/photocard.site/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/photocard.site/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

        location / {
           proxy_pass http://front:3000;
           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;
        }

        location /api {
            proxy_pass http://back:8080;
            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;
        }

    }
}

conf파일을 만들어 nginx.conf를 작성해주었음.  프론트 백엔드 포트를 연결해주었다. 

 

services: #이 항목 밑에 실행하려는 컨테이너들을 정의

  server:
    container_name: back
    image: hanseu9839/back
    expose:
      - 8080
    ports:
      - 8080:8080

  front:
    container_name: front
    image: hanseu9839/front
    expose:
      - "3000:80"

  nginx:
    image: nginx:latest
    restart: unless-stopped
    volumes:
      - ./conf/nginx.conf:/etc/nginx/nginx.conf
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    ports:
      - 80:80
      - 443:443
    depends_on:
      - server
      - front

  certbot:
    image: certbot/certbot
    restart: unless-stopped
    volumes:
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"

 

이렇게까지 해주어 https로 연결되도록 만들어주었음. 

 

이후에 각각의 dockerfile에서 

 

docker build -t hanseu9839/front .

 

docker push hanseu9839/back

 

이런식으로 각각 front , back 둘 다 build를 해주었다. 

 

docker compose up -d

도커를 다시 띄워주었다. 

 

이렇게 해주면 웹사이트가 정상적으로 작동한다. 

 

물론 3000번 포트를 안 열어주어 어딘가에서 설정을 잘못한 줄 알고 진짜 한참동안 해매다가 결국엔 인바운드 , 아웃바운드 설정을 안해준 것을 깨닫고... 해결하였다고.. 진짜 이거 때문에 하루정도 고생했다. 왜냐면 설정해주었다고 생각하고 계속해서 삽질만 반복했기 때문이다..

여러분도 안된다면 차분히 해결하자 나처럼 코에 김내며 코딩해봐야 결국 해결 못한다. 추가적으로 너무 코딩만 하는거 같아 잠시 동안 여행을 다녀오니 바로 1시간만에 해결해버렸다!