クイック スタート: Python (Django、Flask、または FastAPI) Web アプリを Azure App Service にデプロイする

git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart

git clone https://github.com/Azure-Samples/msdocs-python-django-webapp-quickstart

git clone https://github.com/Azure-Samples/msdocs-python-fastapi-webapp-quickstart.git

1. アプリケーション フォルダーに移動します。

   cd msdocs-python-flask-webapp-quickstart
   

2. アプリの仮想環境を作成します。

   • Windows
   • macOS/Linux

   py -m venv .venv
   .venv\scripts\activate
   

3. 依存関係をインストールする:

   pip install -r requirements.txt
   

4. アプリを実行します。

   flask run
   

5. Web ブラウザーで http://localhost:5000 のサンプル アプリケーションを参照します。

   

問題がある場合は、 お知らせください。

1. アプリケーション フォルダーに移動します。

   cd msdocs-python-django-webapp-quickstart
   

2. アプリの仮想環境を作成します。

   • Windows
   • macOS/Linux

   py -m venv .venv
   .venv\scripts\activate
   

3. 依存関係をインストールする:

   pip install -r requirements.txt
   

4. アプリを実行します。

   python manage.py runserver
   

5. Web ブラウザーで http://localhost:8000 のサンプル アプリケーションを参照します。

   

問題がある場合は、 お知らせください。

1. アプリケーション フォルダーに移動します。

   cd msdocs-python-fastapi-webapp-quickstart
   

2. アプリの仮想環境を作成します。

   • Windows
   • macOS/Linux

   py -m venv .venv
   .venv\scripts\activate
   

3. 依存関係をインストールする:

   pip install -r requirements.txt
   

4. アプリを実行します。

   uvicorn main:app --reload
   

5. Web ブラウザーで http://localhost:8000 のサンプル アプリケーションを参照します。

   

問題がある場合は、 お知らせください。

Azure CLI コマンドは、Azure CLI がインストールされているコンピューターで実行できます。

Azure CLI の az webapp up コマンドにより、必要なリソースを作成し、1 つの手順でアプリケーションをデプロイできます。

必要に応じて、az login を使用して Azure にログインします。

az login

Webapp とその他のリソースを作成し、az webapp up を使用してコードを Azure にデプロイします。

az webapp up --runtime PYTHON:3.9 --sku B1 --logs

• --runtime パラメーターでは、アプリで実行される Python のバージョンを指定します。 この例では Python 3.9 を使用します。 使用可能なすべてのランタイムを一覧表示するには、az webapp list-runtimes --os linux --output table のコマンドを使用します。
• --skuパラメータは、App Service プランのサイズ（CPU、メモリ）とコストを定義します。 この例では、B1 (Basic) サービス プランを使用します。これにより、Azure サブスクリプションにわずかなコストが発生します。 App Service プラン一覧は、[App Serviceの価格]のページをご覧ください。
• --logs フラグは、webapp を起動した直後にログストリームを表示できるようにするための既定のログ記録を構成します。
• 必要に応じて、引数 --name <app-name> を使用して名前を指定することもできます。 指定しない場合、名前は自動的に生成されます。
• 必要に応じて、引数 --location <location-name> を含めることができます。ここで、<location_name> は利用可能な Azure リージョンです。 az appservice list-locations コマンドを実行すると、お使いの Azure アカウントで使用可能なリージョンの一覧を取得できます。

コマンドが完了するまでに数分かかる場合があります。 コマンドの実行中は、リソース グループ、App Service プラン、アプリ リソースの作成、ログの構成、ZIP デプロイの実行に関するメッセージが表示されます。 次に、"http://<app-name>.azurewebsites.net でアプリを起動することができます" という内容のメッセージが表示されます。これは、Azure 上のアプリの URL です。

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "python|3.9",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "<your-folder-location>"
}

VS Code で Azure リソースを作成するには、Azure Tools 拡張機能パックがインストールされ、VS Code から Azure にサインインしている必要があります。

アプリケーション フォルダーで、以下の VS Code を開きます。

code .

