홈페이지 웹 배포

AI 툴의 도움을 받아 자바스크립트로 작성한 홈페이지를, 실제 다른 사용자들이 접속할 수 있게 도메인에 할당해보았다. 여기서는 그 과정에 대해 간략하게 소개한다.

---

원래 집에서 놀고 있는 컴퓨터를 서버로 띄우려고 했는데, 집에서 사용하는 공유기 (LG U+)가 포트포워딩을 못하게 막아뒀다고 한다. 나도 알고 싶지 않았던 사실인데, 전에 한창 뻘짓하다가 알게되었기에 이번 프로젝트에서는 바로 해당 부분을 스킵하기로 했다. 만약 집에 있는 컴퓨터로 서버를 띄우려면, 사설 공유기 (iptime 등)을 설치해서 뭐 어떻게 어떻게 하라는데, 이 부분에 대해서는 나중에 진행하게 되면 따로 다뤄보도록 하겠다.

 

1. VPM (Amazon EC2 등) Setting

대안으로 할 수 있는 일은 Cloudflare ?를 이용한 터널링 방법과 VPM 을 이용한 서버 설정이었는데, Cloudflare는 너무 생소하기도 해서 그나마 익숙한 AWS를 선택했다. EC2 Instance 생성하고, 방화벽 설정 및 고정 IP 세팅만 해주면 쉽게 할 수 있다. 

 

Step 1. EC2 Instance 생성하기 

프론트, 백엔드를 도커 컨테이너로 패키징하였는데, 이거를 서버에서 띄우기 위해 AWS EC2 Instance를 생성해준다. 

pem 파일도 발급받아서 보안 강화하자 ! 

# 권한 설정 
chmod 400 ~/Downloads/your-key.pem

보안 그룹도 HTTP (80), HTTPS (443)을 추가해준다. 

 

Step 2. Elastic IP 할당하기 

AWS EC2 Instance 생성 후, Elastic IP 할당을 통해 EC2 서버에 고정 IP로 접속할 수 있도록 설정해주자. 

생성한 Elastic IP는 앞서 만들어둔 EC2 Instance와 연결해준다. 

 

Step 3. 접속 테스트

연결까지 완료했다면, 할당받은 고정 IP 주소로 접속 잘 되는지 확인해보자. 

ssh -i [your-pem.pem] ubuntu@[Elastic IP Address]

Step 4. 환경 설정

sudo apt update && sudo apt upgrade -y   # 업데이트 & 패키지 설치     
curl -fsSL https://get.docker.com | sh   # 도커 설치 
sudo usermod -aG docker ubuntu   # 권한 부여 
docker --version   # docker 설치 확인
sudo apt install git -y   # git 설치

 이후 개발한 repo 서버에 복제해두면 된다. 

 

2. 도메인 구매 및 DNS 설정

가비아 사이트에서, 도메인을 구매하고, 거기에 DNS 설정을 해주었다.

My 가비아 -> DNS 설정 -> 관리

관리 페이지에서, DNS 레코드 설정을 눌러준다. 

이후 해당 페이지에, A 레코드를 각각 추가해주면 된다. 

@ → Elastic IP, A 레코드: www → Elastic IP

3. HTTPS 인증서 발급 

# CertBot 설치 
sudo apt install certbot -y  

# 인증서 발급 (Docker 내부 Nginx가 80 포트 쓰고 있으니 standalone으로) 
sudo certbot certonly --standalone -d yourdomain.com -d www.yourdomain.com

4. nginx.conf 파일 수정

nginx.conf 파일에, 구매한 도메인 주소를 넣어주자.

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];

    ssl_certificate /etc/letsencrypt/live/hangil.ai.kr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hangil.ai.kr/privkey.pem;

    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location ~* \.(js|css|png|jpg|jpeg|svg|ico|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    gzip on;
    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
}

이렇게 설정이 완료되었다. 수정한 nginx.conf 파일을 배포하고, 서버에 다운받아 docker 컨테이너를 띄워주자. 

이후 도메인 창에 구매한 주소를 입력하면, 정상적으로 접속할 수 있다.