Azure App Serviceを使ってWebサイトを公開する
Azure App Serviceを使って、HTMLファイルをWeb上に公開するまでの手順を解説します。
かつてはOneDriveからのデプロイが使われていましたが、この機能は廃止されました。
本記事では現在の標準的な方法である Azure CLI の az webapp up を使います。
リソースグループ・App Service プランの作成からデプロイまで、コマンド1本でまとめて実行できます。
前提条件
- Azureアカウント（無料で作成可能）
- Azure CLI のインストール
インストール後、バージョンを確認しておきます。
az --version
1. Azureにサインインする
az login
ブラウザが開くので、Azureアカウントでサインインします。
複数のサブスクリプションがある場合は、使用するものを明示的に指定します。
az account set --subscription "<サブスクリプション名またはID>"
2. HTMLファイルを作成する
プロジェクト用のディレクトリを作成し、index.html を用意します。
mkdir mywebsite && cd mywebsite
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My website</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
3. デプロイする
index.html があるディレクトリで以下を実行します。
リソースグループ・App Service プランの作成からデプロイまで、これ1コマンドで完了します。
az webapp up \
--name <アプリ名> \
--location japaneast \
--html
<アプリ名> はAzure全体でユニークである必要があります。
デプロイ完了後、ターミナルに https://<アプリ名>.azurewebsites.net のURLが表示されます。
--html フラグを指定することで、静的HTMLサイトとして正しく認識されます。
4. 動作確認
デプロイ完了後、ブラウザで以下のURLを開きます。
https://<アプリ名>.azurewebsites.net
「Hello World」が表示されれば成功です。
CLIから直接ブラウザを開くこともできます。
az webapp browse --name <アプリ名>
なお、HTMLを修正した場合は同じディレクトリで再度 az webapp up --name <アプリ名> --html を実行するだけで再デプロイできます。
後片付け（リソースの削除）
az webapp up が自動生成したリソースグループ名は appsvc_rg_* 形式です。
以下で確認してから削除します。
# リソースグループ名を確認
az group list --output table
# 削除
az group delete --name <リソースグループ名> --yes
補足：VS Codeから直接デプロイする方法
コマンドラインが苦手な方には、VS Code拡張機能を使う方法もあります。
- VS Codeに Azure App Service 拡張をインストール
- サイドバーのAzureアイコンからサインイン
- App Serviceリソースを作成
- プロジェクトフォルダを右クリック →「Deploy to Web App...」を選択
こちらはGUIで操作できるため、CLIが不要です。