GithubActions → Amazon ECR → AppRanner デプロイ

# 概要
どうも、こんにちは。今回は、GithubActions で dockerImage(Nginx) を Amazon ECR へプッシュして、そのイメージを AppRanner へ自動デプロイする方法を書いてきます。
# 前提
- Github アカウントを作成済み
- AWS アカウント作成済み
# やってみる
## 構成
```text:構成
.
|-- .github -- workflows -- ecr_push.yml
|-- default.conf
|-- Dockerfile
|-- index.html
```
## 各ファイルを記述
- Nginx の dockerfile
```dockerfile:Dockerfile
FROM nginx:latest

EXPOSE 80

COPY ./default.conf /etc/nginx/conf.d/
COPY ./index.html /var/www/html/

RUN service nginx start
```
```text:default.conf
server {
    listen 80;
    server_name docker_nginx;
    charset UTF-8;

    location / {
        root /var/www/html; 
        index  index.html index.htm; 
    } 
}
```
- HTML はこれだけ
```html:index.html
<h1>Hello World!</h1>
```
- GithubActions
バージョンtag をGithub へプッシュをトリガーに自動で AmazonECR にイメージを登録する
```yaml:ecr_push.yml
name: Docker image push to ECR

on:
  push:
    tags:
      - v*
    workflow_dispatch:
jobs:
  build_and_push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-west-2
      
      - name: Login to ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1

      - name: Build and push image to ECR
        uses: docker/build-push-action@v2
        with:
          context: .
          push: true
          tags: ${{ steps.login-ecr.outputs.registry }}/${{ secrets.AWS_ECR_REPO }}:latest
```
## IAM ユーザーを設定
Amazon ECR にアクセス出来る権限を持った IAM ユーザーを作成し、Github リポジトリへ`アクセスキー` と `シークレットキー` を登録します。
- IAM ユーザーを作成
アタッチするポリシー
```json:IAM ポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "ecr:GetAuthorizationToken",
                "ecr:BatchGetImage",
                "ecr:BatchCheckLayerAvailability",
                "ecr:CompleteLayerUpload",
                "ecr:GetDownloadUrlForLayer",
                "ecr:InitiateLayerUpload",
                "ecr:PutImage",
                "ecr:UploadLayerPart"
            ],
            "Resource": "*"
        }
    ]
}
```
- Github リポジトリへ `secret` を登録
対象のリポジトリ -> setting -> secrets -> actions -> New repository secret で登録できます。
![スクリーンショット 2022-07-17 10.56.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/ad4eea36-98b5-f18d-43c1-2b7305300c0b.png)
## ECR リポジトリを作成
ECR リポジトリを作成して、そのリポジトリ情報を Github へ登録
AWS ログイン -> ECR -> Repositories -> リポジトリ作成
![スクリーンショット 2022-07-16 15.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/ea2219bb-21e8-1309-7bbe-490052c17b99.png)
- ECR リポジトリ名を Github secrets に登録（今回は、`sample` の部分）
![スクリーンショット 2022-07-17 11.04.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/6a30225a-3cd5-2c36-725f-def081a4bf9f.png)
## Github Actions を使って Amazon ECR へイメージをプッシュ
![スクリーンショット 2022-07-17 11.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/e2e2839c-211e-7004-62f4-72d23361d1c2.png)
## AWS App Runner を登録
AWS ログイン -> App Runner -> App Runner サービスを作成
![スクリーンショット 2022-07-17 11.11.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/75a7e588-aaa1-0edd-a722-da0db8b54e94.png)
- デプロイが終わったら、App Runner の URL へアクセス
![スクリーンショット 2022-07-16 21.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733843/4bd79e4d-13af-0e4d-beca-3ad652ddc5a3.png)
無事、index.html の内容が表示されました！!
ECR のイメージを更新するたびに自動でデプロイしてくれます。
（完）