本記事は GitHub Copilot および Microsoft Foundry を活用して作成されています。内容の正確性については各公式ドキュメントをご確認ください。

はじめに

Azure App Service は「コードを置くだけで HTTPS の Web アプリが公開できる」PaaS です。
本記事では、Node.js のサンプルアプリを自分で用意し、ブラウザ（Azure Portal）だけで
App Service に外部公開するハンズオン手順を、実機検証の結果とあわせて紹介します。

サンプルアプリ（server.js / package.json）を用意し、node_modules を含めた Zip を作成
デプロイは CLI / Git / Visual Studio 不要（ブラウザ操作のみ）
実際にデプロイして公開 URL が応答するところまで確認

想定読者: Azure App Service をこれから触る方、社内ハンズオンの教材を探している方。
情報日付: 2026年6月時点の Azure Portal で検証しています。UI 表記は変わる場合があります。

TL;DR（先に結論）

App Service への公開は、Portal の［デプロイセンター］→ ソース「公開ファイル」 から Zip をアップロードするだけで完了する。
node_modules を含む Zip を自分で用意すれば、ブラウザ操作だけで https://<アプリ名>.azurewebsites.net を公開できる。

App Service の主な特徴

App Service は、インフラ管理なしで Web アプリ / API を動かせるフルマネージド PaaS です。主な特徴は次のとおりです。

特徴	内容
マルチ言語・フレームワーク	.NET / Node.js / Java / Python / PHP に対応（Linux / Windows）
フルマネージド	OS・パッチ・インフラは Azure が管理。コードの配置に集中できる
柔軟なスケール	プラン変更でスケールアップ、インスタンス数でスケールアウト、自動スケールにも対応
HTTPS・独自ドメイン	既定で `*.azurewebsites.net` の HTTPS。独自ドメインと無料マネージド証明書も利用可
継続的デプロイ（CI/CD）	GitHub Actions / Azure DevOps / デプロイセンター / Zip デプロイなど
デプロイスロット	ステージングスロットで検証してから本番へ入れ替え（スワップ）。ダウンタイムを抑制（Standard 以上）
組み込み認証	App Service 認証（Easy Auth）で Microsoft Entra ID やソーシャルログインを簡単に追加
ネットワーク統合	VNet 統合・プライベートエンドポイント・アクセス制限で社内向け構成にも対応
監視	Application Insights や［診断と問題の解決］で稼働状況を把握

出典: App Service の概要 / アプリのスケールアップ / 独自ドメインの概要

App Service の最近の主なアップデート（2026年時点）

ハンズオンに入る前に、最近の主なアップデートを押さえておきます（提供状況は順次拡大中のため、最新は各出典を参照）。

開発者ツール（高度なツール / Kudu）の UI 刷新: wwwroot の閲覧やデプロイ履歴・ログ確認ができる SCM サイト（Kudu）は以前から提供されていますが、そのダッシュボード UI が新しくなりました。［高度なツール］や［デプロイセンター］から利用でき、Zip デプロイの状況確認にも役立ちます。
AI によるトラブルシュート: ［診断と問題の解決（Diagnose and solve problems）］は、構成不要で問題を検出し解決策まで案内するインテリジェントな体験を提供します。
GitHub Copilot for Azure（VS Code）: エージェントモードで「Help me deploy my project to Azure」のように依頼するだけで、App Service への Bicep/azd 生成やデプロイまで AI が支援します。

刷新された Kudu（高度なツール）のダッシュボード。以前からある Kudu ですが、UI が新しくなり、ログや SSH、File Manager、AI Playground（プレビュー）などに素早くアクセスできます。

出典: Kudu サービスの概要 / HTTP 502・503 のトラブルシューティング（診断と問題の解決） / GitHub Copilot for Azure のエージェントモードでデプロイ

既存アプリのモダナイズ・移行に役立つツール

すでに動いているアプリを App Service に載せたい場合は、まず「載せられるか（互換性）」をチェックできます。さらに AI でモダナイズ作業そのものを自動化するツールもあります。

