2021.08-CICD-01

Transcript

1. Amplify Consoleでしか 　
   CICDできなかったけど..。
   @w2or3w
   2021.08.27 JAWS-UG浜松 AWS勉強会 2021#8
   

   View Slide

2. Amplify ConsoleでしかCICDできなかったけど..。
   ・静的WebサイトをAmplifyConsoleでCICD
   ・静的WebサイトをCode PipelineでCICD
   (おまけ : GoのWebアプリをCode PipelineでCICD)
   今日やること
   CICD
   やってるマン！
   (プライベートで
   AmplifyConsoleだけ)
   CICD
   担当マン！
   (本業でもやってる )
   ちょっと
   進化した
   

   View Slide

3. ナカムラ ツカサ (38)
   浜松市在住の
   リーマンアプリケーションエンジニア
   好き：
   サーバーレスWebアプリ制作
   データレイク・データ連携
   Amplify, Lambda, DynamoDB, AppSync
   S3, Athena, Glue, StepFunctions
   転職して2ヶ月
   　Webアプリ(Nuxt)の実装しつつ、
   　CICD担当としてAWSと戯れる日々。
   @w2or3w
   2(ツー) or(~か) 3(サン)
   自己紹介
   

   View Slide

4. https://aws.amazon.com/jp/amplify/hosting/ https://aws.amazon.com/jp/codepipeline/
   Amplify Console / CodePipeline
   

   View Slide

5. 1. Amplify Consoleでアプリ作成
   2. リポジトリとブランチを選択
   3. ビルドの設定 (テストや環境変数もここに含まれる
   )
   4. 確認
   静的Webサイトを
   Amplify ConsoleでCICD
   

   View Slide

6. 1. S3バケットの作成
   2. S3バケットの設定(パブリック許可、ホスティング有効)
   3. Code Pipelineでパイプライン作成
   4. 　リポジトリとブランチを選択
   5. 　ビルドの設定 (テストや環境変数もここに含まれる
   )
   6. 　デプロイの設定(プロバイダ=S3)
   7. 　確認
   静的Webサイトを
   Code PipelineでCICD
   

   View Slide

7. Code Pipelineで担う範囲に限定すれば、Amplify Consoleと大体同じ。
   (a)ソースステージ、(b)ビルドステージ、(c)デプロイステージ
   　・・・この辺りはアプリケーションエンジニアの領域！
   (a)
   (b)
   (a)
   (b)
   (c)
   

   View Slide

8. やってみよう！
   

   View Slide

9. 1. yarn dev で簡易サーバーを立ち上げて実行
   2. yarn run generate でビルドされた静的コンテンツを出力
   3. aws s3 cp コマンドでアップロード
   静的Webサイトを
   ローカルで実行したり、
   コマンドラインでデプロイする
   

   View Slide

10. (a) ソースステージ
    Amplify Console Code Pipeline
    GitHub(バージョン2)が推奨されているが、
    AmplifyConsoleでは選択できない。
    

    View Slide

11. (b) ビルドステージ
    Amplify Console Code Pipeline
    artifactsの baseDirectory の指定に
    若干差異があるが、だいたい同じ。
    (！）本当は、
    　　nodeのバージョンを指定したり、
    　　テストを実行したりするのが望ましいが、
    　　割愛している。
    

    View Slide

12. (c) デプロイステージ
    Amplify Console Code Pipeline
    　なし
    

    View Slide

13. CICDしてる様子
    Amplify Console Code Pipeline
    

    View Slide

14. おまけ：GoのWebアプリをCode PipelineでCICD
    ビルドステージ
    1. リポジトリ(ECR)の作成
    2. CodeBuildプロジェクト作成
    ※ビルドステージ (ECRとCodeBuild)とデプロイステージ (ECS)は
    　それぞれ事前に作成しておいてから、パイプラインでそれらを選択します。
    ※DockerHubにログインしておかないと、
    　「Too Many Requests」というエラーによりビルドが失敗することがあります。
    　( https://dev.classmethod.jp/articles/codebuild-has-to-use-dockerhub-login-to-avoid-ip-gacha/ )
    ※DockerfileはBuildspecに直接書いても良いですが、
    　このサンプルではソースコードと同じ場所にあるファイルを利用しています。
    　( https://github.com/ww2or3ww/learn-run-go/blob/main/03.webapp/webapp/Dockerfile.release )
    　なお、Buildspec自体もソースコードと同じ場所に作成しておくこともできます。
    

    View Slide

15. おまけ：GoのWebアプリをCode PipelineでCICD
    デプロイステージ
    1. ECSのタスクをFAGATEとして作成
    (コンテナは先ほど作成したECRを指定)
    2. ECSのクラスターを作成
    3. 作成したクラスターにサービスを作成
    (タスクは上で作成したタスクを指定
    )
    (ターゲットグループを作成する必要あり
    )
    (VPC, サブネット, セキュリティグループ, ALBも必要)
    この辺りはインフラ色が強く、アプリ担当の出番はない領域かもしれません。
    私も全てでなく、一部のみ担当しています。
    　インフラ担当 ：VPC、サブネット、セキュリティグループ、 ALB、ECSクラスター
    　アプリ担当 (私) ：ECSタスク、ECSサービス、ターゲットグループ
    今感じている辛み
    　環境変数が多くて辛い
    　・SystemManagerのパラメータストアに実際の値を設定
    　　(機密情報は、さらに Secrets Managerへの登録も。 )
    　・タスクのコンテナ設定では、パラメータストアのパスを指定
    　
    

    View Slide

16. Enjoy Deploy🚀
    Thank You !!
    @w2or3w
    

    View Slide