Azure DevOps ＋ Azure WebApps （無料）の範囲でCI/CD環境を作ってみる

### はじめに

Azure DevOps Project というものがあります。これはお手軽に、CI/CDを作ってくれるものです。
具体的には、Azure DevOpsというCI/CD環境と、デプロイ先のPaaS（サーバー環境）である、WebAppを作ってくれます。Azure のWeb Appは、（性能を気にしなければ）無料でかなり利用できます。かつ、MySQLまでついてくるのでとてもお得です。


DevOps、というのはだいぶ聞きなれた言葉ですが、よくわかってないことも多いので改めて、WikiPediaから説明を引用します。

> **DevOpsとアーキテクチャ**
> DevOpsは文化的な移行と（開発、運用、テストの部門間の）協力の概念であることから、単独での「DevOpsツール」というようなものはなく、複数のツールで構成される「DevOpsツールチェーン」となる。DevOpsツールは、主にソフトウェア開発とデリバリー・プロセスの側面を有しており、一般的には1つ以上のカテゴリに分類される。
> 1 コード ： コードの開発とレビュー、バージョン管理ツール、コードのマージ
> 2 ビルド ： 継続的インテグレーションのツール、ビルドステータス
> 3 テスト ： パフォーマンスを決定するためのテストと結果
> 4 パッケージ ： 案件リポジトリ、アプリの展開前ステージング
> 5 リリース ： 変更管理、リリース承認、リリース自動化
> 6 コンフィギュレーション ： インフラストラクチャの設定と管理、インフラストラクチャとしてのコードのツール
> 7 モニター ： アプリの性能監視、エンドユーザーエクスペリエンス



今回は、DevOpsのために、Azure上の、「DevOps Project」と「Azure DevOps」を使ってみるわけですが、名前が似たりよったりのものが多いので整理します

**Azure** **DevOps**
リポジトリ、カンバンボード、パイプライン、タスク管理、自動テスト管理などのCI/CD全般。Azure DevOpsという名前だが、GoogleやAWSへのDeployにも使える。
https://azure.microsoft.com/ja-jp/services/devops/ 



**DevOps** **Project**
Azure上のPaaSサービス（WebApps）と、Azure DevOpsを組み合わせたもの。Azureのポータルから作る。このサービスのよいところは、CI/CD環境とCloudの接続には、本来は、多少の知識と手間が必要なのだが、「だれでもすぐに、 DevOps環境構築できてしまう」 という自動構築サービス
https://azure.microsoft.com/ja-jp/features/devops-projects/


### 必要なもの
- Azure DevOps の有効化
- Azure の Subscription の有効化
- ローカルPC環境でのGitアプリ（Git for Windows/Git for Mac）
- ローカルPC環境でのGit連携の開発エディタやIDE（VS Code）




### クラウド料金を無料にするポイント
・Azure DevOps 
　⇒ 相変わらず、無料なのかどうなのかよくわからないですが、Visual Studio Essentials に入っておけば、どうやら5アカウントまで無料 のようです。
> **Visual** **Studio** **Dev** **Essentials** 無料のツールとサービスに加えて、Pluralsight トレーニング、Azure クレジット、ダウンロード、その他を無料で利用できます。　　 https://azure.microsoft.com/ja-jp/services/devops/compare-features/

・Azure の Subscription
　⇒ Code デプロイであれば基本的に永久無料。1か月を過ぎても無料のものも結構多い＞　https://azure.microsoft.com/ja-jp/free/free-account-faq/

　注意： Container の場合は WebApp でも有料になります。コンテナを使いたい人は
    　　以下の Free VM をうまく組み合わせてください。
　　　＜無料のFree account virtual machine＞
　　https://azuremarketplace.microsoft.com/en-us/marketplace/apps/microsoft.freeaccountvirtualmachine?tab=Overview



#手順メモ
### DevOps Project を作成する
Azureにログインし、「DevOps Project」 というものを使います。具体的には Azure ポータルから、新規の作成ボタン「＋」を押し、Marketplaceに行きます。そこで「 DevOps 」というキーワードで検索すれば出てきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/4d674ffe-6fb3-5697-db4a-ba0ec4fd6f33.png)




