$30 off During Our Annual Pro Sale. View Details »

2021.08-CICD-01

w2or3w
August 27, 2021
39

 2021.08-CICD-01

w2or3w

August 27, 2021
Tweet

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