次の方法で共有

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

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

[前提条件]

Azure portal にサインインする

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

  1. Azure portal にサインインし、左側のウィンドウで [リソースの作成] を選択します。

    Azure portal で Azure リソースを作成する

  2. 検索ボックスに、「DevOps Starter 入力して選択します。 [ 追加 ] をクリックして新しい追加を作成します。

    DevOps Starter ダッシュボード

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

  1. Node.js サンプル アプリケーションを選択します。

    Node.js サンプルを選択する

  2. 既定のサンプル フレームワークは Express.jsです。 選択内容を [シンプル Node.js アプリ ] に変更し、[ 次へ] を選択します。

    シンプル Node.js アプリを選択する

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

    デプロイ ターゲットを選択する

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

  1. DevOps Starter 作成ワークフローの最後の手順では、プロジェクト名を割り当て、Azure サブスクリプションを選択して、[ 完了] を選択します。

    プロジェクト名を割り当ててサブスクリプションを選択する

  2. プロジェクトがビルドされ、アプリケーションが Azure にデプロイされている間、概要ページが表示されます。 しばらくすると、Git リポジトリ、かんばんボード、デプロイ パイプライン、テスト 計画、アプリに必要な成果物を含むプロジェクトが Azure DevOps 組織 に作成されます。

プロジェクトの管理

  1. [すべてのリソース] に移動し、DevOps Starter を見つけます。 DevOps Starter を選択します。

    リソース一覧の Azure DevOps ダッシュボード

  2. プロジェクトホームページ、コード リポジトリ、CI/CD パイプライン、実行中のアプリへのリンクを表示するダッシュボードが表示されます。 プロジェクト ホームページを選択して Azure DevOps にアプリケーションを表示し、別のブラウザー タブでアプリケーション エンドポイントを選択してライブ サンプル アプリを表示します。 このサンプルは、後で GatsbyJS で生成された PWA を使用するように変更します。

    Azure DevOps ダッシュボード

  3. Azure DevOps プロジェクトから、チーム メンバーを招待して共同作業を行い、かんばんボードを確立して作業の追跡を開始できます。 詳細については、こちらを参照 してください。

Azure DevOps の概要

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

DevOps Starter は、Azure Repos または GitHub に Git リポジトリを作成します。 この例では、Azure Repo が作成されています。 次の手順では、リポジトリを複製して変更します。

  1. リポジトリをDevOps プロジェクトから選択し、複製をクリックします。 Git リポジトリをデスクトップに複製するためのさまざまなメカニズムがあります。 開発エクスペリエンスに適したものを選択します。

    リポジトリをクローンする

  2. リポジトリがデスクトップに複製されたら、スターター テンプレートにいくつかの変更を加えます。 まず、ターミナルから GatsbyJS CLI をインストールします。

     npm install -g gatsby

  3. ターミナルから、リポジトリのルートに移動します。 次のような 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

  4. Gatsby スターターに置き換えるため、アプリケーション フォルダー内のすべてのファイルは必要ありません。 次のコマンドを順番に実行して、トリミングします。

    cp .\Application\Dockerfile .
rmdir Application

  5. 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)

  6. これで、 my-gatsby-projectという名前のフォルダーが作成されました。 Applicationに名前を変更し、Dockerfileをコピーします。

    mv my-gatsby-project Application
mv Dockerfile Application

  7. お気に入りのエディターで Dockerfile を開き、最初の行を FROM node:8 から FROM node:12 に変更します。 この変更により、コンテナーでバージョン 8.x ではなくバージョン 12.x Node.js 使用されるようになります。 GatsbyJS には、Node.jsの最新バージョンが必要です。

  8. 次に、アプリケーション フォルダーで package.json ファイルを開き、 スクリプト フィールド を編集して、開発および運用サーバーが使用可能なすべてのネットワーク インターフェイス (0.0.0.0 など) とポート 80 をリッスンするようにします。 これらの設定がないと、コンテナー アプリ サービスは、コンテナー内で実行されている 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 パイプラインを編集する

  1. 前のセクションのコードをコミットする前に、ビルドパイプラインとリリース パイプラインにいくつかの変更を加えます。 'ビルド パイプライン' を編集し、バージョン 12.x Node.js 使用するように Node タスクを更新します。 [タスクのバージョン] フィールドを 1.x に設定し、[バージョン] フィールドを 12.x に設定します。

    Node.js を 12.x に更新する

  2. このクイック スタートでは、単体テストを作成せず、ビルド パイプラインでこれらの手順を無効にします。 テストを記述するときに、これらの手順を再度有効にすることができます。 右クリックして、[ テスト依存関係のインストール ] と [ 単体テストの実行 ] というラベルのタスクを選択し、無効にします。

    ビルド テストを無効にする

  3. リリース パイプラインを編集します。

    リリース パイプラインを編集する

  4. ビルド パイプラインと同様に、Node タスクを 12.x を使用するように変更し、2 つのテスト タスクを無効にします。 リリースは次のスクリーンショットのようになります。

    完了したリリース パイプライン

  5. ブラウザーの左側で、 views/index.pug ファイルに移動します。

  6. [ 編集] を選択し、h2 見出しを変更します。 たとえば、「 Azure DevOps Starter をすぐに使 ってみる」と入力したり、他の変更を加えたりします。

  7. [ コミット] を選択し、変更を保存します。

  8. ブラウザーで、DevOps Starter ダッシュボードに移動します。
    ビルドが進行中であることを確認できます。 行った変更は、CI/CD パイプラインを介して自動的にビルドおよびデプロイされます。

変更をコミットし、Azure CI/CD パイプラインを調べる

前の 2 つの手順では、Gatsby によって生成された PWA を Git リポジトリに追加し、パイプラインを編集してコードをビルドしてデプロイしました。 コードをコミットし、ビルドおよびリリース パイプラインを通じて進行状況を確認できます。

  1. ターミナルのプロジェクトの Git リポジトリのルートから、次のコマンドを実行して、コードを Azure DevOps プロジェクトにプッシュします。

    git add .
git commit -m "My first Gatsby PWA"
git push

  2. ビルドは、 git push が完了するとすぐに開始されます。 Azure DevOps ダッシュボードから進行状況に従うことができます。

  3. 数分後に、ビルドパイプラインとリリース パイプラインが完了し、PWA をコンテナーにデプロイする必要があります。 上記のダッシュボードから [アプリケーション エンドポイント ] リンクをクリックすると、ブログ用の Gatsby スターター プロジェクトが表示されます。

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

リソースが不要になった場合に作成した Azure App Service やその他の関連リソースを削除できます。 DevOps Starter ダッシュボードの 削除 機能を使用します。

次のステップ

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

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