手順	Screenshot
左側のツール バーで Azure アイコンを見つけます。 それを選択し、Azure Tools for VS Code 拡張機能を表示します。 Azure Tools アイコンが表示されない場合は、Azure Tools for VS Code 拡張機能がインストールされていることを確認してください。
VS コード用の Azure ツール拡張機能で、次の手順を実行します。 [リソース] セクションを見つけて、サブスクリプションを選択します。 [+] (リソースを作成...) を選択します。
[Create App Service Web App...] (App Service Web アプリの作成...) オプションを選択します。
この Web アプリの名前「msdocs-python-webapp-quickstart-XYZ」を入力します。XYZ は 3 つの一意の文字です。 デプロイすると、この名前がフォーム https://<app-name>.azurewebsites.net のアプリ名として使用されます。
アプリケーションのランタイム スタックを選択します。 この例では、[Python 3.9] を選択します。
この Web アプリの App Service プラン (価格レベル) を選択します。 App Service プランでは、アプリが利用できるリソース (CPU またはメモリ) の数と費用を制御します。 この例では、Basic (B1) 価格レベルを選択します。 このプランでは、Azure サブスクリプションに対して少額の料金がかかりますが、無料 (F1) レベルよりもパフォーマンスを向上させるのに推奨されます。
[新しい Web アプリの作成] 通知で [デプロイ] ボタンを選択します。
デプロイ対象として、作業しているクイックスタート フォルダーを選択します。
[はい] と答えると、ビルド構成が更新され、デプロイのパフォーマンスが向上します。
デプロイが完了すると、VS Code の右下隅に通知が表示されます。 この通知を使用して Web アプリを参照できます。

Azure portal にサインインし、以下の手順に従って Azure App Service リソースを作成します。

手順	Screenshot
Azure portal で、次の操作を行います。 Azure portal の上部にある検索バーに「App Services」と入力します。 検索バーの下に表示されるメニューの見出し [サービス] の下にある [App Services] というラベルの項目を選択します。
[App Services] ページで、[+ 作成] を選択し、ドロップダウン メニューから [+ Web アプリ] を選択します。
[Web アプリの作成] ページで、次のようにフォームに入力します。 リソース グループ → [新規作成] を選択して、名前として msdocs-python-webapp-quickstart を使用します。 [名前] → msdocs-python-webapp-quickstart-XYZ。XYZ は任意の 3 つのランダムな文字。 この名前は Azure 全体で一意である必要があります。 [ランタイム スタック] → Python 3.9。 リージョン → 任意の近くの Azure リージョン。 [App Service プラン] → [価格プラン] で、[価格プランの探索] を選択して別の App Service プランを選択します。
App Service プランは、アプリで使用できるリソース (CPU またはメモリ) の量と、それらのリソースのコストを制御します。 この例では、[Dev/Test] で [Basic B1] プランを選択します。 Basic B1 プランでは、Azure アカウントに対して少額の料金が発生しますが、Free F1 プランよりも優れたパフォーマンスを得るためにお勧めします。 終了したら、[選択] を選択して変更を適用します。
メインの [Web アプリの作成] ページで、画面の下部にある [確認と作成] を選択します。 これにより、[レビュー] ページが表示されます。 [作成] を選択して App Service を作成します。

az webapp up コマンドで、必要なリソースの作成とアプリケーションのデプロイを 1 つの手順で行ったので、次の手順に進むことができます。

前の手順で、必要なリソースの作成とアプリケーションのデプロイを 1 つの手順で行ったので、次の手順に進むことができます。

アプリケーションは、アプリケーション コードの ZIP ファイルを作成して Azure にアップロードすることで、Azure にデプロイできます。 ZIP ファイルは、Azure CLI や cURL などの HTTP クライアントを使用して Azure にアップロードできます。

ビルド自動化を有効にする

Python コードの ZIP ファイルをデプロイする場合は、Azure ビルド自動化を有効にするフラグを設定する必要があります。 ビルドの自動化によって、必要な要件がインストールされ、Azure で実行するアプリケーションがパッケージ化されます。

Azure でのビルドの自動化は、Azure portal または Azure CLI のいずれかで SCM_DO_BUILD_DURING_DEPLOYMENT アプリ設定を設定することによって有効になります。

• Azure Portal
• Azure CLI

手順	Screenshot
Azure Portal の Web アプリのページで、次の手順を実行します: 左のツールバーの[設定] ヘッダーの[構成] を選択して、アプリケーション設定を表示します。 [アプリケーション設定] で、[新しいアプリケーション設定] を選択します。
ダイアログを使用して、次の新しい設定を入力します。 名前 → SCM_DO_BUILD_DURING_DEPLOYMENT 値 → true
[保存] を選択して設定を保存します。