ツール	用途
App Service Migration Assistant	Windows/IIS の .NET や Apache Tomcat の Java をスキャンして、App Service への対応可否を判定し移行できるツール
Azure Migrate（Web アプリのアセスメント）	複数サーバーの Web アプリを大規模に検出・アセスメントし、`Ready` / `Ready with conditions` / `Not ready` の判定と SKU・コスト見積りを提示
GitHub Copilot app modernization	Java / .NET / C++ を AI エージェントでアセスメント→計画→変換→検証→デプロイまで支援。VS Code / Visual Studio で、依存関係の Azure サービス移行やコンテナ化・IaC 生成も自動化

補足: 「移行できるか」を Migration Assistant / Azure Migrate で確認 →「実際のコード改修（フレームワーク更新・Azure サービスへの置き換え）」を GitHub Copilot app modernization で AI 支援、という流れでモダナイズを進められます。

出典: .NET 移行ツール一覧（App Service Migration Assistant） / GitHub Copilot app modernization の概要

▶️ 関連動画でイメージをつかむ

GitHub Copilot によるレガシーアプリのモダナイズを、次の動画が分かりやすく紹介しています。まずはここから。

アスキー×マイクロソフト「GitHub Copilot Quest：Hack the Legacy」ハッカソンイベント — レガシーを AI で攻略するハッカソンの様子
Azure Copilot and GitHub Copilot application modernization — Azure Copilot / GitHub Copilot によるアプリケーションモダナイズの解説

このハンズオンで作るもの

シンプルな Express アプリ（process.env.PORT で待ち受け、トップページと /health を返す）を 1 つの App Service に公開します。

出典: Azure App Service の概要

前提・用意するもの

項目	内容
用意するもの	サンプルアプリ（`server.js` / `package.json`）と、そこから作る `appservice-handson.zip`（`package.json` がルートにあり、`node_modules` を含む）
必要なもの	Azure サブスクリプション、リソースを作成できる権限、ローカルの Node.js（Zip 作成用）
ランタイム	Node.js 22 LTS（Linux / Windows どちらでも可）
デプロイの道具	ブラウザ（Azure Portal）のみ

ポイント: Zip に node_modules を含めておくと、App Service 側で npm install を実行しなくてもそのまま起動でき、デプロイはブラウザ操作だけで完結します。

手順

ステップ0. サンプルアプリと Zip を用意する

下記の 2 ファイルを同じフォルダー（例: app）に作成します。ポイントは、App Service が待ち受けポートを環境変数 PORT で渡すため、必ず process.env.PORT を使うことです。

server.js

// Azure App Service ハンズオン用のシンプルな Web アプリ
// App Service はポート番号を環境変数 PORT で渡すため、必ず process.env.PORT を使う
const express = require("express");
const os = require("os");

const app = express();
const port = process.env.PORT || 3000;

// トップページ: デプロイ成功を視覚的に確認できるHTMLを返す
app.get("/", (req, res) => {
  res.send(`<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8" /><title>Azure App Service ハンズオン</title></head>
<body>
  <h1>Zip デプロイ成功</h1>
  <p>Azure App Service で外部公開されています。</p>
  <p>ホスト名: <code>${req.hostname}</code></p>
  <p>サーバー: ${os.hostname()} / Node.js: ${process.version}</p>
</body>
</html>`);
});

