More than 1 year has passed since last update.

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

Posted at 2023-07-28

はじめに

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