Azure App Service + DevOpsを用いて無料でCI/CD環境を作ってみた

# はじめに
AZ-104の勉強をしているときにApp Serviceに興味を持ったので構築して遊んでみたお話。

Azureって無料枠があって安く使える感出しながら無料枠以外はめちゃ高いよね、ってことで、
レジストリにDocker Hubを利用したりして無料でCI/CD環境を構築したった。
(Azure Registoryはいっちゃん安いので月600円ほど)

# やること
こんな感じの作ります。全て無料枠で済ませるので可用性とかセキュリティとかは放置です笑笑
レジストリにもDocker Hubを利用し意地でもお金をかけません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/7e90dcf7-b811-7504-50a1-5a884fe6885b.png)

# Webアプリの作成
Reactで超簡単に作りました。
Reactで作ったものをコンテナ化するためにはどうすれば良いか等勉強するためでもあります。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/ffb63234-91f6-7a43-7518-b9d1419a81bf.png)

# Dockerfileの作成
Chat GPT先生にDockerfile作って～ってお願いしました笑笑
しかもこれで動きそうなのでそのまま行きます。
```
# ベースイメージを指定します
FROM node:14-alpine

# コンテナ内の作業ディレクトリを設定します
WORKDIR /app

# package.jsonとpackage-lock.jsonをコピーして依存関係をインストールします
COPY package*.json ./
RUN npm install

# ソースコードをコピーします
COPY . .

# ビルドコマンドを実行します
RUN npm run build

# アプリを起動します
CMD [ "npm", "start" ]
```
## ローカルで動くか試してみる
ローカル環境にDockerをインストールして動くか試してみます。
```
$docker build ./app -t app
$docker run -p 80:3000 app
> app@0.1.0 start /app
> react-scripts start
```
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/4ad03f8d-4f2f-a957-1ac8-0fd1d8ff101a.png)
動いたので問題なしですね。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/a154ee42-e259-a390-0d15-719e7fae4e0e.png)

# Docker Hub Registory
今回はレジストリにDocker Hubを利用します。
以下からアカウント、レジストリを作成します。
https://hub.docker.com/
![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/1e70b50c-2118-1506-0fbd-e748edaa0e22.png)


# Azure DevOps
Azure DevOpsは、アジャイル開発を支援する5つのサービス（Boards, Repos, Test Plans, Pipelines, Artifacts）を内包しています。
今回はコード管理とCI/CD環境の構築のためReposとPipelinesを使用します。

## プロジェクトの作成
以下にアクセスし、Azure DevOpsのプロジェクトを作成します。
https://dev.azure.com/
![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/341deb85-a64d-d6fc-af1a-0eb837cf8194.png)


## Docker Hubとの連携
設定の「Service Connection」からDocker hubと連携します。
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/5e16b6fd-94f7-c912-8cb6-5da1fea26b86.png)

## ReposにコードをPushする
ここはGitを同じ要領で行えます。
ペッとやっちゃいましょう。
![13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/a1699c82-4451-2caf-e6d1-bdfd4127410a.png)

## Pipelinsの作成
レポジトリにAzure Reposを選択します。
azure-pipelines.ymlを以下のように作成します。
```
# Docker
# Build a Docker image
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker

trigger:
- master

resources:
- repo: self

variables:
- group: shingo_secret
- name: imageName
  value: 'simple-application-azure:$(build.buildId)'

stages:
- stage: Build
  displayName: Build image
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: ubuntu-latest
    steps:
      - script: |
          docker build -t <Docker HubのID>/<レポジトリ名> .
          docker login -u <Docker HubのID> -p $(DOCKER_HUB_PWD)
          docker push <Docker HubのID>/<レポジトリ名>
        displayName: 'docker build'
```

Docker hubにログインするパスワードを直打ちするのはさすがにまずいのでAzure PipelinesのLibraryを使用しています。
![17.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/c7cf7588-8f62-6d29-fea7-13ccc03c4f4c.png)

こうなったらOKです。
![15.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/3ac9ddf8-1b15-05d2-c269-812888bd05f8.png)


## Pipelineを動かしてみる。
RUNしてみましょう。
エラーが発生しなければDocker hub Registoryに追加されるはずです。
![19.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/428a5dcc-7dc8-004b-1fae-fe796a1a1724.png)

CI/CD環境の構築は完了です〇

# Azure App Serviceの構築
無料枠のみで作っちゃいます。
Image:tagは<Docker HubのID>/<レポジトリ名>:latestで良いです。
この性能でどこまでできるか限界を試してみたいですね笑笑
![20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/5dee3adf-25b4-273a-3eb2-094072a1c4f1.png)

## アクセスしてみる
Azure App Serviceに記載されているURLにアクセスしてみます。
WEBサイト画面が表示されたら成功です！！
![21.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/f4b5c509-9f95-eada-d0c2-5e4582d455d3.png)

# CI/CD環境を試してみる。
コードを更新してAzure ReposにPushしてみます！！
しっかりパイプラインが回っていますね〇
![23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/330b06d2-f6ef-c1be-f25f-f239cf8d6602.png)
デプロイもされていました！！
![25.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3138153/2bf63b17-cd3a-b64e-748f-d308a050dc8c.png)

# おわり
完全無料でCI/CD環境付きのWebアプリケーション実行環境を作成することができました！
Azure App Serviceが無料枠なんで1日1時間しか公開できないですが、逆に言うとApp Serviceをアップグレードするだけで本番環境にもできちゃうものを作成しました。

最近またAWSのサーバレスサービスに興味持ち始めたので次はそっちをやろうかな。