Post

오토에버 클라우드 2기 59일차

AWS S3를 이용한 정적 웹사이트 배포

Posted Updated
Preview Image
By minnnning
11 min read
오토에버 클라우드 2기 59일차

AWS S3를 이용한 정적 웹사이트 배포

AWS의 스토리지 서비스인 S3(Simple Storage Service)를 사용하여 서버 없이 간단한 정적 웹사이트를 배포할 수 있다

1. S3 버킷(Bucket) 생성하기

버킷은 파일을 저장하는 최상위 컨테이너(폴더)

  1. AWS Management Console에 로그인하여 S3 서비스로 이동

  2. [버킷 만들기] 버튼을 클릭

  3. 버킷 이름: 전 세계에서 유일한 이름으로 지정 일반적으로 웹사이트 도메인과 동일하게 만든다 (예: minnnning-example-page.com)

  4. AWS 리전: 사용자에게 가장 가까운 리전을 선택하여 빠른 속도를 보장 (예: ap-northeast-2 (서울))

  5. 모든 퍼블릭 액세스 차단의 체크를 해제합니다. 웹사이트는 인터넷의 모든 사용자가 접근할 수 있어야 하므로 퍼블릭 액세스를 허용. 경고 메시지를 확인하고 체크박스를 선택

  6. 나머지 설정은 기본값으로 두고 [버킷 만들기]를 클릭

 

2. 정적 웹사이트 호스팅 활성화

생성한 버킷이 웹사이트처럼 동작하도록 설정을 변경해야 한다

  1. 생성한 버킷의 이름을 클릭하여 세부 정보 페이지로 이동

  2. [속성] 탭을 클릭하고, 페이지 하단으로 스크롤하여 정적 웹 사이트 호스팅 섹션의 [편집] 버튼을 클릭

  3. 정적 웹 사이트 호스팅을 활성화로 변경

  4. 인덱스 문서: 사용자가 웹사이트 주소로 접속했을 때 가장 먼저 보여줄 파일의 이름을 입력합니다. 일반적으로 index.html

  5. (선택 사항) 오류 문서: 잘못된 경로로 접속했을 때 보여줄 오류 페이지의 이름을 입력 (예: error.html)

  6. [변경 사항 저장]을 클릭합니다. 저장이 완료되면 이 섹션에 웹사이트 엔드포인트(URL)가 생성된다 이 주소가 바로 웹사이트의 주소이다

지금 접속한다면 403에러가 발생한다

 

3. 버킷 정책(Bucket Policy) 설정으로 퍼블릭 읽기 권한 부여

웹사이트 호스팅을 활성화했더라도, 버킷 안의 파일들을 익명의 사용자가 읽을 수 있도록 명시적인 권한을 부여해야 한다

  1. 버킷의 [권한] 탭으로 이동

  2. 버킷 정책 섹션에서 [편집] 버튼을 클릭

  3. 정책 편집기에 아래의 JSON 코드를 넣는다 YOUR_BUCKET_NAME 부분은 실제 버킷 이름

    1
2
3
4
5
6
7
8
9
10
11
12

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        }
    ]
}
    • "Effect": "Allow": 허용 정책
    • "Principal": "*": 모든 사용자(익명 포함)를 의미
    • "Action": "s3:GetObject": 버킷 내의 객체(파일)를 읽을 수 있는 권한
    • "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*": 이 정책이 적용될 범위를 지정 (해당 버킷의 모든 파일)

 

4. 웹사이트 파일 업로드하기

이제 웹사이트를 구성하는 파일(HTML, CSS, JavaScript 등)을 버킷에 업로드 해야한다

  1. 간단한 index.html 파일을 준비 index.html 예시:

    1
2
3
4
5
6
7
8
9
10

    <!DOCTYPE html>
<html>
<head>
    <title>My S3 Website</title>
</head>
<body>
    <h1>Hello, S3!</h1>
    <p>This website is hosted on Amazon S3.</p>
</body>
</html>

  2. 버킷의 [객체] 탭으로 이동

  3. [업로드] 버튼을 클릭

  4. [파일 추가]를 클릭하여 준비한 index.html 파일을 선택하거나, 파일을 브라우저 창으로 드래그 앤 드롭

  5. [업로드] 버튼을 클릭하여 파일 업로드를 완료

 

5. 웹사이트 접속 및 확인

브라우저에 index.html 파일의 내용이 정상적으로 표시되는지 확인한다

 

git action으로 배포하기

1. 배포용 AWS IAM 사용자 생성

