演習 - Express.js アプリを Azure App Service にデプロイする

完了

このモジュールでは、デプロイ プロセスを理解するために、Express.js サンプルが提供されます。 GitHub でフォークしてから、これをローカル コンピューターに複製する必要があります。 ソース コードがローカル コンピューターに格納されたら、アプリを Visual Studio Code からAzure App Service にデプロイします。

この演習では、以下のことを行います。

  • GitHub サンプル リポジトリをフォークする。
  • フォークをローカル コンピューターに複製する。
  • サンプルをローカル コンピューターから App Service にデプロイする。

GitHub サンプル リポジトリをフォークする

  1. GitHub サンプルhttps://github.com/Azure-Samples/msdocs-javascript-nodejs-server リポジトリを新しいブラウザー タブまたはウィンドウで開きます。
  2. [フォーク] ボタンを選択して、サンプル リポジトリの独自のフォークを作成します。

フォークをローカル コンピューターに複製する

  1. Visual Studio Code で、Ctrl + Shift + P を選択して、コマンド パレットを開きます。

  2. Git: Clone を検索して選択します。

  3. サンプル リポジトリのフォークの URL を入力します。 この例のようになります。

    URL
    https://github.com/YOUR-GITHUB-ALIAS/msdocs-javascript-nodejs-server
  4. コンピューターのローカル フォルダーを選択します。

  5. 複製したリポジトリを開くかどうかを尋ねられたら [開く] を選択します。

  6. Visual Studio Code により、サンプル リポジトリのローカルのフォークが再び開かれます。

リポジトリ フォルダーを参照する

ローカル プロジェクトには複数のフォルダーがあります。 各フォルダーは Learn モジュールを表します。 App Service にデプロイするコードは 2-Deploy-basic-app-to-azure フォルダーにあります。 ここでは、他のフォルダーは無視してください。

  1. 2-Deploy-basic-app-to-azure フォルダーを展開して、Express.js ファイルを表示します。

  2. package.json を開き、アプリの一部として App Service によりインストールされる依存関係を理解します。

    {
      "name": "msdocs-javascript-nodejs-server",
      "version": "0.0.1",
      "type": "module",
      "scripts": {
        "start": "cross-env-shell DEBUG=express:* node index.js",
        "format": "prettier --write ."
      },
      "dependencies": {
        "body-parser": "^1.19.2",
        "cross-env": "^7.0.3",
        "ejs": "^3.1.6",
        "express": "^4.17.2",
        "http-errors": "^2.0.0",
        "method-override": "^3.0.0",
        "multer": "^1.4.4",
        "prettier": "^2.5.1",
        "uuid": "^8.3.2"
      }
    }
    
  3. package.json ファイルには、アプリを起動するためにデプロイ プロセスで使用される start スクリプトがあることに注目してください。

サンプルをローカル コンピューターから App Service にデプロイする

  1. Visual Studio Code で、Shift + Alt + A キーを押して、左側の [Azure] ペインを開きます。

  2. [App Service] セクションで、サブスクリプションの App Service リソースを見つけて展開します。

  3. 前の演習で作成したアプリ (例: jimb-rentals) が一覧表示されます。

    アプリが一覧表示されていない場合は、次の手順に従います。

    1. この Learn ユニットの上部で、サンドボックスの時間が残っていることを確認します。
    2. Visual Studio Code で、Azure からサインアウトします。 その後、もう一度サインインして、すべてのサブスクリプションが表示されていることを確認します。
  4. アプリを右クリックして、[Web アプリをデプロイする] を選択します。

  5. サブフォルダー 2-Deploy-basic-app-to-azure を参照して選択します。

  6. デプロイするかどうかを確認するメッセージが表示されたら、[デプロイ] を選択します。

  7. [出力ウィンドウ] オプションが表示されたら選択します。

  8. デプロイの状態が日付/時刻スタンプとアクションと共に表示されます。

  9. [出力] ターミナルに次のような行が表示されたら、デプロイは完了です。

    ログの行
    3:08:19 PM jimb-rentals: Deployment successful.
    3:08:29 PM: Deployment to "jimb-rentals" completed.

作業を確認

サンプルの Express.js が、Azure に正常にデプロイされています。 この演習では、次のことを行いました。

  • フォークしてから、GitHub サンプル リポジトリを複製しました。
  • ローカルフォークされたリポジトリのサブフォルダーを App Service にデプロイしました。