[reciping] 프론트단의 Route53 + S3 + CloudFront 설정하기

※ 기존에 기록해둔 노션 글을 옮겨적은 것으로, 노션 템플릿에 맞게 적게된 글이라 보기 불편하실 수 있습니다.

---

 

프론트 배포하면서 딸려오는 서비스들을 배포해보겠습니다.

 

1. 가비아에서 산 DNS를 Route53에 연결하기

로그인 후, My가비아 → 이용중인 서비스 → 도메인 클릭 후, 이 화면 띄워놓기

호스팅 영역 생성 클릭

산 DNS 넣고 화면과 같이 설정 후, 호스팅 영역 생성

호스팅 영역 생성 완료

NS Record 부분의 값을 가비아에 다시 돌아가서 가비아 네임 서버에 입력해주어야 합니다. (아래 이미지 참조)

+)

• NS (Name Server) 레코드 : 해당 도메인의 DNS 요청을 처리하는 네입서버 주소를 지정하는 역할
• ⇒ 즉, 특정 도메인(reciping.kr)에 대한 트래픽을 어떤 네임서버가 처리할 것인지 결정하는 것
• SOA (Start of Authority) 레코드 : 특정 DNS 존(zone)의 시작 지점이며, 해당 존을 관리하는 정보와 존의 버전 관리 정보를 제공
• ⇒ 각 존에 단 하나만 존재

네임서버 설정 클릭 (현재는 가비아의 네임서버가 디폴트로 관리되고 있음)

순서대로 1,2,3,4차 입력 후, 적용 클릭

---

 

2. Route 53에서 www.reciping.kr → CloudFront로 연결하는 방법

1. 호스팅 영역 > "reciping.kr" > 레코드 생성

• 레코드 이름: www
• 레코드 유형: A - IPv4 address + AWS 리소스로 트래픽 라우팅
• 별칭(Alias): ✅ 켜기

2. 트래픽 라우팅 대상 → 엔드포인트 선택: CloudFront 배포

• 드롭다운에서 너가 생성한 CloudFront 배포 선택
• 리전 선택은 자동으로 설정됨 (CloudFront는 글로벌 서비스라 리전 설정 없음)

3. 라우팅 정책: 단순 라우팅

Route53의 라우팅 정책 선정 기준 정리

• 정책 설명 사용 사례

정책	설명	사용 사례
✅ Simple	가장 기본, 1개 대상 IP/DNS만 설정	단일 ALB, 단일 서비스
Weighted	여러 대상에 트래픽 분산 (비율 설정)	A/B 테스트, Blue-Green 배포
Latency-based	리전별 응답속도 기준 분기	다중 리전 운영 시
Failover	Active-Standby 구성	장애 복구용
Geolocation	국가/지역별 라우팅	지역 맞춤 서비스
Multivalue answer	여러 IP 중 무작위 응답	간단한 부하분산 (잘 안 씀)

[ 언제 다른 라우팅 정책을 쓸 수 있을까? ]

정책	향후 활용 가능 시나리오
Weighted	실험적으로 신기능을 일부 사용자에게 제공할 때 (A/B 테스트)
Latency-based	다중 리전 서비스로 확장할 경우 (예: 글로벌 유저 확보)
Failover	장애 대비용 백업 게이트웨이 또는 ALB 구성 시

---

 

3. 프론트 이미지 빌드 후, ECR에 푸쉬하기

프론트엔드 프로젝트 루트폴더에 아래의 dockerfile과 nginx.conf 추가해두기

# 1단계: Vite로 빌드
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run build

# 2단계: Nginx로 정적 파일 서빙
FROM nginx:1.25-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;

  server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html;

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

# 이 단계 먼저 오기 전에 node.js 설치 안 되어있으면 설치 후 작업하기
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 설치 확인
node -v
npm -v

# 1. 프론트 디렉토리로 이동
cd ~/Desktop/dev_sini/reciping-fe

# 2. 빌드 (최초 1회)
npm install
npm run build

# 3. Docker 이미지 빌드
docker build --no-cache --platform linux/amd64 -t reciping-FE:v1.0.0 .

# 4. ECR 태그 설정 (리포지토리명이 reciping-FE인 경우)
docker tag reciping-FE:v1.0.0 \
892117097999.dkr.ecr.ap-northeast-2.amazonaws.com/reciping-FE:v1.0.0

# 5. 이미지 푸시
docker push 892117097999.dkr.ecr.ap-northeast-2.amazonaws.com/reciping-FE:v1.0.0