[Genie95] #1. AWS EC2 기반 포트폴리오 웹사이트 구축 & 자동 배포 과정

오늘은 AWS EC2를 활용한 포트폴리오 웹사이트 구축과 GitHub Actions를 이용한 자동 배포 시스템을 설정하였습니다. 처음 진행하면서 여러 문제가 발생했지만, 하나씩 해결하며 최종적으로 로컬에서 GitHub에 코드 푸시 → EC2에 자동 배포되는 환경을 완성하였습니다. 이 과정에서 발생했던 주요 문제와 해결 방법을 공유합니다.

---

EC2 vs S3+CloudFront: 왜 EC2를 선택했을까?

웹사이트를 배포하는 방법에는 크게 두 가지 옵션이 있습니다.

✅ AWS EC2 (Elastic Compute Cloud)

• 서버를 직접 운영하며 원하는 환경을 구축 가능
• Nginx/Apache를 이용해 동적 콘텐츠 제공 가능
• SSH를 통한 직접 접근 및 설정 가능
• CI/CD 자동 배포 시스템 구축 가능

✅ AWS S3 + CloudFront (정적 웹사이트 호스팅)

• HTML/CSS/JavaScript 파일을 정적 파일로 호스팅
• 서버 유지보수가 필요 없음 (Low Maintenance)
• CloudFront를 이용해 글로벌 CDN 적용 가능

📌 EC2를 선택한 이유:

• Windows 95/98 테마의 포트폴리오 웹사이트는 단순한 정적 페이지가 아닌, 추후 백엔드 연동 가능성을 고려해야 합니다.
• 직접 서버 환경을 운영하면서 Linux, 웹서버 설정 등의 경험을 쌓기 위해 EC2를 선택하였습니다.
• GitHub Actions와 연계한 자동 배포 시스템 구축이 필요하므로 EC2를 선택하였습니다.

 

AWS EC2 웹사이트 배포 5단계

1단계: AWS EC2 인스턴스 생성

우선 Ubuntu 기반 EC2 인스턴스를 생성하였고 SSH 접속을 설정하였습니다. 모든 IP를 허용하기 위해 HTTP (port 80) & HTTPS (port 443)를 선택합니다.

 

SSH 접속 이후에는 (1) 시스템 패키지 업데이트 후 (2) UFW 활성화로 방화벽을 설정합니다 (default 값이 비활성화).

# SSH 접속
ssh -i "YOUR_KEY.pem" ubuntu@YOUR_EC2_PUBLIC_IP

# 시스템 패키지 업데이트
sudo apt update && sudo apt upgrade -y

# 방화벽 설정 (UFW 활성화)
sudo ufw allow OpenSSH
sudo ufw enable

 

마켓 쉐어가 가장 높은 웹 서버 프로그램인 Nginx를 이용하여 웹 서버를 설치하고 실행하였습니다.

# Nginx 설치
sudo apt install nginx -y

# Nginx 서비스 시작 및 부팅 시 자동 실행 설정
sudo systemctl start nginx
sudo systemctl enable nginx

# 방화벽에서 HTTP(80) 및 HTTPS(443) 허용
sudo ufw allow 'Nginx Full'

 

설치 후, 브라우저에서 http://YOUR_EC2_PUBLIC_IP에 접속하면 아래와 같이 Nginx 기본 페이지가 나옵니다.

 

2단계: 도메인 연결 및 SSL 인증서 설정

 

Route 53에서 도메인을 등록하고 EC2 IP를 A 레코드에 연결합니다. 저는 genie95.net 라는 도메인을 Route 53에서 구입하였습니다.

 

참고로 EC2 IP는 인스턴스를 재부팅할 시에 Public IP가 변경됩니다. 따라서 이를 방지하기 위해 Elastic IP를 할당하는 방법이 있습니다. 

# IP 확인 방법
curl ifconfig.me

 

이후 EC2 PUBLIC IP를 A 레코드에 연결합니다.

 

다음 Let's Encrypt를 사용하여 SSL 인증서를 발급하고 HTTPS(보안)을 적용합니다. Certbot을 이용해 자동 갱신 설정도 할 수 있습니다.

# Certbot 설치 (무료 SSL 인증서)
sudo apt install certbot python3-certbot-nginx -y

# SSL 인증서 발급
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# 인증서 갱신 자동화 설정
sudo certbot renew --dry-run

 

저는 이 과정에서 SSL 인증서 발급이 안되는 현상이 지속됐습니다. 에러 원인은 도메인의 A 레코드가 올바르게 설정되지 않았거나, DNS전파가 아직 완료되지 않아서 발생하는 문제였습니다.

제 경우는 www 서브도메인을 A 레코드에 설정하지 않아서 발생한 현상이었습니다. 서브도메인을 설정한 이후 자연스레 해소되었습니다.

 

