開発サイクルを爆速にする！~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~

TECHNOLOGY
TO FIX
YOUR CHALLENGES.
開発サイクルを爆速にする！
Azure DevOpsでアプリのビルド・デプロイを⾃動化

Contents
Azure PipelinesでCI/CDを構築して、
爆速開発を実現しよう！

About Myself
河野光司 Cloud Solutions Engineer
株式会社FIXER（2020/4/1⼊社）
フロントエンド開発
バックエンド開発
データベース構築
インフラ構築
パイプライン構築
Unity開発
学⽣時代は教育学部
プログラミングはほとんどやってこなかった
クラウドの可能性に魅せられ、エンジニアになる
@koji_kono Koji Kono

1.ざっくりDevOpsの概要
2.ざっくりCI/CDの概要
3.Azure Pipelinesでビルドの⾃動化デモ
4.解説
Contents

DevOps
って知ってますか？

より素早くかつ柔軟に、信頼性の⾼いシステムをユーザーに届けるために
開発チーム(Dev) と運⽤チーム(Ops)が連携する組織⽂化
DevOps とは

「新たな機能の開発」
開発チームのミッション

「システムの安定稼働」
運⽤チームのミッション

https://ja.wikipedia.org/wiki/DevOps

DevOpsを実現するために
• 組織の⽂化づくり
• アジャイル開発の導⼊
• CI/CDの構築

CI/CD
って知ってますか？

CI - Continuous Integration（継続的インテグレーション）
開発チームの仕事を統合する

CD - Continuous Delivery（継続的デリバリー）
統合されたシステムをユーザーに届ける

要するに
アプリのテスト、ビルド、デプロイを⾃動化する技術

DevOps的な組織では、頻繁にリリースする

毎回⼿動？
テスト・ビルド・デプロイ

毎回⼿動？
テスト・ビルド・デプロイ
嫌です。

というわけで、
ビルド・デプロイを⾃動化しよう！！！

サンプルコード
https://github.com/kono-koji20-fixer/GiikusaiDevOpsDemo
ビルド・デプロイ⾃動化デモ
デモ⽤のアプリ
https://giikusai-devops-demo.azurewebsites.net

今回使うツール
Nuxt.js GitHub
Azure Container Registry
Azure Pipelines
Docker
Azure Web Apps
Azure DevOps
Webアプリケーションが簡単につくれるフレームワーク
サンプルアプリの作成に使⽤
アプリ開発のプラットフォーム
ソースコード管理のデファクトスタンダード
コンテナ技術のデファクトスタンダード
アプリのコンテナ化に使⽤
Azureが提供するコンテナ管理サービス
Docker化したアプリの格納に使⽤
簡単にアプリケーションを公開できるサービス
作成したアプリのデプロイ先として使⽤
Infrastructure as CodeでCI/CDを構築できるサービス
今⽇の主役
DevOpsを実現するためのツール群の総称
Azure Pipelinesもこの中の⼀つ

ビルド・デプロイ⾃動化フロー
main
develop
feature/*
簡易版Gitフロー https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html
Azure Pipelines
developにmerge
docker build Push to ACR Deploy to Web Apps
developブランチへのCommitをトリガーに、⾃動でビルド・デプロイ

まずは、アプリのソースコードを準備しましょう！

Step.1
アプリを作成してGitHubに公開
Nuxt.js
Webアプリケーションが簡単につくれるフレームワーク
サンプルアプリの作成に使⽤
https://ja.nuxtjs.org/
GitHub
アプリ開発のプラットフォーム
ソースコード管理のデファクトスタンダード
https://github.co.jp/

Step.2
Dockerfileを作成
Docker
コンテナ技術のデファクトスタンダード
アプリのコンテナ化に使⽤
https://www.docker.com/
Dockerイメージを作成するための
設計図になるファイル
https://github.com/kono-koji20-fixer/GiikusaiDevOpsDemo/blob/develop/Dockerfile
Dockerfileの書き⽅
https://blog.codecamp.jp/docker-file-how-to
https://qiita.com/tmiyajima/items/b099fb707bfde9337a70

Step.3
yamlファイルを作成
ビルドパイプラインを作成するときの
設計図になるファイル
https://github.com/kono-koji20-
fixer/GiikusaiDevOpsDemo/blob/develop/.azuredevops/workflows/CI-develop.yaml
Azure Pipelinesのyamlの書き⽅
https://qiita.com/sengoku/items/e832c3f1c1c8fbb98415

Azure のリソースを作って⾏きます！
アカウントとサブスクの⽤意をお願いします！

Step.4
Azure Web Appsの作成
作成したアプリをデプロイする環境を作成
AzureのWeb App for Containerなら、
コンテナ化したアプリを簡単にデプロイできる！

Step.5
Azure Container Registryの作成
コンテナ化したアプリを格納するリソース
DockerHubのAzure版

これでアプリとデプロイ先の準備完了！
CI/CDを組んでいく！

Step.6
Azure DevOpsの準備
Azure DevOps(https://dev.azure.com/)にアクセスして
作成したAzure アカウントでログイン
右上の”New project”をクリック

Step.6
Project NameやDescriptionを⼊⼒して
Createをクリック

Step.6
DevOpsにProjectが作成されました！

まずはビルドパイプラインを作る！

Step.7
Build Pipelinesの作成
サイドバーから”Pipelines”を選択

Step.7
Create Pipelineをクリック

Step.7
“Use the classic editor”をクリック

Step.7
GitHubを選択して
サービスコネクションを作成
“Authorize using OAuth”をクリックして
GitHubのログイン情報を⼊⼒

Step.7
RepositoryとBranchを選択して
“Continue”をクリック

Step.7
”YAML”を選択してApply

Step.7
YAML file pathを選択

Step.7
作成したyamlファイルを選択してOKをクリック

Step.7
しっかりSaveしておきます

Step.7
パイプラインの実⾏時に使⽤する
Variable Groupを作成
サイドバーからLibraryを選択して
”+ Variable group”をクリック

Step.7
ACRの接続情報を登録していきます。Saveを忘れずに！
yamlのこの辺で使ってる変数

ビルドパイプライン完成！

リリース（デプロイ）パイプラインを作る

Step.8
Release Pipelinesの作成
サイドバーからReleaseを選択して
“New pipeline”をクリック

Step.8
Azure App Service deploymentを
選択してApplyをクリック

Step.8
リリースパイプラインが作成される
左側の”Add an artifact”をクリック

Step.8
ビルドソースの選択
先程作成したビルドパイプラインを
選択

Step.8
Artifactを選択したら
⚡マークをクリックして
ビルドのトリガーをEnabledに変更

Step.8
右側の”1 job, 1 task”をクリック

Step.8
デプロイ先のApp service nameや
ACRの情報を⼊⼒

Step.8
タブからVariablesを選択して
作成したVariables Groupとの
リンクを作成

Step.8
忘れずにSave

リリースパイプライン完成！

ビルド・デプロイを⾃動でやってくれる
CI/CDパイプラインが完成しました！

Step.9
developにコミットしてみる
アプリに変更を加えてdevelopブランチにプッシュ

Step.9
developにコミットしてみる
before after
ソースコードの変更がデプロイされているアプリに反映！

やろうと思えばもっと⾊んな事ができます！

DevOpsなチームで
爆速開発を実現しよう！

開発サイクルを爆速にする！~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~

More Related Content

What's hot

Similar to 開発サイクルを爆速にする！~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~

開発サイクルを爆速にする！~ Azure DevOpsでアプリのビルド・デプロイを自動化 ~