S3 업로드를 CircleCI로 자동화하여 간편한 웹사이트 운영

최근, 악곡 제작의 안건을 받기 시작했으므로, 포트폴리오 사이트를 만들고 싶다고 생각해, S3의 웹 사이트 호스팅으로 만들었습니다.

이하가 이번에, 대략 만든 것입니다.
htp : // rks. 켄타 오자피. 인후
※리스폰시브 미대응

절각이므로, CircleCi를 활용해, GitHub에 코드나 파일을 push하면 S3에 자동 배치되는 구성으로 했습니다. 아래에 그 흐름을 써 갑니다.

1. IAM 설정

CircleCI 환경으로 설정하는 IAM 사용자를 만듭니다.

먼저 IAM 화면에서 S3에 대한 액세스 정책을 만듭니다.
이번에는 IAM 화면의 "정책"화면에서 s3-auth라는 정책을 만들었습니다. 정책은 다음과 같습니다.

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

정책 작성이 완료되면 사용자를 추가합니다. 액세스 유형은 "프로그램 액세스"만 선택하고 액세스 권한은 "기존 정책 직접 연결"화면에서 방금 만든 "s3-auth"를 선택합니다.

2. S3 액세스 정책 설정

그런 다음 S3 버킷에 대한 액세스 정책을 설정합니다.
이번에는 이하 3개의 액세스 권한을 기재했습니다.

관리자 계정: 버킷 작업에 대한 모든 권한을 부여합니다.

Public(사이트 방문자): S3에 대한 GetObject만 허용.

CircleCI 권한: PutObject, ListBucket, DeleteObject만 허용.

버킷을 만든 후에는 액세스 권한 > 버킷 정책에서 S3에 대한 액세스 정책을 설정합니다.

{
    "Version": "2012-10-17",
    "Id": "YOUR_ID",
    "Statement": [
        {
            "Sid": "Admin",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::xxxxxx:user/xxxxxx（管理者ユーザーのarn）"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        },
        {
            "Sid": "forPublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
        },
        {
            "Sid": "forCircleCi",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::xxxxxx:user/xxxxxx(先程作成したCircleCI用IAMユーザーのarn)"
            },
            "Action": [
                "s3:PutObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR_BUCKET_NAME",
                "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            ]
        }
    ]
}

이 때 [공용 액세스 설정] 항목의 [새 퍼블릭 버킷 정책 차단]을 선택하면 버킷 정책을 업데이트할 수 없습니다.

3. GitHub의 리포지토리 생성

이 프로젝트에 대한 리포지토리를 만듭니다.

4. CircleCI 설정

CircleCI의 사용자 등록과 GitHub 연계의 설정을 실시합니다. 설정이 완료되면 관리 화면에서 [AddProjects]를 선택할 때 GitHub 리포지토리 이름 목록이 표시되는지 궁금합니다. 이번에 만든 리포지토리 이름 옆에 표시되는 SetUp Project 버튼을 누릅니다.

그런 다음 해당 프로젝트의 Settings 화면에서 Environment Variables 메뉴에서 Add Variable에서 CircleCI용으로 만든 IAM 사용자의 AWS_ACCESS_KEY_ID 및 AWS_SECRET_ACCESS_KEY를 등록합니다.

CircleCI 컨테이너에서 AWS CLI 명령이 실행되도록 하려면 환경 변수를 설정해야 합니다.



위의 작업이 완료되면 CircleCI에서 자동 배포 내용이 포함된 yml 파일을 만듭니다. 이번에는, 현재의 프로젝트의 디렉토리 부하의 .circleci/config.yml에 이하의 내용을 기재했습니다.

config.yml

version: 2
 jobs:
   build:
        working_directory: ~/repo
     environment:
            - AWS_S3_BUCKET_NAME: YOUR_BUCKET_NAME
     docker:
       - image: innovatorjapan/awscli:latest
     steps:
       - checkout
       - run:
           name: Deploy to S3 if branch is Master.
           command: |
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
               aws s3 sync ~/repo s3://${AWS_S3_BUCKET_NAME}/ --exact-timestamps --delete
             fi

견적: htps : // m / fkym bk · ms / 55998497620498f1 a 59d

5. GitHub의 Master에 push

지금까지 준비가 끝나면 나중에 GitHub의 Master에 코드를 Push하면됩니다.

이것으로 자동 배포 환경이 완성되었는지 생각합니다. 배포가 성공하면 CicleCI 관리 화면에 Success가 표시됩니다.