株式会社ログビー（Logbii, Inc.）Publicationへの投稿
⛈️

Azure上でウェブアプリやAPIを公開する

ログビー（Logbii）
に公開
Docker
Azure
API
Web
Serverless
tech

今回の想定読者

今回のネタは、Azure上でウェブアプリやAPIを公開する方法についてです。本記事を読んでいただけると、AzureでウェブアプリやAPIを公開する方法の概要を知ることができます。

以下の様な方が想定読者です。

  • ローカル環境で開発できるけど、Azureでサービス公開したい
  • AWSではやり方はわかるが、Azureでのやり方の概要を把握したい

ログビーの勉強会について

ログビー（Logbii）では、月一回オンラインの社内勉強会をしています。直近のものと、2025年以降のアーカイブを順次公開していきます。

ざっくりと、以下のルールで運用をしています。

  • 月イチで、ランチタイムにオンライン開催（1時間）
  • テーマ自由
  • 持ち回りで開催
  • ランチ代支給（2000円まで）、飲食可
  • 業務時間扱い（業務時間を削る形）でOK

今回の勉強会について

今回は、2025年7月の勉強会アーカイブです。

フルスタックAIエンジニアのSatoさんが発表しました！
それでは、以下本編です。

Azure 上でウェブアプリや API を公開する

背景

  • Solution で SaaS の操作方法を質問できるチャットボットの開発を行っており、Azure 上でデモアプリを公開したり、サーバーレス関数で API を作る機会があった。
  • 色々勉強することが多かったので、そのあたりについて社内で共有したい。

内容

  • Docker イメージでアプリ公開
  • サーバーレス関数で商用 API 作成

佐藤のレベル感

  • AWS 半年くらい（EC2, EventBridge, VPC, S3, etc.）
  • Azure 半年くらい（VM, AI Foundry, App Service, AI Search, Blob Storage, etc.）
  • ここはこうした方が良いなどあれば適宜お願いします🙏

確認

  • 何らかの方法でアプリを公開したことがあるか
  • ウェブアプリ
    • Vercel, GitHub Pages
  • クライアントアプリ

テーマ１：App Service で Docker イメージでアプリ公開

アプリ動作用の Docker イメージ作成

  • まず、ローカルなどでウェブアプリの作成を行う。今回は簡単な TODO アプリ。

  • ビルド

    • MacOS の場合は、下記のように amd でビルドすると手間がなくて良い。（Arm でビルドして ACR へプッシュするとデフォルトだとアプリ導入時にコケる）

      DOCKER_DEFAULT_PLATFORM=linux/amd64 docker-compose up --build

  • TODO：ローカルでのデモ

Azure Container Registry (ACR) へのイメージ登録

  • Container Registry を作成

  • ローカルの Docker イメージをプッシュする

    # 下記は MacOS (M4) で動作確認済み
az login
az acr login --name <your-registory-name> # 必ず実施
docker tag appserviceexample-frontend <your-registory-name>.azurecr.io/frontend/todo
docker push <your-registory-name>.azurecr.io/frontend/todo

  • 他リソースからのアクセス用に管理者ユーザーをオンにする。

App Service でアプリ公開

  • App Service から Web アプリを選択してアプリを作る。
  • TODO：クラウドでのデモ

スロットの活用

  • premium plan でしかできないので注意。

  • スロット機能を使うと、ステージング環境を作ることができるので、本番適用前にクラウドでの動作チェックができる。

  • 動作確認後、スロットのスワップ機能で本番運用している環境に内容を反映できる。

  • スロットの作成

    • App Service → デプロイ → デプロイ スロット → 追加

  • イメージの更新（ローカルなどの開発環境）

    DOCKER_DEFAULT_PLATFORM=linux/amd64 docker compose build
docker tag appserviceexample-frontend <your-registory-name>.azurecr.io/frontend/todo:<version>
docker push <your-registory-name>.azurecr.io/frontend/todo:v0.0.1

  • ポータルでの操作

    • App Service（Web アプリ） → デプロイ → デプロイ センター → タグを切り替える

  • 上記の操作は CLI でもできるので、GitHub Actions などで自動デプロイできそう。

テーマ２：サーバーレス関数で商用 API 作成

サーバーレス関数

  • サーバーレス関数を使うと、サーバーを意識せずにクラウドでコードを実行できる。
  • 何らかのイベントに応じて自動で処理が実行され、インフラ管理は不要。
  • 必要な時だけ呼ばれるような処理に適しており、基本的には使った分だけ課金される。
  • Azure Functions の場合、標準でオートスケール機能がついており負荷分散もできる。

Azure Functions Core Tools を使ってローカルで API 作成

  • ワークスペース以下で下記実行

    func init . --python

  • HTTP トリガー関数の作成（下記でサンプルの API を作れる）

    func new --name HttpExample --template "HTTP trigger"

  • 自前実装も追記できる

    @app.route(route="hoge", auth_level=func.AuthLevel.ANONYMOUS, methods=["GET"])
def hoge(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    return func.HttpResponse(
        "hogetest",
        status_code=200
    )

  • パッケージ導入

    python3 -m venv .venv
source .venv/bin/activate  # Windows の場合は .venv\\Scripts\\activate
pip install -r requirements.txt   # 必要なパッケージを記載する

  • ローカルで API 実行

    func start
    • TODO：Postman でのデモ

  • Azure Functions の作成（CLI）

    # リソースグループと、ストレージアカウントの説明は割愛
az functionapp create \
--resource-group <your-resource-group> \
--consumption-plan-location <desired-location> # リージョンを選択 \
--runtime python \
--runtime-version 3.10 \
--functions-version 4 \
--name <your-api-name> # 固有の名前を指定 \
--storage-account solamichistoragecus \
--os-type linux

  • コードのパブリッシュ

    func azure functionapp publish <your-api-name>
    • TODO：Postman でのデモ

スロットの活用

  • スロットの作成

    • App Service（関数アプリ） → デプロイ → デプロイ スロット → 追加

  • ステージングへの反映（開発環境）

    func start
func azure functionapp publish <your-api-name> --slot staging --build remote --overwrite-settings -y

API キーの設定

  • AuthLevel を FUNCTION か ADMIN にした上でデプロイすると、API キーを導入できる。
  • API キー発行後は、クエリパラメータかヘッダーに API キーを追加するとリクエストできる。
  • ヘッダーの場合は x-functions-key に API キーの値を入れる。

その他

  • 複数コンテナで動作するアプリは、テーマ１の方法で公開できない
株式会社ログビー（Logbii, Inc.）
株式会社ログビー（Logbii, Inc.）Publication

ログビー（Logbii）はエンジニアにまつわる課題を解決し「最高のエンジニア環境を創る」ことをミッションにしています。

Discussion