アプリケーションの ZIP ファイルを作成する

次に、アプリケーションの ZIP ファイルを作成します。 含めるものはアプリケーション自体のコンポーネントのみです。 .venv、.gitignore、.github、.vscode など、ドット (.) で始まるファイルやディレクトリは含める必要はありません。

zip -r <file-name>.zip . -x '.??*'

Zip ファイルを Azure にアップロードする

ZIP ファイルを作成したら、Azure CLI または cURL などの HTTP クライアントを使用して、ファイルを Azure にアップロードできます。

# Change these values to the ones used to create the App Service.
RESOURCE_GROUP_NAME='msdocs-python-webapp-quickstart'
APP_SERVICE_NAME='msdocs-python-webapp-quickstart-123'

az webapp deploy \
    --name $APP_SERVICE_NAME \
    --resource-group $RESOURCE_GROUP_NAME \
    --src-path <zip-file-path>

# Change these values to the ones used to create the App Service.
$resourceGroupName='msdocs-python-webapp-quickstart'
$appServiceName='msdocs-python-webapp-quickstart-123'

az webapp deploy `
    --name $appServiceName `
    --resource-group $resourceGroupName `
    --src-path <zip-file-path>

curl -X POST \
    -H 'Content-Type: application/zip' \
    -u '<deployment-user>' \
    -T <zip-file-name> \
    https://<app-name>.scm.azurewebsites.net/api/zipdeploy

curl -X POST `
    -H 'Content-Type: application/zip' `
    -u '<deployment-user>' `
    -T <zip-file-name> `
    https://<app-name>.scm.azurewebsites.net/api/zipdeploy

App Service は Flask アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

App Service は Django アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

FastAPI の場合は、App Service でアプリを実行するためのカスタム スタートアップ コマンドを構成する必要があります。 次のコマンドは、2 Uvicorn ワーカー プロセスを含む Gunicorn を開始します: gunicorn -w 2 -k uvicorn.workers.UvicornWorker -b 0.0.0.0:8000 main:app

まず、az webapp config set コマンドを使用してスタートアップ コマンドを構成します。

az webapp config set \
    --startup-file "gunicorn -w 2 -k uvicorn.workers.UvicornWorker -b 0.0.0.0:8000 main:app" \
    --name $APP_SERVICE_NAME \
    --resource-group $RESOURCE_GROUP_NAME

次に、az webapp restart コマンドを使用して Web アプリを再起動します。

az webapp restart \
    --name $APP_SERVICE_NAME \
    --resource-group $RESOURCE_GROUP_NAME

App Service は Flask アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

App Service は Django アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

Azure CLI または Azure portal を使用して、スタートアップ コマンドを構成します。

App Service は Flask アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

App Service は Django アプリの存在を自動的に検出します。 このクイックスタートに追加の構成は必要ありません。

FastAPI の場合は、App Service でアプリを実行するためのカスタム スタートアップ コマンドを構成する必要があります。 次のコマンドは、2 Uvicorn ワーカー プロセスを含む Gunicorn を開始します: gunicorn -w 2 -k uvicorn.workers.UvicornWorker -b 0.0.0.0:8000 main:app

手順	Screenshot
まず、Azure App Service でスタートアップ コマンドを構成します。 Azure Portal で、App Service インスタンスのページに移動します。 ページの左側にあるメニューで、[設定] 見出しの下にある [構成] を選択します。 [一般設定] タブが選択されていることを確認します。 [スタートアップ コマンド] フィールドに、「gunicorn -w 2 -k uvicorn.workers.UvicornWorker -b 0.0.0.0:8000 main:app」と入力します。 [保存] を選択して変更を保存します。 設定が更新されたことを示す通知を待ってから、次に進みます。
次に、Web アプリを再起動します。 画面の左側にあるメニューで [概要] を選択します。 上部のメニューから、[再起動] を選択します。

@app.route('/')
def index():
   print('Request for index page received')
   return render_template('index.html')

@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

@app.route('/hello', methods=['POST'])
def hello():
   name = request.form.get('name')

   if name:
       print('Request for hello page received with name=%s' % name)
       return render_template('hello.html', name = name)
   else:
       print('Request for hello page received with no name or blank name -- redirecting')
       return redirect(url_for('index'))

def index(request):
    print('Request for index page received')
    return render(request, 'hello_azure/index.html')

@csrf_exempt
def hello(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        
        if name is None or name == '':
            print("Request for hello page received with no name or blank name -- redirecting")
            return redirect('index')
        else:
            print("Request for hello page received with name=%s" % name)
            context = {'name': name }
            return render(request, 'hello_azure/hello.html', context)
    else:

@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
    print('Request for index page received')
    return templates.TemplateResponse('index.html', {"request": request})

@app.get('/favicon.ico')
async def favicon():
    file_name = 'favicon.ico'
    file_path = './static/' + file_name
    return FileResponse(path=file_path, headers={'mimetype': 'image/vnd.microsoft.icon'})

@app.post('/hello', response_class=HTMLResponse)
async def hello(request: Request, name: str = Form(...)):
    if name:
        print('Request for hello page received with name=%s' % name)
        return templates.TemplateResponse('hello.html', {"request": request, 'name':name})
    else:
        print('Request for hello page received with no name or blank name -- redirecting')
        return RedirectResponse(request.url_for("index"), status_code=status.HTTP_302_FOUND)

まず、az webapp log config コマンドを使用して、App Service のファイルシステムにログを出力するように Azure App Service を構成する必要があります。

az webapp log config \
    --web-server-logging filesystem \
    --name $APP_SERVICE_NAME \
    --resource-group $RESOURCE_GROUP_NAME

az webapp log config `
    --web-server-logging 'filesystem' `
    --name $APP_SERVICE_NAME `
    --resource-group $RESOURCE_GROUP_NAME

