Chapter 08

CloudFormation-client

sotaro116

2022.10.27に更新

このチャプターの目次

クライアント
CodeCommit リポジトリの作成
CodeCommit リポジトリの引き込み
クライアント資源の修正
おまけ

クライアント

CodeCommit リポジトリの作成

CodeCommit コンソールを開く。
リージョンが東京 (ap-northeast-1) であることを確認する。違う場合、東京に設定する。
▼ ソース＞リポジトリページで「リポジトリを作成」を選択。
リポジトリ名に任意の名前を入力。（今回は API 資源のリポジトリを作成するため training-client-{グループ番号}）
「作成」を選択。

CodeCommit リポジトリの引き込み

CodeCommit コンソールを開く。
▼ ソース＞リポジトリページの右側にある「URL のクローン」から、上記で作成したリポジトリの「HTTPS」を選択。Git リポジトリのクローンを作成するアドレスがクリップボードにコピーされる。
ターミナルまたはコマンドラインで、ローカルリポジトリを保存するディレクトリに移動する。（例：/work）
次のコマンドを実行してリポジトリをローカルにクローンする。その際、認証情報を聞かれるため、IAM ユーザーのアクセスキーとシークレットキーを入力する。
```
git clone https://codecommit-at-317076571640:4vPK4LHeWG1fAGp3rB%2FsYUo2ifzp6%2F6hpD7%2FaqoCIgU%3D@git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/demo-digi-client-for-pipeline
```
認証に成功すると、ローカルに training-client-{グループ番号} という名前のディレクトリが作成される。
it ブランチを作成してリモートにプッシュ
it 用のパイプラインを作成（apiと同様に修正箇所あり）

client-pipeline-template.yaml

AWSTemplateFormatVersion: 2010-09-09
Description: Demo-digi-client template
# 環境変数
Parameters:
  Env:
    Type: String
    AllowedValues:
      - "it"
      - "st"
      - "uat"
      - "stg"
# Conditionsによる環境の制御
# IsItはEnvがitの時にtrue
# IsStはEnvがstの時にtrue
# IsStはEnvがuatの時にtrue
# https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/conditions-section-structure.html
Conditions:
  IsIt: !Equals [!Ref Env, it]
  IsSt: !Equals [!Ref Env, st]
  IsUat: !Equals [!Ref Env, uat]

Resources:
  #------------------------------------------------------
  # 開発環境 SAMテンプレートをパッケージするCodeBuildプロジェクト
  #------------------------------------------------------
  DevDeployCodeBuildProject:
    # CodeBuildの設定
    # https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-codebuild-project.html
    Type: AWS::CodeBuild::Project
    # 名前設定
    Properties:
      # グループ番号を設定
      # コードビルドプロジェクトの名前
      Name: digi-Client-Pipeline-{グループ番号}
      Description: Build project for packaging SAM template
      # CodeBuildで出力されるアーティファクトの出力設定
      Artifacts:
        # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-artifacts.html
        Type: CODEPIPELINE
      # CodeBuildの環境設定
      # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-environment.html
      Environment:
        Type: LINUX_CONTAINER
        ComputeType: BUILD_GENERAL1_MEDIUM
        Image: aws/codebuild/amazonlinux2-x86_64-standard:4.0
        # 環境変数の設定
        # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-environmentvariable.html
        EnvironmentVariables:
          - Name: Env
            Value: !Ref Env
          - Name: WEBBUCKET
            Value:
              # if文条件式 第一引数がtrueなら、第二引数　第一引数がfalseなら第二引数が選択される。
              # https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-conditions.html#intrinsic-function-reference-conditions-if
              !If [
                IsIt,
                # itのs3出力先を記述
                # [要修正]各グループのS3出力先を入力（画面資源を置く場所）
                !Sub s3://配置先のS3バケット名,
                !If [
                  IsSt,
                  # stのs3出力先を記述
                  "s3://",
                  !If [
                    IsUat,
                    # uatのs3出力先を記述
                    "s3://",
                    # it,st,uatのどれでも無かった場合の出力先を記述
                    "s3://",
                  ],
                ],
              ]
          - Name: DEFAULT_REGION
            Value: ap-northeast-1
      # CodeBuildで利用するIamRoleの設定
      ServiceRole: "arn:aws:iam::317076571640:role/CodePipelineRole"
      # BuildSpecの設定
      # https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codebuild-project-source.html
      Source:
        #どの名前のファイルをCodeBuild実行時に実行するか設定
        BuildSpec: "buildspec.yaml"
        Type: CODEPIPELINE

  #------------------------------------------------------
  # 開発環境 CodeCommitリポジトリからアプリをデプロイするCodePipeline
  #------------------------------------------------------
  DevDeployPipeline:
    # CodePipelineの設定
    # https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-codepipeline-pipeline.html
    Type: AWS::CodePipeline::Pipeline
    Properties:
      # アーティファクト保存場所(アーティファクトとはソースコード・定義ファイルとかの集合体)
      # [要修正]
      ArtifactStore:
        Location: アーティファクトの保存場所を記載
        Type: S3
      # [要修正]各グループのパイプライン名を指定
      Name: !Sub "demo-digi-client-グループ名-1027-${Env}"
      RoleArn: "arn:aws:iam::317076571640:role/CodePipelineRole"
      # Stageの設定 今回CodePipelineで利用するStageはSource(CodeCommit)とBuild(CodeBuild)
      # https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-codepipeline-pipeline-stages.html#cfn-codepipeline-pipeline-stages-actions
      Stages:
        - Name: Source
          # Actionsでこのステージは何をするステージか設定する
          # ActionTypeId: ソース元の設定(CodeCommit以外にGitHubやBitBucketがある)
          # Configuration: 詳細の設定　下述 ConfigurationはActionTypeIDによって内容が異なる
          # OutputArtifacts: このステージが出力するアーティファクト名の設定
          # https://docs.aws.amazon.com/codepipeline/latest/userguide/reference-pipeline-structure.html#action-requirements
          Actions:
            - Name: Source
              ActionTypeId:
                Category: Source
                Owner: AWS
                Provider: CodeCommit
                Version: 1
              # 変更検出された場合に動くトリガー 今回はdemo-digi-apiのEnvブランチが変更されたらパイプラインが起動する
              # https://docs.aws.amazon.com/codepipeline/latest/userguide/reference-pipeline-structure.html#action-requirements
              Configuration:
                # [要修正]各グループのリポジトリ名を指定
                RepositoryName: 各自のクライアント資源リポジトリの名前指定
                BranchName: !Ref Env
              OutputArtifacts:
                - Name: SourceZip
        - Name: Build
          # Actionsでこのステージは何をするステージか設定する
          # ActionTypeId: ビルドするステージを選択(CodeBuild以外じJenkinsがある)
          # Configuration: 詳細の設定 DevDeployCodeBuildProject ConfigurationはActionTypeIDによって内容が異なる
          # InputArtifacts: このステージが入力するアーティファクト名の設定()
          # OutputArtifacts: このステージが出力するアーティファクト名の設定
          # https://docs.aws.amazon.com/codepipeline/latest/userguide/reference-pipeline-structure.html#action-requirements
          Actions:
            - Name: Build
              ActionTypeId:
                Category: Build
                Owner: AWS
                Provider: CodeBuild
                Version: 1
              Configuration:
                ProjectName: !Ref DevDeployCodeBuildProject
              InputArtifacts:
                - Name: SourceZip
              OutputArtifacts:
                - Name: BuiltZip

