드디어 드림쇼콰이어 공식 홈페이지를 구축하고 배포까지 완료하였다.
과정은 AWS EC2 인스턴스 생성부터 리눅스 서버 환경 세팅, 그리고 백엔드(Spring Boot)와 프론트엔드(Next.js)를 구동하고 도메인 연결까지.
해당 과정을 잊지 않도록 여기 기록해둔다.
AWS EC2 인스턴스 생성 및 보안 설정
AWS 콘솔에서 서버(컴퓨터)를 빌리는 과정이다.
1. 인스턴스 생성
- OS : Amazon Linux 2023 (또는 Ubuntu 22.04 LTS)
- 인스턴스 유형 : t3.small (프론트/백엔드를 동시에 돌리기 위해 t2.micro보다 넉넉하게 선택)
- 키 페어 :
.pem파일 다운로드 (잃어버리면 안 됨!)
2. 보안 그룹(Security Group) 설정 (방화벽)
외부에서 접속할 수 있도록 포트를 열어준다. 인바운드 규칙을 아래와 같이 설정했다.
| 유형 | 프로토콜 | 포트 범위 | 소스 | 설명 |
|---|---|---|---|---|
| SSH | TCP | 22 | 내 IP | 원격 접속용 |
| HTTP | TCP | 80 | 0.0.0.0/0 | 웹 접속 (자동 리다이렉트용) |
| HTTPS | TCP | 443 | 0.0.0.0/0 | 보안 웹 접속 (메인) |
| 사용자 지정 TCP | TCP | 8080 | 0.0.0.0/0 | Spring Boot API (테스트용, 추후 차단 권장) |
| 사용자 지정 TCP | TCP | 3000 | 0.0.0.0/0 | Next.js (테스트용, 추후 차단 권장) |
리눅스 서버 환경 세팅 (SSH 접속 후)
터미널을 열고 다운로드 받은 키 페어(.pem)가 있는 경로에서 SSH로 접속한다.
# 키 파일 권한 변경 (필수)
chmod 400 key-pair-name.pem
# SSH 접속
ssh -i "key-pair-name.pem" ec2-user@ec2-xx-xx-xx-xx.ap-northeast-2.compute.amazonaws.com1. 패키지 업데이트 및 타임존 설정
서버 시간을 한국 시간(KST)으로 맞춘다.
# 패키지 매니저 업데이트
sudo yum update -y
# 타임존 변경 (UTC -> KST)
sudo timedatectl set-timezone Asia/Seoul
date # 변경 확인2. Java 17 설치 (Backend)
Spring Boot 구동을 위해 JDK 17을 설치한다.
# Amazon Corretto 17 설치
sudo yum install java-17-amazon-corretto -y
# 버전 확인
java -version3. Node.js & Git 설치 (Frontend)
Next.js 빌드와 소스 코드 관리를 위해 설치한다.
# Git 설치
sudo yum install git -y
# Node.js 18.x 버전 설치 (버전은 프로젝트에 맞게)
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
# 버전 확인
node -v
npm -v백엔드 배포 (Spring Boot)
1. 프로젝트 클론 및 빌드
# 프로젝트 클론
git clone https://github.com/username/dreamshow-backend.git
cd dreamshow-backend
# 실행 권한 부여
chmod +x gradlew
# 빌드 (테스트 제외하고 빠르게 빌드)
./gradlew build -x test2. 백그라운드 실행 (nohup)
터미널을 꺼도 서버가 죽지 않도록 nohup을 사용해 백그라운드에서 실행한다.
# build/libs 폴더에 생성된 jar 파일 실행
# 로그는 nohup.out에 저장됨
nohup java -jar build/libs/dreamshow-api.jar &
# 실행 확인 (로그 보기)
tail -f nohup.out프론트엔드 배포 (Next.js)
1. 프로젝트 클론 및 의존성 설치
cd ~
git clone https://github.com/username/dreamshow-frontend.git
cd dreamshow-frontend
# 패키지 설치
npm install
# 프로덕션 빌드
npm run build2. PM2로 무중단 실행
Node.js 프로세스 관리 도구인 PM2를 사용하여 서버를 관리한다.
# PM2 전역 설치
sudo npm install -g pm2
# Next.js 실행 (포트 3000)
pm2 start npm --name "next-app" -- start
# PM2 상태 확인
pm2 list
pm2 logs "next-app"Nginx 리버스 프록시 및 SSL 적용
사용자가 8080이나 3000 포트를 입력하지 않고 도메인만으로 접속하게 하기 위해 Nginx를 웹 서버로 앞단에 둔다.
1. Nginx 설치 및 설정
# Nginx 설치
sudo yum install nginx -y
# 설정 파일 수정
sudo vi /etc/nginx/nginx.confnginx.conf 내부의 server 블록을 수정하여 포트 포워딩을 설정한다. (프론트엔드 3000번으로 연결)
server {
listen 80;
server_name dreamshowchoir.ulsan.kr; # 도메인 입력
location / {
proxy_pass http://localhost:3000; # Next.js로 토스
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# API 요청은 백엔드로 토스 (선택 사항)
location /api/ {
proxy_pass http://localhost:8080;
}
}# 설정 문법 검사 및 재시작
sudo nginx -t
sudo systemctl restart nginx2. Certbot으로 무료 SSL(HTTPS) 인증서 발급
보안 접속을 위해 Let's Encrypt 인증서를 적용한다.
# certbot 설치 (pip 이용)
sudo dnf install python3 augeas-libs -y
sudo python3 -m venv /opt/certbot/
sudo /opt/certbot/bin/pip install --upgrade pip
sudo /opt/certbot/bin/pip install certbot certbot-nginx
# 심볼릭 링크 생성
sudo ln -s /opt/certbot/bin/certbot /usr/bin/certbot
# 인증서 발급 및 Nginx 설정 자동 변경
sudo certbot --nginx이메일 주소를 입력하고 약관에 동의하면 자동으로 HTTPS 설정이 완료됩니다.
마무리
이제 브라우저 주소창에 https://dreamshowchoir.ulsan.kr을 입력하면 안전하게 자물쇠가 잠긴 홈페이지를 볼 수 있다.
