【CICD】AWS CloudFormation × GithubAction で CICD自動化実装！ ECSにデプロイする

最近、よく耳にするCICD。
私が所属している会社でもCICDの自動化ツールが求められることが多くなってきました。
先日、**CICDについての実演会** を自社で実施したこともあり、CICDをハンズオンで理解できる記事を書こうと思います。
本ブログでは、**CICD** を知り、 **AWS CloudFormation** と **GithubAction** で **ECS にアプリケーションをデプロイ** した成果物を紹介し、成果物の説明をします。
そうすることで、CICDを知らない方でも、理解が深まる記事になればと思っています。

## CICDとは何か？

CI(継続的インテグレーション) / CD(継続的デリバリー) 
インテグレーションは統合という意味です

![](https://storage.googleapis.com/zenn-user-upload/3b6e9011b300-20231029.png)

画像の引用元 : https://www.servicenow.com/jp/products/devops/what-is-cicd.html
**CICDは上記画像のように開発サイクルのことであり、CICD自体が何かシステムということではありません**
それを踏まえたうえで、**CICD自動化ツールが何故必要なのか**・**CICDの自動化**では何を自動化するのかを紹介します

### CICD自動化ツールの必要性

近年、IT技術の進化が凄まじくそれに伴いユーザーのニーズも流動的になっていると思われます。
それに伴い、企業もアプリケーションの変更も迅速に行わなくては **市場のニーズや変化についていけず競争力を保てなくなってしまいます**

CICD自動化ツールは **CICD開発サイクルの一部を自動化し、アプリケーションの変更を迅速にすることで競争力を保つ**　ことができます

### CICDでは何が自動化されるのか

※コンテナでアプリケーションやサーバの構築経験がないと想像がつきにくいです

- CI
  - アプリケーションに変更を加えた際の **イメージのビルド** や **単体テスト** を自動化
  - 開発したソースコードやImageに **脆弱性がないか診断** や **プログラムのお作法**に問題は無いか等の、**静的なコード診断**
- CD
  - 開発したアプリケーションを **実行環境 (開発・検証・本番)** へ **デプロイ(アプリケーションの完全な置き換え) ** する
  - 安全にアプリケーションをデプロイ(置き換える)ために、アプリケーションを少しずつ配置する、**リリース**。

※本番環境へのデプロイは検証環境でエビデンスを取って、チームでレビューしてから実施すると思われます


## 構築
本来バックエンドアプリケーションに httpリクエストを送信し、資格情報を表示するアプリケーションなため、コード内に不要なネットワークも含まれますmm 

### 成果物

GithubでPR(プルリクエスト)を発行し、パイプラインが動き、ECSに新しいアプリケーションがデプロイされています

#### 変更内容
ボタンにカーソルを合わせたときにボタンの色が、青から緑になる変更を加えています

#### デプロイ中のアプリの挙動
![](https://storage.googleapis.com/zenn-user-upload/00f1805ca30e-20231101.gif)

#### デプロイ中のコードデプロイの様子(リリース状況)
![](https://storage.googleapis.com/zenn-user-upload/d49f31aad56a-20231029.png)

### 全体構成
![](https://storage.googleapis.com/zenn-user-upload/201a78255faa-20231029.png)

## 制作したコード

### ディレクトリ構成

コード等のリソースは以下リポジトリにあります
https://github.com/GitEngHar/CiCdHandsOn

※ CICDに関わるファイルだけ以下に抜粋します。他は今回のブログとは ほぼ関係のない リソースです。

- CICDHANDSON(rootディレクトリ)
  - .github
    - workflow
      - simpleWebAppCiCd.yml
  - SimpleWebApp
    - AwsCloudFormation
      - FrontApp
        - frontApp.yml
      - network.yml
      - security.yml
    - Front
      - Dockerfile
      - index.html
  - appspec.yml

### ファイル・ディレクトリの説明

#### .github/workflow
githubActionで実行したい yml を置くディレクトリです。
ここに置いた yml に記述されてある内容でパイプライン(CI/CD)が動作します。

#### simpleWebAppCiCd.yml
CICDの挙動が記述されてある、ファイルです。この内容に従って自動でイメージが作成され、リリース、デプロイされます。

#### SimpleWebApp
シンプルなウェブアプリケーションとして、AWSで動作させるためのリソースが置いてあります

#### AwsCloudFormation
aws cloudformation は Awsのインフラをコードで管理できるサービスです。
AwsCloudFormationディレクトリ では、 CloudFormationで動作させるコードを格納しています

#### FrontApp/frontApp.yml
Awsで動作させる、フロントアプリケーション関連のリソースが定義されてあります。
主に以下のリソースを定義しています。
- ApplicationLoadBalancer
  - TargetGroup(Blue/Green)
  - ApplicationLoadBalancerListener
- ElasticContainerService
  - TaskDefinision
  - CodeDeployApplication
  - CodeDeployDeploymentGroup

#### network.yml
アプリケーションを実行するためのネットワーク環境が定義されてあります。
- VPC
- Subnet
- RouteTable
- InternetGateway 

#### security.yml
各リソースで定義するロールやセキュリティグループを定義しています。
- securitygroup
- role

#### Front
フロントアプリケーションのイメージ元となるファイルを置いておくディレクトリ

#### DockerFile
DockerImageとして、アプリケーション(index.htmlを表示するウェブサーバー)をビルドするためのファイル

#### index.html
アプリケーションにアクセスした際に画面に表示されるwebページ

こちらの記事は 2023/11 に記述したものなので、近い年の環境であれば動作すると思われます。
記事の需要が高そうであれば、デプロイするまでの手順も記述しようと思います。
それでは、良いCICDライフを。