// ヘルスチェック用エンドポイント
app.get("/health", (req, res) => {
  res.json({ status: "ok", time: new Date().toISOString() });
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

package.json

{
  "name": "appservice-handson",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "engines": {
    "node": ">=22"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

依存関係をインストールし、package.json が Zip のルートに来るように圧縮します。

Zip を作成する（PowerShell）

cd app
npm install --omit=dev
# app フォルダーの「中身」を圧縮（package.json をルートに）
Compress-Archive -Path .\* -DestinationPath ..\appservice-handson.zip -Force

補足: 生成した Zip を開いて、最上位に package.json / server.js / node_modules/ が見えれば OK です。

ステップ1. App Service（Web アプリ）を作成

Azure Portal にサインインします。
検索ボックスに「App Services」と入力して開き、［+ 作成］→［Web アプリ］ を選択します。
［基本］ タブを次のように設定します。

設定項目	値
リソースグループ	新規作成（例: `rg-appservice-handson`）
名前	全世界で一意な名前（例: `handson-yourname-001`）。これが URL になります
公開（Publish）	コード
ランタイムスタック	Node 22 LTS 以上（本記事の作成画面例では Node 24 LTS）
オペレーティングシステム	Linux（既定）
リージョン	任意（クォータに注意。後述）
価格プラン	Free F1 または Basic B1

その後、［確認および作成］→［作成］ を選択し、完了後に ［リソースに移動］ を選択します。

App Service 作成の［基本］タブ。ランタイムスタックと価格プランの選択がポイントです。

出典: App Service で Web アプリを作成する

ステップ2. 既定ページで作成成功を確認

Zip を配置する前に、App Service が起動していることを既定ページで確認します。

App Service の ［概要］ を開き、 ［既定のドメイン］ の URL を選択します。
「Your web app is running and waiting for your content」のようなプレースホルダーページが表示されれば、作成は成功です。

この既定ページが出れば、App Service の作成とランタイム起動は正常です。次の手順で用意したアプリに置き換わります。

ステップ3. Zip をデプロイ（デプロイセンター「公開ファイル」）

Kudu を開かず、Portal から Zip を直接アップロードします。

左ペインの ［デプロイ］→［デプロイセンター］ を開きます。
［設定］ タブの ［ソース］ で「公開ファイル」を選択します。
用意した appservice-handson.zip を選び、［保存］ を選択します。アップロード完了後、サイトは自動的に再起動します。

［デプロイセンター］→ ソース「公開ファイル」。この方式は Linux / Windows の両方で使えます。

注意: Zip の中身は /home/site/wwwroot に展開されます。package.json が Zip のルートにあることが重要です（フォルダーを 1 段挟むと起動しません）。

ステップ4. 動作確認

［概要］ の ［既定のドメイン］ の URL を再度開きます。
「Zip デプロイ成功」ページが表示されれば成功です。
https://<アプリ名>.azurewebsites.net/health で {"status":"ok", ...} が返ります。

既定ページが用意したアプリの内容に置き換わりました。インターネットから HTTPS で公開されています。

ハマったポイント・想定リスク

実機検証（Azure CLI でのプロビジョニング時）に遭遇した知見です。Portal でも同じ制約に当たります。

症状	原因	対処
プラン作成が `additional quota` エラー（`Current Limit (Total VMs): 0`）	サブスクリプションの当該リージョンの App Service VM クォータが 0	クォータのある別リージョン（例: `japanwest` / `westus2` / `southeastasia`）に変更、またはクォータ引き上げを申請
`Linux Runtime 'NODE\|20-lts' is not supported`	`NODE:20-lts` は廃止済み	`NODE:22-lts`（または `NODE:24-lts`）を使用。`az webapp list-runtimes --os-type linux` で確認
ページが出ない / Application Error	Zip ルートに `package.json` が無い（フォルダーを 1 段挟んでいる）	`package.json` を Zip のルートに置く
502 / 起動しない	アプリがポートを固定値で待ち受けている	`process.env.PORT` で待ち受ける（本サンプルは対応済み）

出典: クォータの引き上げを要求する / az webapp list-runtimes

後片付け（課金停止）

ハンズオン終了後はリソースグループごと削除します。

リソースグループを削除する

az group delete --name rg-appservice-handson --yes --no-wait

まとめ

App Service への公開は「Zip をアップロードするだけ」で、ブラウザ操作のみで完結する。
自分で用意する Zip は node_modules を含め、package.json をルートに置くのが成功のコツ。
リージョンのクォータと Node ランタイムのバージョン廃止に注意する。

参考リンク

本記事は GitHub Copilot および Microsoft Foundry を活用して作成されています。内容の正確性については各公式ドキュメントをご確認ください。