6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@y__saito

Visual Studio Code で Azure Web App の作成とデプロイをする

Posted at

はじめに

今回はAzure App Serviceについて学ぶ機会があったので、Azure App Serviceに含まれるAzure Web Appsについて勉強した内容をまとめました。Web Appsは、多様なランタイム、SSO、CI/CD、スケールアウト/スケールイン、デプロイスロット、に対応しているマネージドなWebサーバーになります。堅牢なWebアプリを簡単に作ることができることから、非常におすすめなPaaSサービスとなります。本記事は、Microsoft公式ドキュメントにある以下のクイックスタートを参考にしていますので、詳しく知りたい方は確認してみてください。

App Service Plan と Web App の作成

Web Appの作成やデプロイや、Azureポータル、Visual Studio、Visual Studio Code、Azure CLI、Azure Developer CLI、Azure PowerShell、を使って行うことができますが、ここではVisual Studio Codeを使って、Web Appsの作成とアプリのデプロイを実施することにします。Web Appを作成するためには、App Service Planが必要なので両方とも作成していきます。

App Service Planとは、CPUやメモリーなどのアプリを動かすVMサーバー群のスペックを決める枠組みになります。

Visual Studio Codeで、以下の「Azure App Service」の拡張機能をインストールします。
image.png

コマンドパレットを開き、「azure app service: create new web app」と入力し、「Azure App Service: Create New Web App...(Advanced)」を選択します。
image.png

使用するサブスクリプションを選択します。
image.png

Web Appの名前として、グローバルに一意の名前を入力します。
image.png

「+ Create new resoure group」を選択します。
image.png

リソースグループ名を入力します。
image.png

使用するランタイムを選択します。(ここではPython 3.11を選択しました。)
image.png

リソースのリージョンを選択します。
image.png

新規のApp Service Planを作成するため、「+ Create new App Service plan」を選択します。
image.png

App Service Plan名を入力します。
image.png

App Service Planを選択します。(ここではS1を選択しました。)
image.png

Application Insightsを作成するため、「+ Create new Application Insights resource」を選択します。(Skip for nowを選択してもよいです。)
image.png

Application Insight名を入力します。
image.png

Visual Studio CodeのAZURE:ACTIVITY LOGタブで「Succeeded」が表示されれば、無事App Service PlanとWeb Appが作成されました。
image.png

また、Visual Studio Code上でリソース一覧を確認すると、先ほど作成したWeb Appが表示されています。(Web App名は、sample-web-app-20231029)
image.png

サンプルアプリケーションのクローン

次に、Webアプリケーションをデプロイする前に、アプリが無い場合はサンプルアプリをクローンします。(Webアプリが用意されていれば、次のWebアプリのデプロイに進んでください。)

以下のサンプルアプリをクローンします。

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

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

console
cd msdocs-python-flask-webapp-quickstart

2023/10/29日現在、クローンしてきたままでアプリを実行しようとすると以下のようなエラーが出ることを確認しました。
image.png
このエラーの原因は古いバージョンのFlaskが使用しているWerkzeugというライブラリのアップデートよるものだそう。そのため、2.3.3以降のFlaskのバージョンを指定することでこのエラーを回避することができます。requirements.txtを以下の書き換えてください。

requirements.txt
Flask==2.3.3
gunicorn

アプリの仮想環境を作成します。OSに合わせて以下のどちらかのコマンドを実行してください。

cmd(Windows)
py -m venv .venv
.venv\scripts\activate
bash(Linux)
python3 -m venv .venv
source .venv/bin/activate

依存関係をインストールします。

console
pip install -r requirements.txt

アプリを実行します。

console
flask run

ブラウザの検索バーに「 http://127.0.0.1:5000 」と検索して、以下の画面が表示されれば無事サンプルアプリが動いています。
image.png

Webアプリのデプロイ

コマンドパレットを開き、「Azure App Service: Depoy to Web App...」を選択します。
image.png

サンプルアプリが含まれるディレクトリを選択するために、「Browse...」を選択します。
image.png

エクスプローラーが表示されるので、サンプルアプリをクローンした場合は「msdocs-python-flask-webapp-quickstart」を「Select」します。
image.png

利用するサブスクリプションを選択します。
image.png

デプロイするWeb Appを選択します。
image.png

デプロイすることで前回のデプロイが上書きされることについての警告が出ますが、気にせず「Deploy」を選択します。
image.png

Web Appがデプロイされたことの確認

Visual Studio Codeでコマンドパレットを開き、「Azure App Service: Browse Website」を選択します。
image.png

利用するサブスクリプションを選択します。
image.png

ブラウザで表示したいWeb Appを選択します。
image.png

ブラウザが開かれるので、以下のような画面が表示されれば、デプロイの成功です。
image.png

おわりに

本記事では、Visual Studio Codeを使ってAzure Web Appの作成とデプロイをしました。まず最初はAzureポータルを使って作成＆デプロイするのが簡単に思えるかもしれませんが、Visual Studio Codeを使えば、わざわざAzureポータルにログインしたり、検索バーからAzure App Serviceを検索したりする必要がなく、コマンドパレットから全ての操作が可能なため、慣れると非常に便利だと感じました。今回は紹介していませんが、Visual Studio Codeを使えば、Azure Functionsの作成やデプロイも今回と同じようにできるため、ぜひ試してみてください。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?