　こういうアイコンです　→　![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/3bacb6ac-c4ad-de4d-237a-982e55a2479e.png)



＜Azure DevOpsの環境構築の流れ＞

まずは開発言語を選びます。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/432f3bfa-9cdd-c60c-c7d3-22bb37bc32ac.png)


PHPが得意な人はPHPを選ぶと、、フラットなPHPか、フレームワークか聞いてきます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/88eee8da-b823-025c-6738-90aacf2a9c69.png)

ただ、ここでLaravelを選ぶと、その次の画面で、環境をコンテナしか選べず、有料になってしまいます（WebAppsにもいろいろあって、有料のものと無料のもの、がある）。

ここはいったん冷静に前の画面にもどります。

 > Azure WebApps環境の違いは、こちらの記事に書いてありました

> 「Azure Web Apps (Windows, Linux, Container) の分類」 https://qiita.com/Aida1971/items/7e6562e0ee3cd7c4b84e


デプロイ先の環境はいくつか選べます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/e0271c03-7b5f-8fe3-6fc7-7c2980987ced.png)


違いを図にするとこんな感じです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/3aa97f16-81e1-ce15-582f-edce0b418ca7.png)

さて、今回は、どうしても無料にしたいので、「Windows 版の WebApp」を選べる言語で作ります。

将来的には、自由度の高い、Web App for Containers や、Kubernetes を選びたいところですが、まずは今回は無料環境にこだわります。選択肢としては以下のものです。

- HTML5
- Node.js 
- Express + Node.js
- .NET
- Python
- PHP（フレームワークなし）
- Java

つまり、GoやRuby、Larablを選択すると、Windows 版のWebAppsが選べないので、
有料の Web App for Container しか選択できなくなります。

Windowsだとしても、以下の設定をしないと、有料インスタンスになりませんので気を付けましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/079d036d-c265-11fc-dcc5-b1c6f0a2b690.png)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/3e4c964b-d367-603a-67c5-2b2c2508191b.png)



### Azure DevOps にログイン

次は、DevOpsです。DevOpsは今までの手順で自動的にできているはずなのですが、
Azure のこちらのリンクをクリックし、画面がスイッチして、Azure DevOps にログインします。
　　リンク→　 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/160b45c3-cd4a-4670-9dad-e8d80494fea6.png)


もしくは、以下のURLからリンクをたどってもOKです。
https://azure.microsoft.com/en-us/services/devops/


画面の操作方法などを慣れておきましょう。

DevOps Project が自動で作ってくれたものがいくつかあります。

**Azure** **Repo**
 　Git互換のRepo、プライベートで無料なのがうれしい

**Azure** **Pipeline**
　 Azure Repoが更新されたら、ビルドし、Azure WebAppsに反映されます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/d67188ee-5950-a2f2-e8c5-e1b9010ff364.png)


ここで、Pipelineに追加したいもの、、ですが、こちらのサイトから探してみると良いと思います。

https://marketplace.visualstudio.com/search?target=AzureDevOps&category=Azure%20Pipelines&visibilityQuery=all&sortBy=Downloads

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/c2978142-e0c1-d0ec-f467-31a4faf59425.png)


VS Code などのエディタから、ファイルを更新して、CI/CDをやってみましょう。



### CI/CDやってみる！

サーバー側はつながっているので、ローカル環境をごにょごにょして、ローカルからAzureを操作できるようにします。これでインフラ作業ゼロで、コードデプロイ可能に！]

Azure DevOps のリポジトリ（Azure Repo）ですが、以下の画面になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/aaec1c44-ca84-d720-8407-3929e7553963.png)

左のメニューから、Reposを選ぶと、作成したリポジトリが表示されます。

Cloneのボタンから、HTTPS/SSH の見慣れたリンク、が出てきますので、このURLをコピーして、ローカルPC環境からつなぎに行けるようにします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/b7b8e06b-b7c4-e7ee-f009-220db141d801.png)

Git for Windows や　Git for Macと、リポジトリを接続します。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/60530/24ca07f6-d571-3d4d-a9eb-19e963028c3a.png)