App Service の簡易 CI/CD 環境を構成してみる

この記事は更新から24ヶ月以上経過しているため、最新の情報を別途確認することを推奨いたします。

普段の業務で開発を全く行わない非開発者(私のような)にとってCI/CDは少々ハードルが高く感じるのではないでしょうか。
知識としては必要ななるため様々なドキュメントを読んだものの、いまだにピンとこない・・・そんな方に向けて実際にCI/CD環境を構成し、身体でCI/CDを覚えるための記事をまとめました。
今回以下のようなシンプルな構成を作成していきます。

Visual StudioにてWebアプリを作成し、それをAzureのApp Serviceに公開します。そのWebアプリに対しての変更が自動的に行われるようにAzure DevOpsを利用しています。
なお超初心者向けの内容になっていますのでその点ご了承ください。


本記事は次の構成となっております。

  1. Visual Studioからアプリを作成
  2. アプリの公開
  3. リポジトリにソースコードをアップロード
  4. CI/CDの構成
  5. CI/CDを試す

Visual StudioからWebアプリを作成

新しく ASP.NET Core Web アプリケーション を作成していきます。

「場所」にはソースコードの保存場所を指定しています。

ローカルにWebアプリが作成されました。


アプリの公開

ローカルのWebアプリをAzureのApp Serviceに公開します。
ソリューションエクスプローラーで右クリックメニューから「発行」を選択します。

公開>開始 をクリックします。

公開場所としてAzureを選択します。

既存のApp Serviceに公開することもできますが、今回は新規にApp Serviceを作成します。

必要情報を入力しWebAppを作成します。

アプリが公開されました。


リポジトリにソースコードをアップロード

CI/CDを構成していきますが、まずローカルのソースコードをリポジトリにプッシュする必要があります。継続的デリバリー>設定 をクリックします。

ソースコードがリモートリポジトリに保存さするように表示されるので追加していきます。「今すぐソース管理に・・・」をクリックします。

Gitサービスを選択します。今回はAzure DevOpsのReposを利用します。Azure DevOps環境が無い場合には事前に用意が必要となります。

リポジトリ名を入力し「リポジトリの公開」をクリックするとソースコードがReposにプッシュされます。組織にはリポジトリを作成するプロジェクト名が示されています。ここで指定したリポジトリ名で新規にプロジェクトが作成されます。

リポジトリにソースコードがアップロードされていることを確認できました。


CI/CDの構成

CI/CDのためのAzure Piplinesを作成していきます。
再度 継続的デリバリー>設定 をクリックします。
何もしていないのでブランチはmasterしかありません。Azureに作成したApp Serviceを指定します。

しばらくするとビルドパイプラインとリリースパイプラインが作成されていました。

Webアプリにアクセスしてみます。画面が変わっていますがローカルにあったWebアプリと同じです。


CI/CDを試す

ローカルのソースコードを更新し、CI/CDが行われるかを試しておきます。
Welcome → Welcome Ver.2 と変更します。

保存すると変更したファイルが保留中となります。

チームエクスプローラーの「変更」で、ローカルの変更をReposにプッシュします。何かしらコメントを入力してメニューから「すべてをコミットしてプッシュ」を実行します。

ビルドパイプラインが実行されています。

新しくRelease-2が作成されデプロイが実行されています。

Webアプリが更新されていました!

いいね (この記事が参考になった人の数:1)
(↑参考になった場合はハートマークを押して評価お願いします)
読み込み中...

注意事項・免責事項

※技術情報につきましては投稿日時点の情報となります。投稿日以降に仕様等が変更されていることがありますのでご了承ください。

※公式な技術情報の紹介の他、当社による検証結果および経験に基づく独自の見解が含まれている場合がございます。

※これらの技術情報によって被ったいかなる損害についても、当社は一切責任を負わないものといたします。十分な確認・検証の上、ご活用お願いたします。

※当サイトはマイクロソフト社によるサポートページではございません。パーソルクロステクノロジー株式会社が運営しているサイトのため、マイクロソフト社によるサポートを希望される方は適切な問い合わせ先にご確認ください。
 【重要】マイクロソフト社のサポートをお求めの方は、問い合わせ窓口をご確認ください