만약 서브도메인을 등록하였음에도 동일한 현상이 일어날 경우, DNS 전파 상태를 먼저 확인해볼 수 있습니다.

nslookup genie95.net
nslookup www.genie95.net

dig A genie95.net
dig A www.genie95.net

 

위 명령어를 실행하여 A 레코드가 제대로 등록되었는지 확인할 수 있습니다. 차선책으로는 A 레코드 대신 CNAME 레코드를 사용할 수도 있습니다.

 

❗️A 레코드 vs CNAME 레코드 차이점

	A (Address) 레코드	CNAME (Canonical) 레코드
목적	도메인을 IP 주소로 직접 연결	도메인을 다른 도메인으로 연결
예시	genie95.net -> 3.124.53.99	www.genie95.net  -> genie95.net
사용 사례	루트 도메인에 사용됨	서브 도메인에 사용됨
변경 용이성	IP 변경 시 직접 수정 필요	참조하는 도메인만 변경하면 됨
성능	직접 연결로 빠름	다른 도메인을 거치므로 A 레코드보다 느림
Elastic IP 사용 가능 여부	가능	불가능

3단계: GitHub Actions를 통한 CI/CD 구축

CI/CD(Continuous Integration & Continuous Deploy/Delivery) 파이프라인을 구축하여 EC2 서버에 접속하지 않고도 Git에 저장된 내용이 자동으로 배포되도록 설정하였습니다. 이를 위해 Github Actions + SSH 배포 스크립트를 활용하였습니다.

 

자동 배포 흐름은 다음과 같습니다.

• 코드를 Github에 Push
• GitHub Actions 실행
  • SSH를 통해 EC2 서버에 접속
  • git pull origin main을 실행하여 최신 코드를 가져옴
  • sudo systemctl restart nginx 를 실행하여 웹서버를 재시작함
• 배포 완료 후 자동으로 웹사이트에 반영됨

GitHub Actions에 설정한 파일(deploy.yml)은 다음과 같습니다.

name: Deploy to EC2

on:
  push:
    branches:
      - main  # main 브랜치에 푸시될 때 실행

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Deploy to EC2
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ubuntu
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            cd ~/portfolio
            git pull origin main
            sudo systemctl restart nginx

• appleboy/ssh-action@master -> GitHub Actions에서 EC2에 SSH 접속하여 명령 실행
• $EC2_HOST, $EC2_SSH_KEY -> GitHub Secrets에 저장된 EC2 IP와 SSH Key 사용

 

EC2 서버에 저장되어 있는 deploy.sh 스크립트는 다음과 같습니다 (~/portfolio/deploy.sh)

#!/bin/bash

# 프로젝트 폴더로 이동
cd ~/portfolio || exit

# git에서 최신 코드 가져오기
echo "Pulling latest changes from Github..."
git pull origin main

# 필요한 패키지 설치
echo "Installing dependencies ..."
npm install

# 빌드 실행 (React 프로젝트인 경우)
echo "Building project ..."
npm run build

# nginx 다시 시작
echo "restarting Nginx..."
sudo systemctl restart nginx

echo "Deployment completed successfully!"

 

주의할 점은 배포 스크립트의 경우 실행 권한이 있어야 하므로, 아래 명령을 한번 실행하여 실행가능한 파일로 만들어줘야 합니다.

chmod +x ~/portfolio/deploy.sh

4단계: 배포 자동화 및 웹사이트 운영

CI/CD 파이프라인이 정상적으로 동작하는지 아래 4가지 방법을 통해 확인할 수 있습니다.

 

1. 브라우저에서 직접 확인

브라우저에서 EC2 퍼블릭 IP 혹은 도메인을 입력하여 사이트가 정상적으로 변경되었는지 확인합니다.

 

2. EC2 서버에서 직접 Git 상태 확인

cd ~/portfolio
git status

✔ Your branch is up to date with 'origin/main'. → 최신 상태라면 정상 배포됨

 

3. Nginx 로그 확인

sudo journalctl -u nginx --no-pager --lines=50

✔ systemctl restart nginx 후 오류가 없는지 확인

 

4. GitHub Actions 페이지에서 로그 확인

---

🚀 다음 단계

이제 EC2 서버에 웹사이트 배포까지 완료했으므로, 다음 단계는 사이트 디자인 및 추가 기능 구현을 할 차례입니다.

다음으로 해야 할 작업

✅ HTML/CSS로 Windows 95/98 테마 구현 🎨

✅ JavaScript를 추가하여 UI 개선 🖥

✅ 웹사이트 반응형 디자인 적용 📱

✅ 포트폴리오 내용 작성 및 정리 ✍️

 

이제 프론트엔드 개발을 시작할 차례!