ENV:itを指定

クライアント資源の修正

aws-training-digidept-work-devからcloudformation研修用_クライアント.zipのnode_modules以外のファイルをクライアントリポジトリにコピーする
it 環境の.env ファイルを作成

ルート直下に config フォルダを作成。中に.env.it ファイルを作成
今まで DynamoDB にアクセスするため APIGataway の url を直接書いていたが、こちらに転記する

API_ENDPOINT=XXXXXX

dotenv,cross-env を導入する

ターミナルで npm i @nuxtjs/dotenv
ターミナルで npm i cross-env
package.json scripts に追加

"generate:it": "cross-env PRACTICE_ENV=it nuxt build",

nuxt.config の修正
- 1 行目に追加

  const envPath = `./config/.env.${process.env.PRACTICE_ENV || 'local'}`
  require('dotenv').config({ path: envPath })

nuxt.config の modules 修正

    modules: [
    [
      '@nuxtjs/dotenv',
      {
        filename: envPath,
      },
    ],
  ],

buildspec.yaml を追加

buildspec.yaml

version: 0.2
phases:
  install:
    runtime-versions:
      nodejs: 16
    commands:
      - cd $CODEBUILD_SRC_DIR;
      - npm install
      - ls
  pre_build:
    commands:
      - echo 'pre build'
      - npm run test
  build:
    commands:
      - echo 'EXEC build(nuxt generate)'
      - ls
      # $Envは環境変数　
      - echo $Env
      - npm run generate:$Env
      - ls dist
  post_build:
    commands:
      - echo Entering postbuid phase
      # aws s3 sync コマンド $CODEBUILD_SRC_DIR/distと$BUCKETを同期（一致）させる
      - aws s3 sync $CODEBUILD_SRC_DIR/dist $WEBBUCKET
      # aws s3 cp コマンド $CODEBUILD_SRC_DIR/error.htmlを$BUCKETにコピーする
      # - aws s3 cp $CODEBUILD_SRC_DIR/error.html $BUCKET
      - echo sync complete
      - echo Build completed on `date`
# CodeBuildの出力
artifacts:
  files:
    #dist配下の資源全量をアーティファクトとして返却
    - dist/**/*

it ブランチで修正分を再度 push
DynamoDBに画面資源に合う形でデータを投入する（画面資源を直してもOK）
lambdaのテーブル名を修正する
動作確認する

おまけ

lambda を追加して API を増やしてみる