LoginSignup
3
2

More than 3 years have passed since last update.

AWS CodePipelineでGitHubのソースをS3へデプロイする

Last updated at Posted at 2021-03-18

はじめに

CodePipeline 設定手順の備忘録。

やりたいこと

  • GitHubへのpushをトリガーにして、S3に自動デプロイしたい
  • 環境を分けたい(開発、ステージング、本番)
  • デプロイ結果をslack通知したい

構成図

code1.png

※ ng new コマンドで作成した Angular のサンプルコードをデプロイします。

設定手順

1. CodePipeline の設定

「パイプラインの作成」から作成を開始します。
スクリーンショット_2021-03-14_22_17_22(2).png

パイプライン名を入力して、初回はロールを新規で作成します。
1.png

ソースプロバイダーはGitHubを選択。(バージョン1は非推奨となっているため、バージョン2を選択。)

参考:

スクリーンショット 2021-03-14 22.16.06(2).png

「新しいアプリをインストールする」を選択。
3.png

リポジトリを選択し、「Install」を押下します。
5.png

CodePipelineの設定画面に戻るので、リポジトリとブランチを選択します。
(開発やステージング、本番で環境を分けて使う場合は、環境ごとにブランチとパイプラインを作成するのがいいのでしょうか?) → 環境ごとにブランチを分ける、というのは本来のgitの使い方ではないためNG
7.png

次にビルドステージを設定します。
AWS CodeBuild と Jenkins が選択可能ですが、ここでは AWS CodeBuild を選択。
「プロジェクト名」項目では、「プロジェクトを作成する」を選択する。
9.png

プロジェクトを作成します。
(ここで設定した環境変数は、buildspec.ymlで呼べるらしい。)
screencapture-ap-northeast-1-console-aws-amazon-codesuite-codebuild-project-new-2021-03-14-14_31_45.png

最後にデプロイステージの設定。S3を選択します。(バケットは事前に作成しておきます)
10.png

設定が完了すると、設定したパイプラインが実行されますが、CodeBuild の実行で失敗します。
CodeBuild を実行するには、buildspec.yml というyamlファイルにビルド時に実行するシェルコマンドを記述し、デプロイするソースコードのルートディレクトリに配置する必要があります。
12.png

ルートディレクトリに以下のような buildspec.yml を作ります。
ng build で出力された dist ディレクトリ配下のファイルを S3 にアップロードしています。

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - npm install -g
      - npm install --save-dev @angular-devkit/build-angular
      - npm install -g @angular/cli
  build:
    commands:
      - ng build
      - aws s3 sync dist s3://src-2021/application
artifacts:
  files:
    - '**/*'
  base-directory: 'dist*'

参考:

(runtime-versions で指定する node.js のバージョンは、10と12のみのようです。)
node_error.png

buildspec.yml を git push すると、パイプラインが実行され、今度は成功です。
success.png

S3 にデプロイされました。
S3.png

備考:
CodeBuild のロールに S3 へのアクセス許可ポリシーをアタッチしておく必要あり。
iam_error.png

2. slack への通知設定

CodePipeline, CodeCommit, CodeBuild は、SNS もしくは ChatBot と連携ができるので、
ChatBot と連携させて slack 通知します。
通知_pipeline.png

成功や失敗時以外にも、トリガーとなるイベントがいろいろ選択可能です。
通知_pipeline2.png

設定後、再度パイプラインを実行して、slack通知を確認できました。
slack.png

以上で設定完了です。

追記

・GitHubへのpushをトリガーするというのは、手軽にデプロイができすぎてしまうので、本番環境の場合は考える必要がある。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2