Azure DevOps Starter を使用して Azure Pipelines に Node.js 用の CI/CD パイプラインを作成する

[アーティクル]
03/24/2020

このクイックスタートでは、GatsbyJS と簡略化された Azure DevOps Starter の作成エクスペリエンスを使用して NodeJS のプログレッシブ Web アプリ (PWA) を作成します。完了すると、Azure Pipelines に PWA 用の継続的インテグレーション (CI) と継続的デリバリー (CD) パイプラインが作成されます。 Azure DevOps Starter により、開発、デプロイ、監視に必要なものがすべて設定されます。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Azure DevOps 組織。

DevOps Starter によって、Azure Pipelines に CI/CD パイプラインが作成されます。新しい Azure DevOps 組織を作成するか、既存の組織を使用できます。 DevOps Starter では、選択した Azure サブスクリプションに Azure リソースも作成されます。

Azure portal にサインインし、左側のペインで [リソースの作成] を選択します。
検索ボックスに「DevOps Starter」と入力して選択します。新しく作成するには、 [追加] をクリックします。

サンプルアプリケーションと Azure サービスを選択する

Node.js サンプルアプリケーションを選択します。
既定のサンプルフレームワークは Express.js です。選択内容を [シンプルな Node.js アプリ] に変更し、 [次へ] を選択します。
この手順で使用できるデプロイターゲットが、手順 2 で選択したアプリケーションフレームワークによって決まります。この例では、 [Windows Web アプリ] が既定のデプロイターゲットです。 [Web App for Containers] を設定したままにし、 [次へ] を選択します。

プロジェクト名と Azure サブスクリプションを構成する

DevOps Starter 作成ワークフローの最後の手順では、プロジェクト名を割り当て、Azure サブスクリプションを選択し、 [完了] を選択します。
概要ページが表示されると同時に、プロジェクトがビルドされ、アプリケーションが Azure にデプロイされます。しばらくすると、プロジェクトが Azure DevOps 組織に作成されます。ここには、Git リポジトリ、かんばんボード、デプロイパイプライン、テスト計画、アプリに必要な成果物が含まれています。

プロジェクトを管理する

[すべてのリソース] に移動し、自分の DevOps Starter を見つけます。自分の DevOps Starter を選択します。
ダッシュボードが表示され、プロジェクトホームページ、コードリポジトリ、CI/CD パイプライン、実行中のアプリへのリンクが可視化されます。 [プロジェクトホームページ] を選択してアプリケーションを Azure DevOps で表示し、別のブラウザータブで [アプリケーションエンドポイント] を選択してライブサンプルアプリを表示します。 GatsbyJS によって生成された PWA を使用するよう、後でこのサンプルを変更します。
お使いの Azure DevOps プロジェクトから、チームメンバーを招待して共同作業を行ったり、かんばんボードを確立して作業の追跡を開始したりできます。詳細については、このページを参照してください。

Azure DevOps の概要

リポジトリをクローンして Gatsby PWA をインストールする

DevOps Starter によって、Azure Repos または GitHub に Git リポジトリが作成されます。この例では、Azure リポジトリが作成されます。次の手順では、リポジトリをクローンして変更を行います。

お使いの DevOps プロジェクトから [リポジトリ] を選択し、 [クローン] をクリックします。 Git リポジトリをデスクトップにクローンするメカニズムにはさまざまあります。実際の開発エクスペリエンスに合ったものを選択してください。
リポジトリがデスクトップにクローンされたら、スターターテンプレートにいくつかの変更を加えます。まず、ターミナルから GatsbyJS CLI をインストールします。
```
 npm install -g gatsby
```

ターミナルから、お使いのリポジトリのルートに移動します。これには、次のような 3 つのフォルダーが含まれています。

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

