🐙

【静的ウェブサイト作成②】CodeCommitからCodePipelineを介してS3にデプロイ

2022/10/01に公開

作業内容

  1. S3作成
  2. CodePipelineのパイプラインを作成
  3. プルリクエストを作成してデプロイテスト

1.S3作成

  • バケット名とリージョンを指定して作成

  • 静的ウェブサイトホスティングを有効にする

  • バケットポリシーでオブジェクトへのアクセスを許可

※自分のIPからだけを許可
※"Action": "s3:*" ⇒ "Action": "s3:GetObject"に変更(デプロイがうまくいかなかったため)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "ACCESSDENY",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "S3のARN/*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        },
        {
            "Sid": "ACCESSOK",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "S3のARN/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        }
    ]
}
  • パブリックアクセスのブロックを解除

2.CodePipelineのパイプラインを作成

  • パイプライン作成

  • ソースステージにCodeCommitのリポジトリを選択

  • CodePipelineのビルドステージはスキップ

  • デプロイステージに作成したS3を選択

  • パイプライン作成をクリックすると、初回デプロイが始まる

3.プルリクエストを作成してデプロイテスト

  • developブランチを作成し、error.htmlを作成
  • プルリクエスト作成

  • プルリクエストのマージ

Discussion