ログをストリーミングするには、az webapp log tail コマンドを使用します。

az webapp log tail \
    --name $APP_SERVICE_NAME \
    --resource-group $RESOURCE_GROUP_NAME

az webapp log tail `
    --name $APP_SERVICE_NAME `
    --resource-group $RESOURCE_GROUP_NAME

アプリのホームページを更新するか、他の要求を実行してログメッセージを生成します。 出力は次のようになるはずです。

Starting Live Log Stream ---

2021-12-23T02:15:52.740703322Z Request for index page received
2021-12-23T02:15:52.740740222Z 169.254.130.1 - - [23/Dec/2021:02:15:52 +0000] "GET / HTTP/1.1" 200 1360 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/hello" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"
2021-12-23T02:15:52.841043070Z 169.254.130.1 - - [23/Dec/2021:02:15:52 +0000] "GET /static/bootstrap/css/bootstrap.min.css HTTP/1.1" 200 0 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"
2021-12-23T02:15:52.884541951Z 169.254.130.1 - - [23/Dec/2021:02:15:52 +0000] "GET /static/images/azure-icon.svg HTTP/1.1" 200 0 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"
2021-12-23T02:15:53.043211176Z 169.254.130.1 - - [23/Dec/2021:02:15:53 +0000] "GET /favicon.ico HTTP/1.1" 404 232 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"

2021-12-23T02:16:01.304306845Z Request for hello page received with name=David
2021-12-23T02:16:01.304335945Z 169.254.130.1 - - [23/Dec/2021:02:16:01 +0000] "POST /hello HTTP/1.1" 200 695 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"
2021-12-23T02:16:01.398399251Z 169.254.130.1 - - [23/Dec/2021:02:16:01 +0000] "GET /static/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 0 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/hello" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"
2021-12-23T02:16:01.430740060Z 169.254.130.1 - - [23/Dec/2021:02:16:01 +0000] "GET /static/images/azure-icon.svg HTTP/1.1" 304 0 "https://msdocs-python-webapp-quickstart-123.azurewebsites.net/hello" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0"

az group delete コマンドでリソースグループを削除します。

az group delete \
    --name msdocs-python-webapp-quickstart \
    --no-wait

--no-wait 引数を使用すると、操作が完了する前にコマンドから戻ることができます。

Azure Portal にサインインしている間に次の手順に従って、リソース グループを削除します。

手順	Screenshot
Azure portal でリソース グループに移動します。 ページ上部の検索バーにリソース グループの名前を入力します。 [リソース グループ] 見出しで、リソース グループの名前を選択して移動します。
ページ上部の [リソース グループの削除] ボタンを選択します。
確認ダイアログで、削除を確認するリソース グループの名前を入力します。 [削除] を選択して、リソース グループを削除します。