LoginSignup
17
20

More than 5 years have passed since last update.

Azure DevOps + Azure WebApps (無料)の範囲でCI/CD環境を作ってみる

Last updated at Posted at 2018-12-30

はじめに

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

 こういうアイコンです → image.png

<Azure DevOpsの環境構築の流れ>

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

image.png

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

image.png

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

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

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

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

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

image.png

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

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

image.png

Azure DevOps にログイン

次は、DevOpsです。DevOpsは今までの手順で自動的にできているはずなのですが、
Azure のこちらのリンクをクリックし、画面がスイッチして、Azure DevOps にログインします。
  リンク→  image.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

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

image.png

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

CI/CDやってみる!

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

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

image.png

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

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

image.png

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

image.png

17
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
20