サポーターズ様主催、技育祭2021の勉強会で使用した資料です。 https://talent.supporterz.jp/geeksai/2021/ 株式会社FIXER Technology to FIX your challenges. https://www.fixer.co.jp/ja-jp/

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

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

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

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

5. DevOps
って知ってますか？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20. 今回使うツール
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もこの中の⼀つ

21. ビルド・デプロイ⾃動化フロー
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をトリガーに、⾃動でビルド・デプロイ

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

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

24. 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

25. 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

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

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

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

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

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

31. Step.6
Azure DevOpsの準備
Project NameやDescriptionを⼊⼒して
Createをクリック

32. Step.6
Azure DevOpsの準備
DevOpsにProjectが作成されました！

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

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

35. Step.7
Build Pipelinesの作成
Create Pipelineをクリック

36. Step.7
Build Pipelinesの作成
“Use the classic editor”をクリック

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

38. Step.7
Build Pipelinesの作成
RepositoryとBranchを選択して
“Continue”をクリック

39. Step.7
Build Pipelinesの作成
”YAML”を選択してApply

40. Step.7
Build Pipelinesの作成
YAML file pathを選択

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

42. Step.7
Build Pipelinesの作成
しっかりSaveしておきます

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

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

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

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

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

48. Step.8
Release Pipelinesの作成
Azure App Service deploymentを
選択してApplyをクリック

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

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

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

52. Step.8
Release Pipelinesの作成
右側の”1 job, 1 task”をクリック

53. Step.8
Release Pipelinesの作成
デプロイ先のApp service nameや
ACRの情報を⼊⼒

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

55. Step.8
Release Pipelinesの作成
忘れずにSave

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

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

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

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

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

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