클라우드 임시 prod환경 구축 - 100-hours-a-week/16-Hot6-wiki GitHub Wiki

05/08 임시 Prod 생성.

#bear/document

원래 위 그림처럼 dev환경과 다른 prod환경을 구축할예정이었지만 단기간 배포목적으로 임시적으로 dev 환경과 같은 prod환경 구축하고, 현 단계에서 원래 계획대로 하는 방향으로 진행해보도록 결정했습니다.

결론 -> 임시적으로 dev 환경과 같은 prod환경 구축.

진행과정

dev 환경 구조와 **동일하게 복제하여 임시 prod 환경(MVP)**을 만들어야합니다. 이를 위해 GCP에서 dev 환경을 기준으로 인프라 및 배포 구성을 그대로 복제해야 하므로, 아래와 같이 임시 prod 환경 구성 절차를 순차적으로 나열하겠습니다.

✅ 임시 Prod 환경 구축 순서 (dev 구조 복제 기반)

1. VPC 및 Subnet 복제

dev 환경과 동일한 CIDR 구조를 갖는 VPC 생성
동일한 public / private subnet 구성

⠀

2. Compute Engine 인스턴스 복제

원래는 public ip도 없애고 로드밸런서를 통해 접근 할 수 있도록 만들어야하지만 임시적으로 퍼블릭으로 사용. 향후 재사용 할 수 도 있기 때문에 영역만 private subnet에 위치

dev에서 사용 중인 VM 이미지를 기반으로 새로운 VM 인스턴스 생성
Nginx / Backend(Spring) / AI / Frontend 서버 통합 구성
GCP 방화벽 규칙도 dev와 동일하게 설정 (HTTP/HTTPS 허용 등)

⠀

3. DB 서버 구성

dev에서 사용한 MySQL Compute Engine 구성 방식 동일하게 적용
내부 IP 통신만 가능하도록 private subnet에 위치
DB 초기 schema 마이그레이션 (필요 시 mysqldump → import)

⠀

4. GitHub Actions 연동 및 아티팩트 전달

GitHub Actions에서 dev와 동일한 빌드 및 배포 Job 설정 유지
빌드 아티팩트 전달 경로만 prod로 변경
Cloud Engineer가 수동 다운로드 및 배포

⠀

5. Nginx Reverse Proxy 및 앱 설정

nginx.conf dev와 동일하게 구성
React 프론트엔드와 Backend 라우팅 설정
환경변수(dev → prod) 전환 고려 (.env.prod 등)

nginx 설정

# HTTP -> HTTPS redirect (모든 dev 관련 도메인)
server {
    listen 80;
    server_name onthe-top.com www.onthe-top.com prod-backend.onthe-top.com prod-ai.onthe-top.com;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name onthe-top.com www.onthe-top.com;

    ssl_certificate /etc/letsencrypt/live/prod.backend-onthe-top.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/prod.backend-onthe-top.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|ttf|svg|eot|otf|mp4|webm|ogg|mp3|wav)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }

    location = /index.html {
        add_header Cache-Control "no-store, no-cache, must-revalidate";
    }
}


########################################
# prod-backend.onthe-top.com (Spring BE)
########################################
server {
    listen 443 ssl;
    server_name prod-backend.onthe-top.com;

    ssl_certificate /etc/letsencrypt/live/prod-backend.onthe-top.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/prod-backend.onthe-top.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
    }
}


########################################
# dev-ai.onthe-top.com (FastAPI AI)
########################################
server {
    listen 443 ssl;
    server_name prod-ai.onthe-top.com;

    ssl_certificate /etc/letsencrypt/live/prod-backend.onthe-top.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/prod-backend.onthe-top.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
    }
}

⠀ 물론이죠!Nginx를 다 외우기엔 너무 방대하니까, 실무에서 꼭 기억하면 좋은 핵심만 요약해드릴게요.

✅ Nginx 실무 핵심 요약 5가지

1. 🔧server 블럭 기본 구조

server { listen 80; server_name example.com;

location / {
    # 정적 파일 or proxy 설정
}

} listen, server_name, location은 무조건 기본어떤 설정이든 이 세 블럭 안에서 움직임

2. 🔁 HTTP → HTTPS 리디렉션

server { listen 80; server_name example.com www.example.com; return 301 https://$host$request_uri; } 거의 모든 HTTPS 사이트에서 쓰는 리디렉션 템플릿그냥 외워두면 OK

3. 🔐 SSL 인증서 경로 (Let's Encrypt 기준)

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; 👉 인증서 오류 날 때는 이 경로에 파일이 실제로 존재하는지 확인

4. 🔄 백엔드 연결 proxy_pass 패턴

location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } 프론트에서 백엔드(Spring, FastAPI 등)로 넘길 때 자주 사용

5. ✅ 설정 저장 시 무조건 실행하는 2단계

sudo nginx -t # 설정 문법 검사 sudo systemctl reload nginx # 설정 적용 (재시작 아님) 실수 줄이려면 무조건 습관처럼 실행

6. AWS Route 53 도메인 연결 (선택)

dev와 유사하게 prod 서브도메인 할당 예: www.onthe-top.com(cname)->onthetop.com->주소
A 레코드 또는 CNAME 등록 (임시 환경 접근 목적)

onthe-top.com과 www.onthe-top.com 연결 요약

항목	설명
onthe-top.com	메인 도메인. A 레코드로 IP 주소나 CloudFront, ALB에 직접 연결
www.onthe-top.com	서브도메인. 보통 CNAME으로 onthe-top.com을 따라가게 설정
A 레코드	도메인 → IP 주소로 직접 연결 (예: 3.123.45.67)
CNAME 레코드	도메인 → 다른 도메인 이름을 따라가게 함 (예: www → onthe-top.com)

왜www는 CNAME으로 하는 게 좋을까요?

www는 보통 별칭(별명) 같은 역할
IP가 바뀌어도 onthe-top.com만 바꾸면 www도 자동으로 따라감
관리가 쉽고 실수 줄일 수 있음

⠀

최종 구성 예시

도메인	레코드 타입	값
onthe-top.com	A (또는 Alias)	서버 IP or CloudFront 도메인
www.onthe-top.com	CNAME	onthe-top.com

⠀

7. 최종 점검

프론트엔드 접근 및 화면 확인
백엔드 API 정상 동작 확인
AI 모듈 응답 정상 여부 확인
DB 연결 및 데이터 조회 테스트