운영서버와 개발서버 분리하기
개발서버와 운영서버를 분리한 이유, 과정에 대해서 설명합니다.
개발서버, 운영서버 분리 이유
개발서버가 필요해진 이유는 부하테스트를 운영서버에서는 할 수 없었기 때문이다. 부하테스트 중에는 서버가 내려갈 수도 있는데 그렇게 되면 그 피해는 사용자가 보고 욕은 내가 먹는다. 운영서버에서 이미지하나 교체하는데 그새 왜 이렇게 로딩이 뜨냐고 구글 폼 응답이 3개나 온적이 있다. 사용자의 불편함도 막고, 나에게 오는 불만도 제거하기 위해서 개발서버가 꼭 필요하다. 또, 새로운 기능을 개발할 때도 개발서버에 먼저 올려서 제대로 동작하는지 확인하고 운영서버로 올리는 용도로도 사용할 수 있다.
과정
백엔드
application.yml 수정
먼저 스프링 설정정보를 수정해야한다. https를 사용하면서 허용되는 도메인에만 쿠키를 전달하는 것을 허용하고 있기 때문이다. dev 프로필을 새롭게 만들고, 보안관련설정을 새롭게 해주었다.
1
2
3
4
5
6
7
8
9
10
11
12
# 추가된 내용
spring:
config:
activate:
on-profile: dev # dev 프로필 사용
server:
servlet:
session:
cookie:
same-site: none # 쿠키의 허용 범위 정책을 설정
secure: true # HTTPS에서 통신할 지 여부
domain: dev.gongnomok.site # 쿠키의 도메인 설정
개발서버 전용 Dockerfile
개발전용으로 사용할 Dockerfile을 새롭게 만들어야한다. 기존에 사용하던 Dockerfile에서 .dev 확장자를 붙여 Dockerfile.dev라는 이름을 지어주었다. 개발서버에서 실행시킬 때는 dev 프로필로 스프링 부트 앱을 실행해야하기 때문에 애플리케이션을 실행시킬 때 자바 시스템 속성으로 프로필 정보를 전달해주었다.
1
2
3
4
5
6
7
8
9
FROM openjdk:17-oracle as builder
...
RUN ./gradlew clean build
FROM openjdk:17-oracle
COPY /build/libs/gongnomok-app.jar ./app-dev-1.1.4.jar
# dev 프로필로 실행
ENTRYPOINT [ "java", "-Dspring.profiles.active=dev", "-jar", "/app-dev-1.1.4.jar" ]
VOLUME [ "/tmp" ]
프론트엔드
백엔드 요청서버 URI 변경
개발서버에서는 운영서버(gongnomok.site)가 아닌 개발서버(dev.gongnomok.site)로 백엔드 요청을 보내야하기 때문에 요청 URI를 수정해주었다. 그런데 개발 서버를 만들 때마다 백엔드 요청주소를 수동으로 고치고 이미지를 빌드하는 방식을 사용하였기 때문에 자동화가 되지 못한 감이 있다. 수동으로 고치지않고 이미지가 빌드되는 환경에 따라서 어떤 URI를 사용할지 동적으로 결정하는 방법이 있는지 좀더 찾아봐야할 것 같다.
nginx 정보 수정
내 프로젝트에서는 Nginx이미지와 React 프로젝트가 빌드된 결과가 하나의 컨테이너에서 돌아간다. 따라서 Nginx 설정정보를 수정해주어야한다. 개발서버에서 사용할 설정파일이름을 default-dev.conf로 정해주었다. 기존의 설정파일 default.conf 와 다른 점은 서버 도메인 이름 뿐이다. 리다이렉트 주소, 프록시 주소를 gongnomok.site에서 dev.gongnomok.site로 변경해주었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
server {
listen 80;
server_name dev.gongnomok.site;
location / {
return 301 https://dev.gongnomok.site$request_uri;
}
}
server {
listen 443 ssl;
server_name dev.gongnomok.site;
ssl_certificate /etc/secret/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/secret/privkey.pem; # managed by Certbot
include /etc/secret/options-ssl-nginx.conf; # managed by Certbot
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://dev.gongnomok.site:8080;
}
}
개발서버 전용 Dockerfile
백엔드 이미지와 마찬가지로 프론트엔드에서도 개발서버 전용 Dockerfile을 새롭게 정의해주어야한다. 마찬가지로 Dockerfile.dev 라는 이름으로 새롭게 만들어주었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
FROM node:20.11.0-bullseye as builder
WORKDIR /frontend
COPY . .
RUN npm install
RUN npm run build
FROM nginx:1.18.0-alpine
RUN rm /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/conf.d/*
COPY ./default-dev.conf /etc/nginx/conf.d/
...
COPY --from=builder frontend/dist /usr/share/nginx/html
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
기존과 달라진 점은 운영서버에서 사용되는 nginx 설정정보 파일이다. default.conf 파일 대신 개발 서버에서 사용되는 default-dev.conf 설정 정보를 복사해주었다.
도커 컴포즈
개발서버용 컴포즈 파일 작성
백엔드 서버와 프론트엔드 서버에서 사용되는 Dockerfile의 이름이 달라졌고, 운영서버와 사용되는 이미지의 이름도 구분해주어야한다. docker-compose-dev.yml 이라는 이름으로 새로운 도커 컴포즈 파일을 작성해주었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
version: "1.0.0"
services:
back:
platform: linux/amd64
build:
context: ./backend
dockerfile: Dockerfile.dev
image: sjhn/gongnomok-backend:dev-1.1.4
restart: always
ports:
- 8080:8080
front:
platform: linux/amd64
build:
context: ./frontend
dockerfile: Dockerfile.dev
image: sjhn/gongnomok-frontend:dev-1.1.3
restart: always
ports:
- 80:80
- 443:443
빌드 & 푸시
새로운 도커 컴포즈 파일을 사용해서 빌드하고 푸시해야한다. docker compose 명령의 -f 옵션을 사용해서 어떤 도커 컴포즈 파일을 반영할지 결정할 수 있다.
1
2
3
4
5
6
#!/bin/sh
# 이미지 빌드
docker compose -f docker-compose-dev.yml build
# 이미지 푸시
docker compose -f docker-compose-dev.yml push
풀 & 컨테이너 실행
1
2
3
4
5
6
7
8
#!/bin/sh
# 기존에 동작하던 컨테이너 종료
sudo docker compose -f docker-compose-dev.yml stop
# 새로운 도커 이미지 풀
sudo docker compose -f docker-compose-dev.yml pull
# 새로운 도커 컨테이너 백그라운드로 실행
sudo docker compose -f docker-compose-dev.yml up -d