AWS CodePipeline で Amazon S3 へのデプロイ(デプロイステージなし)

ishihara.m

3週間前

みなさま、こんにちは。石原です。
入社してから、あっという間に 3か月が経ちました。
最近、CodePipelineのビルドステージで
「え！こんなこともできるんだ！」と感動したことがあるので共有いたします。
　

構成

事前に作成するリソース

デプロイ先の S3バケット

CodePipelineを作成する

Build custom pipelineを選択

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

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

トリガーを設定する

今回は GitHub リポジトリの devブランチのdirectory-A/private直下のすべてのファイルを指定したいため directory-A/private**と設定
　
　
　

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

【プロジェクトを作成する】を選択

　

→ 新しいwindowが開く
　

ビルドコマンドを入力

version: 0.2
phases:
 build:
   commands:
     - cd directory-A
     - cd private
     - aws s3 sync . s3://<s3バケットの名前>/

artifacts:
 base-directory: directory-A
 files:
   - 'private/*'

【Codepipeline に進む】を選択 → windowが閉じて元の画面に戻る → 【次に】を選択
　
　

④デプロイステージは追加しないので【次に】を選択 → codepipelineが作成される。

※ CodePipeline作成された後、パイプラインが自動で起動しますが、CodeBuildのサービスロールに権限が足りていないため失敗します。
　
　

CodeBuildのサービスロールに権限追加

自動で作成されている CodeBuildBasePolicy に以下のStatementを追加する

{
    "Effect": "Allow",
    "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:ListBucket"
    ],
    "Resource": [
        "arn:aws:s3:::<s3バケットの名前>",
        "arn:aws:s3:::<s3バケットの名前>/*"
    ]
}

→ Pipelineの画面に遷移し、Buildステージの【ステージを再試行】を選択

成功を確認

GitHub リポジトリの/directory-A/privateの直下のフォルダとファイルが S3デプロイされています。
　

GitHubリポジトリ

　

デプロイ先のS3バケット

　

動作確認

①GitHubリポジトリにファイルを追加 → 変更をコミット

　
②Pipelineが成功

　
　

③s3バケットの中身
　

変更前

　

変更後

[pushtest]が追加され、[text12]が上書きされました。
　

まとめ

ビルドステージでbuildコマンドにaws s3 sync . s3://{s3バケット名}を入力するだけで、
deployステージを作成する必要がなくなりました。
　

aws s3 sync . s3://{s3バケット名}コマンドは
・既存ファイルは上書き、新規ファイルは追加
・ファイル削除は反映されない。削除したい場合はコマンドの追加が必要

ビルドコマンドを工夫することで、より詳細な設定ができそうですね。
　
　

追記

・CloudFront＋S3(静的サイト)でキャッシュの削除が必要な場合
　

ビルドコマンドを追加

- aws cloudfront create-invalidation --distribution-id <CloudFrontのディストリビューションID> --paths "/*"

　
　
CodeBuildのサービスロールに以下のポリシーを追加

      {
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation"
            ],
            "Resource": "<CloudFrontディストリビューションARN>"
        }

・ソースコードにTSファイル(.ts)とTypeScript Reactファイル(.tsx)が含まれる場合

バイナリファイルとしてデプロイされてしまうため、
以下のビルドコマンドを追加すると
content-typeを"application/typescript"に設定することができます。

- aws s3 cp . s3://<S3バケットの名前>/ --recursive --exclude "*" --include "*.tsx" --include "*.ts" --content-type "application/typescript" --metadata-directive REPLACE