컨텐츠로 건너뛰기

Astro 사이트를 AWS에 배포

AWS는 Astro 사이트를 배포하는 데 사용할 수 있는 모든 기능을 갖춘 웹 앱 호스팅 플랫폼입니다.

프로젝트를 AWS에 배포하려면 AWS 콘솔을 사용해야 합니다. (이러한 작업의 대부분은 AWS CLI를 사용하여 수행할 수도 있습니다.) 이 가이드에서는 AWS Amplify, S3 정적 웹사이트 호스팅, CloudFront를 사용하여 사이트를 AWS에 배포하는 단계를 안내합니다.

AWS Amplify는 프런트엔드 웹 및 모바일 개발자가 AWS에서 풀 스택 애플리케이션을 빠르고 쉽게 구축할 수 있도록 특별히 제작된 도구 및 기능 세트입니다.

  1. 새로운 Amplify 호스팅 프로젝트를 생성합니다.

  2. 저장소를 Amplify에 연결합니다.

  3. 프로젝트의 빌드 프로세스에 맞게 빌드 설정을 수정합니다.

    version: 1
    frontend:
    phases:
    preBuild:
    commands:
    - npm ci
    build:
    commands:
    - npm run build
    artifacts:
    baseDirectory: /dist
    files:
    - '**/*'
    cache:
    paths:
    - node_modules/**/*

Amplify는 커밋을 저장소에 푸시할 때 자동으로 웹 사이트를 배포하고 업데이트합니다.

S3 정적 웹사이트 호스팅

섹션 제목: S3 정적 웹사이트 호스팅

S3는 모든 애플리케이션의 시작점입니다. 여기에는 프로젝트 파일과 기타 자산이 저장됩니다. S3에서는 파일 저장 및 요청 수에 따라 요금을 청구합니다. AWS 설명서에서 S3에 대한 자세한 내용을 확인할 수 있습니다.

  1. 프로젝트 이름으로 S3 버킷을 생성합니다.

  2. ”Block all public access” 를 비활성화합니다. 기본적으로 AWS는 모든 버킷을 비공개로 설정합니다. 공개하려면 버킷 속성에서 “Block public access” 확인란을 선택 취소해야 합니다.

  3. dist에 있는 빌드된 파일을 S3에 업로드합니다. 콘솔에서 수동으로 수행하거나 AWS CLI를 사용할 수 있습니다. AWS CLI를 사용하는 경우 AWS 자격 증명으로 인증 후 다음 명령을 사용하세요.

    aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
  4. 공개 액세스를 허용하도록 버킷 정책을 업데이트하세요. 버킷의 Permissions > Bucket policy에서 이 설정을 찾을 수 있습니다.

    {
    "Version": "2012-10-17",
    "Statement": [
    {
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
    }
    ]
    }
  5. 버킷에 대한 웹사이트 호스팅을 활성화합니다. 버킷의 Properties > Static website hosting에서 이 설정을 찾을 수 있습니다. 색인 문서를 index.html로 설정하고 오류 문서를 404.html로 설정하세요. 마지막으로 버킷의 Properties > Static website hosting에서 새 웹사이트 URL을 찾을 수 있습니다.

CloudFront는 CDN (콘텐츠 전송 네트워크) 기능을 제공하는 웹 서비스입니다. 웹 서버의 콘텐츠를 캐시하여 최종 사용자에게 배포하는 데 사용됩니다. CloudFront는 전송된 데이터 양에 따라 요금을 청구합니다. S3 버킷에 CloudFront를 추가하는 것은 더 비용 효율적이며 더 빠른 서비스를 제공합니다.

S3를 Cloudfront와 연결하려면 다음 값을 사용하여 CloudFront 배포를 생성합니다.

  • Origin domain: S3 버킷 정적 웹 사이트 엔드포인트. S3 버킷의 Properties > Static website hosting에서 엔드포인트를 찾을 수 있습니다. 또는 s3 버킷을 선택하고 callout을 클릭하여 버킷 주소를 버킷 정적 엔드포인트로 바꿀 수 있습니다.
  • Viewer protocol policy: “HTTPS로 리디렉션”

이 구성은 Cloudfront CDN 네트워크를 사용하여 사이트를 제공합니다. 버킷의 Distributions > Domain name에서 CloudFront 배포 URL을 찾을 수 있습니다.

GitHub Actions를 사용한 지속적인 배포

섹션 제목: GitHub Actions를 사용한 지속적인 배포

AWS에 대한 지속적 배포를 설정하는 방법에는 여러 가지가 있습니다. GitHub에 호스팅되는 코드의 한 가지 가능성은 커밋을 푸시할 때마다 GitHub Actions를 사용하여 웹사이트를 배포하는 것입니다.

  1. 다음 권한과 함께 IAM을 사용하여 AWS 계정에 새 정책을 생성합니다. 이 정책을 사용하면 빌드된 파일을 S3 버킷에 업로드하고 커밋을 푸시할 때 CloudFront 배포 파일을 무효화할 수 있습니다.

    {
    "Version": "2012-10-17",
    "Statement": [
    {
    "Sid": "VisualEditor0",
    "Effect": "Allow",
    "Action": [
    "s3:PutObject",
    "s3:ListBucket",
    "s3:DeleteObject",
    "cloudfront:CreateInvalidation"
    ],
    "Resource": [
    "<DISTRIBUTION_ARN>",
    "arn:aws:s3:::<BUCKET_NAME>/*",
    "arn:aws:s3:::<BUCKET_NAME>"
    ]
    }
    ]
    }
  2. 새 IAM 사용자를 생성하고 정책을 사용자에게 연결합니다. 이렇게 하면 AWS_SECRET_ACCESS_KEYAWS_ACCESS_KEY_ID가 제공됩니다.

  3. 이 샘플 워크플로를 저장소의 .github/workflows/deploy.yml에 추가하고 GitHub에 푸시하세요. GitHub의 Settings > Secrets > Actions에서 AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID, DISTRIBUTION_ID를 “secrets”로 추가해야 합니다. 각 secret을 추가하려면 New repository secret를 클릭하세요.

    name: Deploy Website
    on:
    push:
    branches:
    - main
    jobs:
    deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
    uses: actions/checkout@v4
    - name: Configure AWS Credentials
    uses: aws-actions/configure-aws-credentials@v1
    with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: us-east-1
    - name: Install modules
    run: npm ci
    - name: Build application
    run: npm run build
    - name: Deploy to S3
    run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
    - name: Create CloudFront invalidation
    run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

더 많은 배포 안내서

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티