Application フォルダー内のすべてのファイルが必要とは限りません。これは、Gatsby スターターに置き換えるためです。次のコマンドを順次実行し、スリム化します。
```
cp .\Application\Dockerfile .
rmdir Application
```
Gatsby CLI を使用してサンプル PWA を生成します。ターミナルから gatsby new を実行して PWA ウィザードを開始し、スターターテンプレート用に gatsby-starter-blog を選択します。これは、次のサンプルのようになります。
```
c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)
```
これで、my-gatsby-project という名前のフォルダーが作成されました。その名前を Application に変更し、Dockerfile をそれにコピーします。
```
mv my-gatsby-project Application
mv Dockerfile Application
```
お好みのエディターで Dockerfile を開き、最初の行を FROM node:8 から FROM node:12 に変更します。この変更により、お使いのコンテナーでは、Node.js のバージョン 8.x ではなくバージョン 12.x が使用されるようになります。 GatsbyJS には、最新バージョンの Node.js が必要です。
次に、Application フォルダー内の package.json ファイルを開き、お使いの開発および運用サーバーが使用可能なすべてのネットワークインターフェイス (例: 0.0.0.0) とポート 80 でリッスンするように scripts フィールドを編集します。これらの設定を行わないと、コンテナーアプリサービスは、コンテナー内で実行されている Node.js アプリにトラフィックをルーティングできません。 scripts フィールドは以下のようになります。具体的には、develop、serve、start のターゲットを既定値から変更します。
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

CI/CD パイプラインを編集する

前のセクションのコードをコミットする前に、ビルドおよびリリースパイプラインにいくつかの変更を加えます。 "ビルドパイプライン" を編集し、Node.js バージョン 12.x を使用するよう Node のタスクを更新します。 [タスクのバージョン] フィールドを 1.x に、 [バージョン] フィールドを 12.x に設定します。
このクイックスタートでは、単体テストを作成していないため、ビルドパイプラインではこれらの手順を無効にしています。テストの作成時に、これらの手順を再度有効にすることができます。右クリックして [Install test dependencies]\(テストの依存関係のインストール\) および [Run unit tests]\(単体テストの実行\) というラベルの付いたタスクを選択し、それらを無効にします。
リリースパイプラインを編集します。
ビルドパイプラインと同様に、12.x を使用するよう Node タスクを変更し、この 2 つのテストタスクを無効にします。実際のリリースは、このスクリーンショットのようになります。
ブラウザーの左側で、views/index.pug ファイルに移動します。
[編集] を選択し、h2 見出しに変更を加えます。たとえば、「Azure DevOps Starter を今すぐ開始」と入力したり、その他の変更を加えたりします。
[コミット] を選択し、変更を保存します。
ブラウザーで DevOps Starter ダッシュボードに移動します。
進行中のビルドが表示されるようになりました。行った変更は、CI/CD パイプラインを通じて自動的にビルド、デプロイされます。

変更をコミットして Azure CI/CD パイプラインを調査する

前の 2 つの手順では、Gatsby で生成された PWA を Git リポジトリに追加し、コードをビルドしてデプロイするようパイプラインを編集しました。コードをコミットし、ビルドおよびリリースパイプラインでその進捗を監視できます。

ターミナルでプロジェクトの Git リポジトリのルートから、次のコマンドを実行してコードを Azure DevOps プロジェクトにプッシュします。
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
git push が完了するとすぐにビルドが開始されます。 Azure DevOps ダッシュボードで、進捗状況を確認できます。
数分後に、ビルドおよびリリースパイプラインが完了し、PWA がコンテナーにデプロイされます。上記のダッシュボードから [アプリケーションエンドポイント] リンクをクリックすると、ブログ用の Gatsby スタータープロジェクトが表示されます。

リソースをクリーンアップする

作成した Azure App Service と関連するその他のリソースは、必要なくなったら削除してかまいません。 DevOps Starter ダッシュボードで削除機能を使用します。

次のステップ

CI/CD プロセスを構成すると、ビルドおよびリリースパイプラインが自動的に作成されます。これらのビルドおよびリリースパイプラインを、チームのニーズを満たすように変更できます。 CI/CD パイプラインの詳細については、以下を参照してください。

CD プロセスをカスタマイズする