はじめに

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

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

やること

こんな感じの作ります。全て無料枠で済ませるので可用性とかセキュリティとかは放置です笑笑
レジストリにもDocker Hubを利用し意地でもお金をかけません。

Webアプリの作成

Reactで超簡単に作りました。
Reactで作ったものをコンテナ化するためにはどうすれば良いか等勉強するためでもあります。

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

動いたので問題なしですね。

Docker Hub Registory

今回はレジストリにDocker Hubを利用します。
以下からアカウント、レジストリを作成します。
https://hub.docker.com/

Azure DevOps

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

プロジェクトの作成

以下にアクセスし、Azure DevOpsのプロジェクトを作成します。
https://dev.azure.com/

Docker Hubとの連携

設定の「Service Connection」からDocker hubと連携します。

ReposにコードをPushする

ここはGitを同じ要領で行えます。
ペッとやっちゃいましょう。

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を使用しています。

こうなったらOKです。

Pipelineを動かしてみる。

RUNしてみましょう。
エラーが発生しなければDocker hub Registoryに追加されるはずです。

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

Azure App Serviceの構築

無料枠のみで作っちゃいます。
Image:tagは/<レポジトリ名>:latestで良いです。
この性能でどこまでできるか限界を試してみたいですね笑笑

アクセスしてみる

Azure App Serviceに記載されているURLにアクセスしてみます。
WEBサイト画面が表示されたら成功です！！

CI/CD環境を試してみる。

コードを更新してAzure ReposにPushしてみます！！
しっかりパイプラインが回っていますね〇

デプロイもされていました！！

おわり

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

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