自動でデプロイ「CodeBuild,CodePipeline」

CodeBuildやCodePipelineを使うと、レポジトリにプッシュすると自動でデプロイすることができます。例えば、Reactアプリを作成して、masterブランチにプッシュすると、自動で指定したS3にビルド結果をアップロードしてくれます。デプロイ作業を自動化できるので便利です。

S3バケットの準備

S3バケットを作成します。S3を一般公開しておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::あなたのバケット名/*"
        }
    ]
}

これでURLからS3にアクセスできるようになります。

フォルダ指定でindex.htmlにアクセスできるようにするために、静的ウェブサイトホスティングを有効にします。「設定>静的ウェブサイトホスティング」を編集し、有効にします。インデックスドキュメントとエラードキュメントを設定します。index.htmlとerror.htmlで問題ないかと思います。

IAMユーザーの準備

以下のポリシーをもったユーザーを作成します。このIAMユーザーは先ほど作ったS3にアクセスできます。ビルド後に、このIAMユーザーにS3へのビルドファイルを転送させるのに使用します。Access key IDとSecretは後で使うので取得しておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::あなたのバケット",
                "arn:aws:s3:::あなたのバケット/*"
            ]
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::あなたのバケット/*"
        }
    ]
}

CodeBuildの準備

CodeBuildでビルドプロジェクトを作成します。

  • 名前:プロジェクトの名前です。
  • ソース:レポジトリとブランチを指定してください。
  • 環境:マネージド型を選択します。OSはUbuntu、ランタイムはStandard、イメージはaws/codebuild/standard:3.0、イメージバージョンは常に最新、環境タイプはLinuxとします。

CodePipelineの準備

CodePipelineを準備します。

  • パイプライン名を記入します。自動で必要なロールが作られます。
  • ソースは準備したものを使用します。
  • ビルドは準備したものを使います。この際、作成したIAMユーザーのAWSACCESSKEYIDとAWSSECRETACCESSKEYを環境変数にいれておきます。
  • デプロイは使用しないのでスキップします。

buildspecの準備

buildspec.ymlファイルを以下のように準備します。

version: 0.2

phases:
  install:
    commands:
      - touch .npmignore
      - npm install -g gatsby
  pre_build:
    commands:
      - echo Entring app directory
      - cd react-app
      - npm install
  build:
    commands:
      - echo Build started on `date`
      - npm run build
  post_build:
    commands:
      - aws s3 sync public/ s3://あなたのバケット --delete --acl public-read

各項目の意味は以下の通りです。

  • version:ビルドスペックのバージョンです。
  • phases:処理の流れを記述します。
  • install:ビルドに必要な環境構築の処理を行います。
  • pre_build:ビルド前の処理を行います。
  • build:ビルドを行います。
  • post_build:ビルド後の処理を行います。ここではAWS CLIによりpublicフォルダをs3バケットと同期しています。publicは環境に応じて名前を変えてください。

レポジトリの方にbuildspec.ymlファイルをあげておきます。以下のような構成になります。

repository-root/
├── buildspec.yml
└── react-app
    ├── README.md
    ├── build
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    ├── src
    ├── tsconfig.json
    └── yarn.lock

確認

最後に、指定したブランチにプッシュします。すると、自動的にビルドされ、S3に格納されます。失敗した場合は、マネージメントコンソールにログが表示されるので、確認してバグを取り除きます。

ZIDO Corp. ALL RIGHTS RESERVED.