GitHub Actions가 내 AWS 계정에 접근하여 S3 버킷에 파일을 올리려면, 보안을 위해 전용 IAM 사용자와 액세스 키를 생성해야 한다

  1. AWS Management Console에서 IAM 서비스로 이동

  2. 왼쪽 메뉴에서 [사용자]를 선택하고 [사용자 생성] 버튼을 클릭

  3. 사용자 이름을 지정 (예: github-actions-s3-deployer)

  4. 권한 설정 단계에서 [정책 직접 연결]을 선택하고, [권한 정책 생성] 버튼을 클릭

  5. JSON 탭을 선택 YOUR_BUCKET_NAME 부분은 실제 버킷 이름으로 반드시 수정해야 한다 이 정책은 지정된 버킷에 파일을 올리고, 목록을 보고, 삭제하는 최소한의 권한만 부여

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3WebsiteDeployment",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR_BUCKET_NAME",
                "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            ]
        }
    ]
}

  6. 정책 이름을 지정(예: AllowS3DeployPolicy)하고 정책을 생성

  7. 다시 사용자 생성 화면으로 돌아와 방금 만든 정책을 검색하여 체크하고 [다음]을 클릭

  8. 사용자 생성을 완료한 후, 생성된 사용자 이름을 클릭하여 세부 정보 페이지로 들어간다

  9. [보안 자격 증명] 탭으로 이동하여 [액세스 키 만들기] 버튼을 클릭

  10. [명령줄 인터페이스(CLI)]를 선택하고 다음 단계로 진행하여 액세스 키를 생성

  11. 생성된 액세스 키 ID와 비밀 액세스 키를 즉시 복사하여 안전한 곳에 보관

 

2. GitHub에 AWS 액세스 키 등록

보안을 위해 AWS 액세스 키를 코드에 직접 넣지 않고, GitHub의 암호화된 비밀 정보(Secrets) 기능에 등록

  1. 웹사이트 코드가 있는 GitHub 리포지토리로 이동

  2. [Settings] 탭 > [Secrets and variables] > [Actions] 메뉴로 이동

  3. [New repository secret] 버튼을 클릭하여 아래 두 개의 비밀 정보를 생성

    • Name: AWS_ACCESS_KEY_ID
      • Secret: 위에서 복사한 액세스 키 ID를 붙여넣는다
    • Name: AWS_SECRET_ACCESS_KEY
      • Secret: 위에서 복사한 비밀 액세스 키를 붙여넣는다

 

3. GitHub Actions 워크플로우 작성

이제 push 이벤트가 발생했을 때 수행할 작업들을 정의하는 워크플로우 파일을 작성한다

  1. 리포지토리의 코드 편집기(VS Code 등)에서 프로젝트 최상위 경로에 .github/workflows 디렉터리를 생성

  2. 해당 디렉터리 안에 deploy.yml과 같은 이름으로 YAML 파일을 생성

  3. YOUR_BUCKET_NAME과 YOUR_AWS_REGION을 실제 버킷 이름과 리전(예: ap-northeast-2)으로 수정

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    # .github/workflows/deploy.yml
   
name: Deploy static website to S3
   
# main 브랜치에 push 이벤트가 발생했을 때 이 워크플로우를 실행합니다.
on:
  push:
    branches:
      - main
   
jobs:
  deploy:
    runs-on: ubuntu-latest # 작업은 최신 우분투 환경에서 실행됩니다.
   
    steps:
      # 1. GitHub 리포지토리의 코드를 runner로 가져옵니다.
      - name: Checkout repository
        uses: actions/checkout@v4
   
      # 2. GitHub Secrets에 저장된 AWS 자격 증명을 설정합니다.
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: $
          aws-secret-access-key: $
          aws-region: YOUR_AWS_REGION # 예: ap-northeast-2
   
      # 3. AWS CLI를 사용하여 S3 버킷에 파일을 동기화합니다.
      - name: Sync files to S3
        run: |
          aws s3 sync . s3://YOUR_BUCKET_NAME --delete
    • on: push: branches: [ main ]: main 브랜치에 push될 때마다 이 액션을 실행하라는 의미
    • aws s3 sync . s3://...: 현재 디렉터리(.)의 모든 파일을 S3 버킷과 동기화
    • --delete: 리포지토리에서 삭제된 파일은 S3 버킷에서도 함께 삭제하는 옵션

 

4. 자동 배포 실행 및 확인

  1. 로컬 컴퓨터에서 deploy.yml 파일을 포함한 모든 변경 사항을 git commit 하고 main 브랜치로 git push

  2. GitHub 리포지토리의 [Actions] 탭으로 이동하면, 방금 푸시한 커밋으로 인해 워크플로우가 실행되는 것을 실시간으로 확인할 수 있다

이제부터 main 브랜치에 코드를 push할 때마다 이 모든 과정이 자동으로 실행되어 웹사이트가 항상 최신 상태로 유지된다

오토에버 클라우드 2기
AWS S3 GitHub Actions
This post is licensed under CC BY 4.0 by the author.