나만의 블로그 제작기 - AWS로 배포하기

AWS
2025-09-14

AWS로 블로그 배포하기

1z

1. AWS Route53로 커스텀 도메인 구입

구매 방법

  • AWS Route53 링크 접속
  • 좌측 사이드바에 등록된 도메인 클릭이미지1
  • 우측 상단에 도메인 등록 클릭이미지2
  • 원하는 도메인을 검색후 검색결과에서 검색된 도메인과 요금을 확인후 선택 클릭 후 결제 진행이미지3
  • 그후 도메인 등록될때가지 기다리면 완료

2. AWS Amplify로 리엑트 프로젝트 배포하기

  • AWS Amplify 링크 접속
  • 링크로 접속후 앱 배포 클릭이미지4
  • Amplify로 배포시 GitHub을 사용해서 배포 이미지5
  • 깃헙 로그인후 모든 레파지토리 혹은 레파지토리 선택해서 연동하기 이미지6
  • 가져온 레파지토리, 사용할 브랜치 선택 이미지7
  • 배포할 앱과 빌드 커맨드랑 빌드 디렉토리 설정 이미지8
  • 마지막 확인후 검토 이미지9
  • 배포된 프로젝트에 커스텀 도메인으로 AWS Route53으로 구매한 도메인을 등록하여 원하는 도메인에 프로젝트 배포 완료

3. 기존에 사용하던 FireBaseStorage 대신 AWS-S3로 마이그레이션 하기

ㄱ. S3 버킷 생성하기

  • 버킷이름은 원하는 이름으로 생성하여 일단 생성하고
  • 모든 퍼블릭 엑세스 차단 설정을 아래처럼 수정해줌
    `{
    "Version": "2012-10-17",
    "Statement": [
    {
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::chacha-tech-blog/    "
    }
    ]

}`

  • CORS 설정도 아래처럼 수정해줌
    [ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "PUT", "POST", "DELETE"], "AllowedOrigins": ["*"], "ExposeHeaders": [] } ]

ㄴ. IAM 생성하기

  • 원하는 이름으로 IAM을 생성후
  • 아래 정책을 적용해줌
    { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectAcl", "s3:GetObject", "s3:DeleteObject" ], "Resource": "arn:aws:s3:::chacha-tech-blog/*" }, { "Effect": "Allow", "Action": [ "s3:ListBucket" ], "Resource": "arn:aws:s3:::chacha-tech-blog" } ] }
  • 그후 엑세스 키를 생성하여 Access Key ID와 Secret Access Key 저장
  • 그후 프로젝트에서 복사한 ACCESS_KEY랑 SECRET_ACCESS_KEY를 환경변수로 선언하고 npm install aws-sdk 패키지 설치하여 사용하면됨

4. 트러블 슈팅

ㄱ. Amplify 리다이렉션 설정

  • 에러 : 배포후 /login /about 페이지 등으로 도메인으로 들어가거나 페이지 이동후 새로고침시 404가 뜨는 에러
  • 원인 : 정확한 이유는 모르겟지만 /login 으로 입력시 빌드된 폴더에서 login이라는 폴더를 찾고 그걸 route 하려고 하는데 없어서 나는 에러라나 뭐라나..
  • 해결 :
    • Amplify에 리디렉션 관리에 설정을 수정이미지10
    • 배포한 프로젝트에 amplify.yml을 만들고 아래 코드를 붙여넣어서 문제를 해결

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - "**/*" customHeaders: - pattern: "**/*" headers: - key: "Cache-Control" value: "max-age=0, no-cache, no-store, must-revalidate" redirects: - source: '</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>' target: "/index.html" status: "200"

댓글

Top