S3をデプロイ先としたCI/CD 環境を構築する

2020.11.07

概要

CodeCommitにファイルをコミットすると、CodePipelineが変更を検知し、自動でS3にデプロイが実行されるCI/CD環境を構築する

実装方法

S3バケットの作成

バケットの作成

aws s3 mb s3://ci-cd-handson --region ap-northeast-1                                  
make_bucket: ci-cd-handson

Webサイトホスティングの設定

Webサイトホスティングの有効化

aws s3 website s3://ci-cd-handson/ --index-document index.html --error-document error.html

バケットポリシーの設定

aws s3api put-bucket-policy --bucket ci-cd-handson --policy file://policy.json

ファイル: policy.json
※ Resourceには作成したS３バケットのARNを指定する

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::ci-cd-handson/*" 
        } 
    ] 
}

ファイルのコピー

aws s3 cp ./index.html s3://ci-cd-handson/
aws s3 cp ./error.html s3://ci-cd-handson/

ファイル: index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <title>index.html</title>
    </head>
    <body>
        ci-cd-handson index.html
    </body>
</html>

ファイル: error.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <title>error.html</title>
    </head>
    <body>
        ci-cd-handson error.html
    </body>
</html>

サイトにアクセスする

curl http://ci-cd-handson.s3-website-ap-northeast-1.amazonaws.com/

CodeCommitの設定

リポジトリの作成

aws codecommit create-repository --repository-name ci-cd-handson

出力結果

{
    "repositoryMetadata": {
        "accountId": "xxx",
        "repositoryId": "c8fb8d08-bea8-4cce-a7a4-3698a6a2b4ba",
        "repositoryName": "ci-cd-handson",
        "lastModifiedDate": "2020-11-02T17:04:22.671000+09:00",
        "creationDate": "2020-11-02T17:04:22.671000+09:00",
        "cloneUrlHttp": "https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/ci-cd-handson",
        "cloneUrlSsh": "ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/ci-cd-handson",
        "Arn": "arn:aws:codecommit:ap-northeast-1:xxx:ci-cd-handson"
    }
}

PCからCodeCommitにアクセスするための設定

認証情報ヘルパーを使用してアクセスできるようにする
AWS CLI 認証情報ヘルパーを使用して Linux, macOS, or Unix で AWS CodeCommit リポジトリへの HTTPS 接続をセットアップする手順 - AWS CodeCommit

git config --global credential.helper '!aws codecommit credential-helper [email protected]'
git config --global credential.UseHttpPath true

↑のコマンド実行すると ~/.gitconfig に設定が追記される

gitconfigにusername/emailを設定していない場合には↓も合わせて設定する

git config --global user.name "名前"
git config --global user.email "メールアドレス"

gitをcloenしてみる

git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/ci-cd-handson

s3にコピーしたindex.htmlとerror.htmlをcloneしたディレクトリに保存

cp index.html error.html ./ci-cd-handson/

CodeCommitにファイルをpushする

cd ci-cd-handson
git add .
git commit -m "initial commit"
git push origin master

CodePipelineの作成

AWSコンソールよりCodePipelineのメニューにアクセスする

パイプラインの設定を選択する

下記の項目を入力し、「次に」をクリックする

  • パイプライン名 : ci-cd-handson-s3
  • ロール名 (自動入力) : AWSCodePipelineServiceRole-ap-northeast-1-ci-cd-handson-s3

ソースステージを追加する

下記の項目を入力し、「次に」をクリックする

  • ソースプロバイダー : AWS CodeCommit
  • リポジトリ名 : ci-cd-handson
  • ブランチ名 : master

ビルドステージを追加する

S3バケットにファイルを配置するだけなので、「ビルドステージをスキップ」をクリックする
※ 警告メッセージが表示されるが、そのまま「スキップ」をクリックする

デプロイステージを追加する

下記の項目を入力し、「次に」をクリックする

  • デプロイプロバイダー : S3
  • リージョン : アジアぱパシフィック(東京)
  • バケット: ci-cd-handson
  • デプロイする前にファイルを抽出する : チェックを入れる

レビュー

これまで設定した内容が表示されるので、内容を確認し、問題なければ「パイプラインを作成する」をクリックする

しばらくすると、パイプラインが作成される

この時点でS3にアクセスしても、ソールコードを変更していないので。以前と同じ内容が表示される

curl http://ci-cd-handson.s3-website-ap-northeast-1.amazonaws.com/

新しいコードのデプロイ

index.htmlを修正して、CodeCommitにpushする

ファイル: index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <title>index.html</title>
    </head>
    <body>
        ci-cd-handson index.html
        deployed by codecommit!!
    </body>
</html>

git add .
git commit -m "fix"
git push origin master

CodeCommitへの変更をCodePipelineが検知し、デプロイが実行される

デプロイ完了後、再度S3にアクセスすると、コンテンツが更新されていることが確認できる

curl http://ci-cd-handson.s3-website-ap-northeast-1.amazonaws.com/

出力結果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <title>index.html</title>
    </head>
    <body>
        ci-cd-handson index.html
        deployed by codecommit!!
    </body>
</html>

参考

AWS Hands-on for Beginners - AWS Code サービス群を活用して、CI/CD のための構成を構築しよう！ | AWS

コメント