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

ishihara.m

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

構成

file
　
　

事前に作成するリソース

  • デプロイ先の S3バケット
    　

CodePipelineを作成する

Build custom pipelineを選択
file

　

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

file

　

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

file

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

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

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

→ 新しいwindowが開く
　
file

file
　

ビルドコマンドを入力
file

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

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

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

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

file

※ 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ステージの【ステージを再試行】を選択

　

　

成功を確認

file
　
　

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

GitHubリポジトリ
file
　

デプロイ先のS3バケット
file
　

　

動作確認

①GitHubリポジトリにファイルを追加 → 変更をコミット
file
　
②Pipelineが成功
file
file
　
　

③s3バケットの中身
　

変更前
file
　

変更後
file

[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
Last modified: 2024-12-05

Author