Azure入門

【Azure入門⑤】WebアプリをWebAppに配信する

今回は自分で作成したWebアプリをWebAppに配信する方法を解説します。

サーバー構築を実践で身につけるInfraAcademy

※本ページには、プロモーション・アフィリエイトリンクが含まれています

Webアプリを作るための準備

まずは、配信するためのWebアプリを作成します。

Webアプリを開発するためには、開発環境をインストールしましょう。

Azureと連携しやすい「Visual Studio」をインストールします。

Visial Studioのインストール方法は、こちらのサイトを参考にして下さい。

https://qiita.com/Gaccho/items/1409c27216a67014a024

Visual Studioとは

Visual Studioとは、米マイクロソフト(Microsoft)社が開発・販売している、ソフトウェア開発のための統合開発環境(IDE:Integrated Development Environment)製品。コンピュータプログラムのソースコードを記述・編集するコードエディタを中心に、コンパイラリンカデバッガなどプログラミングやソフトウェア開発に必要なツール類を統一的に利用できるようにしたパッケージソフト

(IT用語辞典より)

Visual Studioはアプリを開発するためのソフトだと思ってください。

開発言語はC#やPythonなどに対応しています。

Webアプリを作る

では、早速Webアプリを作っていきます。

今回は、Webアプリを作り、それをAzureのWebAppに配信することがメインなのでWebアプリはデフォルトのものを使います。

まずは、インストールしたVisual Studioを起動します。

そうすると、以下のような画面から「新しいプロジェクトの作成」をクリックします。

VisualStudio設定1

そして、プロジェクトのテンプレートを選択します。

何でもよいのですが、今回は「Flask Web プロジェクト」を使用します。

FlaskとはPythonのWebアプリケーションフレームワークで軽量なWebアプリを作成するときに使います。

「Flask Web プロジェクト」が表示されない場合は、「さらにツールと機能をインストールする」をクリックして、「Python開発」をインストールして下さい。

VisualStudio設定2

次の画面では、プロジェクトの名前と保存場所が聞かれますが、デフォルトのままで、「作成」をクリックします。

VisualStudioプロジェクトの作成

30秒後くらいにVisual Studioが立ち上がります。

これで、簡単なWebアプリの作成が完了しました。

画面上中央の再生ボタンか[F5]を押して、Webアプリを立ち上げてみましょう。

VisualStudio設定3

押したら、「No module named ‘flask’」とエラーが出てしまいました。

Flaskをインポートするのを忘れていました。

画面上の「python環境ウィンドを開きます」のアイコンをクリックしてから、パッケージの検索で「flask」と入力し、「次のコマンドを実行する:pip install flask」をクリックします。

そうするとFlaskのモジュールがインストールされます。

インストールが完了したら、画面上中央の再生ボタンか[F5]を押して、Webアプリを立ち上げます。今度こそ成功するはずです。

↓のような画面が立ち上がれば成功です。

python flaskデフォルトページ

AzureのWebAppにWebアプリを配信する

Webアプリを作成したら、次はWebAppに配信していきます。

Visual Studioのソリューションエクスプローラのプロジェクト名を右クリックして「発行」をクリックします。

VisualStudio発行

すると、↓の画像のような画面が立ち上がります。

発行先の選択で「AppService」を選び「既存のものを選択」にチェックを入れ「発行」をクリックします。

事前にWebAppを作成していない場合は「新規作成」にチェックを入れます。

VisualStudio発行2

次にAzureアカウントのサインインです。

すでにアカウントをお持ちですか?の「サインイン」をクリックし、Azureの登録をしたアカウントでログインします。

VisualStudio Azureログイン

サインインが完了するとそのアカウントで作成したリソースグループが表示され、その中にWebAppがあります。

配信したいWebAppを選択して「OK」をクリックします。

VisualStudio発行4

これで発行完了!

WebAppにアクセスしてみると・・・・・

VisualStudio発行5

あれ、WebAppのデフォルトページが表示されてしまった。

PythonのアプリをAzureに配信するためには追加の設定が必要

pythonのWebアプリ(Flask,Django,Bottle)を配信するためには追加でいろいろと設定する必要があります。初心者には厳しいかも。

詳しくはこちらのドキュメントを参考にして下さい。

https://docs.microsoft.com/ja-jp/visualstudio/python/publish-to-app-service-windows?view=vs-2019

https://docs.microsoft.com/ja-jp/visualstudio/python/managing-python-on-azure-app-service?view=vs-2019

うーん、マイクロソフトのドキュメントを見てもよく分からないですね。(笑)

次回の記事でAzureでFlaskを動作させる設定方法を解説していきます。

さいごに

今回の記事は自分で作成したWebアプリをWebAppに配信する方法を解説しました。

PythonアプリをAzureに配信するためには追加設定が必要と知らずにこの記事を書いてしまったせいで、最後にWebアプリにアクセスする部分が書ききれませんでした。すいません。

Python以外は特に追加設定いらないので、同じような流れでできると思います。

ABOUT ME
ryu@InfraAcademyというインフラ学習サービス運営
大手企業→上場ベンチャー→スタートアップでエンジニアをしていました。 インフラエンジニア歴10年以上。 Linuxやネットワークの学習ができるサービスInfraAcademyを運営中。
RELATED POST