[Genie95] #6. 도메인을 연결하였지만 Nginx 기본 화면만 나오는 경우는?

React로 제작한 포트폴리오 웹사이트를 AWS EC2에 배포하고, 구매한 도메인 genie95.net에 연결하였습니다. 그러나 도메인에 접속해보니 제 포트폴리오가 아닌, Nginx의 기본 페이지가 보였습니다. 이 문제를 해결하기 위해 어떤 과정을 거쳤고, 어떻게 완전히 연결에 성공했는지 기록해보았습니다.

---

문제 상황 요약

• AWS EC2 인스턴스에 Nginx 설치 및 실행 완료
• React 앱 개발 완료
• 도메인 genie95.net 구매 후 A 레코드 설정 완료
• EC2 보안 그룹에서 80, 443 포트 허용
• 도메인 접속 시 Nginx 기본 페이지만 노출

 

원인 분석

🔸 React 앱이 빌드되지 않음

• EC2 서버에서 npm run build 명령어를 실행했지만, 진행이 멈춘 것처럼 보였습니다.
• 실제로는 EC2의 메모리 부족(OOM)으로 인해 빌드가 실패한 것이었습니다.

🔸 Nginx가 서빙할 파일이 없음

• Nginx는 기본적으로 /var/www/html/index.html 파일을 보여줍니다.
• 하지만 해당 경로에 React의 빌드 결과물이 없었습니다.

🔸 CI/CD 자동 배포 실패

• GitHub Actions를 이용해 CI/CD를 설정했으나, npm run build 단계에서 실패하였습니다.
• 일부 import 에러와 swap 메모리 미설정 등의 이유로 인해 빌드가 중단되었습니다.

 

문제 해결 과정

✅ 1단계: 로컬에서 React 빌드 후 수동 업로드

 

npm run build
scp -i genie95.pem -r build/* ubuntu@EC2_IP:/tmp/genie95/

 

EC2에 접속 후:

sudo rm -rf /var/www/html/*
sudo cp -r /tmp/genie95/* /var/www/html/
sudo systemctl restart nginx

 

이 과정에서 로컬에서 빌드한 React를 /var/www/html/ 경로로 옮겨 Nginx에서 빌드할 수 있는 파일을 만들어줍니다.

✅ 2단계: CI/CD 자동화 구성

• GitHub Actions에 deploy.yml 파일을 작성하였습니다.
• appleboy/ssh-action을 사용해 EC2에 SSH 접속 후, 코드 pull → 빌드 → 배포를 자동화하였습니다.

하지만 npm run build 중 Out Of Memory(OOM) 에러가 발생하며 CI가 중단되었습니다.

Out Of Memory(OOM)란?
컴퓨터 시스템에서 사용 가능한 메모리가 부족하여 발생하는 현상입니다. 주로 과도한 자원을 요구하거나 메모리 누수, 구성 오류 등으로 발생합니다.

✅ 3단계: EC2에 swap 메모리 추가

 

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

 

 

Swap 메모리는 프로그램이나 프로세스 중에 사용 가능한 RAM보다 많은 메모리가 필요한 경우 활용하는 비활성 메모리 페이지입니다. Swap 메모리 추가는 EC2의 Instance type을 업그레이드하지 않고 가장 빠르게 메모리를 확보할 수 있는 방법 중 하나입니다.

 

전체 CI/CD 흐름 요약 다이어그램 ✨

[GitHub 리포지토리]
   |
   | ① main 브랜치에 push
   ↓
[GitHub Actions (deploy.yml)]
   |
   | ② EC2에 SSH 접속
   ↓
[EC2 서버]
   |
   | ③ /home/ubuntu/portfolio로 이동
   | ④ git pull (또는 reset)
   | ⑤ npm install
   | ⑥ npm run build → /build 폴더 생성
   ↓
[웹 루트: /var/www/html]
   ← ⑦ 빌드된 정적 파일 복사
   ↓
[Nginx]
   ← ⑧ genie95.net 방문 시 index.html 제공

GitHub → EC2 → Nginx → 사용자 브라우저까지 연결되는 완전한 파이프라인을 구축했습니다 💪

 

도메인 연결 체크리스트 ✅

• 도메인 A 레코드가 EC2 퍼블릭 IP로 연결되어 있음
• EC2 보안 그룹에서 80, 443 포트 허용됨
• React 앱이 정상적으로 빌드됨
• 빌드 파일이 /var/www/html에 존재함
• Nginx 설정에 문제 없음
• CI/CD 작동 후 genie95.net에 자동 반영됨

 

---

마무리하며 📝

처음에는 단순한 도메인 연결 문제라고 생각했지만, 실제로는 React 앱의 빌드/배포, 서버 메모리 설정, CI 구성 등 다양한 요소가 얽혀 있었습니다. 문제들을 하나씩 파악하고 해결하는 과정에서 많은 것을 배울 수 있었고, genie95.net이 완성되었을 때의 성취감은 정말 컸습니다.

이 글이 비슷한 문제를 겪고 계신 분들께 도움이 되기를 진심으로 바랍니다!