우당탕탕 개발일지

[Server] 한 개의 ip에 두 개의 웹페이지 배포하기 본문

Server

[Server] 한 개의 ip에 두 개의 웹페이지 배포하기

devchop 2025. 5. 24. 11:26

 

프로젝트는 github에 private 으로 올라와있다.
가비아에서 도메인을 구매했다.
오늘은 기존에 있는 IP에 새로운 도메인을 연결하여 두개의 웹사이트를 배포해본다.

1. GitHub 프로젝트 서버에 clone 하기

React 프로젝트는 일반적으로 /var/www/your-project-name 아래에 clone 한다. 폴더이름은 수정가능하다.

cd /var/www/
git clone https://github.com/your-username/your-repo.git your-domain-site
cd your-domain-site

 

 

2. 클론한 프로젝트 빌드하기

 

서버에 Node.js 가 설치되어있어야 한다. 웹사이트가 이미 한개 배포되어 있다면 설치되어있을 것이다.
프로젝트를 빌드한다. 폴더 안에 build 폴더가 생성되어야한다.

##Nodejs가 설치되어 있지 않다면
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && apt install -y nodejs

 

npm install
npm run build

 

3. Nginx 설정하기

한 IP에 두개의 웹페이지를 배포하기 때문에, ngnix 설정이 중요하다. 페이지별로 /etc/nginx/sites-available/projectA 이런식으로 설정파일이 필요하다. 또한, sites-enabled 에 최종적으로 적용되어야 한다.

 

설정파일 만들기

nano /etc/nginx/sites-available/your-domain

 

server {
    listen 80;
    server_name your-domain.com www.your-domain.com; ##사용할 도메인

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

server {
    listen 443 ssl;
    server_name your-domain.com www.your-domain.com; ##사용할 도메인
 
    root /var/www/your-domain-site/build; ##build파일 경로
    index index.html;
 
    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem; ##https 설정
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem; ##https 설정

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

 

 

nginx 설정파일 적용

 

ln -s /etc/nginx/sites-available/your-domain /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

4. 도메인 연결하기

 1) DigitalOcean에서 서버 준비

  • Droplet 생성 (Ubuntu 22.04 추천)
  • 생성 후 공인 IP 주소 확보

2) 가비아 도메인 DNS 설정

  1. 가비아 로그인 → 도메인 관리
  2. 도메인 선택 → DNS 관리 또는 네임서버 설정 진입
  3. A 레코드 설정:
    • @ → Droplet IP 주소
    • www → Droplet IP 주소

저장 후 전파까지 시간이 소요될 수 있다. 

🔐 3) HTTPS 인증서 발급 (Let’s Encrypt)

certbot이 자동으로 HTTPS 설정까지 완료한다.

apt install certbot python3-certbot-nginx -y
certbot --nginx -d your-domain.com -d www.your-domain.com

 

프로젝트 수정 후에는 아래처럼 재배포:

Nginx는 정적 파일만 제공하므로 build만 갱신하면 자동 반영된다.

cd /var/www/your-domain-site
git pull origin main
npm run build

 

서당개 3년이면 풍월을 읋는다고, 계속하다보니 뭐가뭔지 대충 감이오기시작하는군...