この記事は更新から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アプリが更新されていました！