Azureでサイト公開　～バックエンド(Flask)～

こんにちは！
今、Azureを勉強中の身でして、サイトの公開方法を学んだので、ここでまとめておきます。

本記事では、バックエンドの役割としてFlaskを使い、公開するところまでをまとめます。

Flaskを用意

基本的には、下記公式に手順は詳しく載ってますので、それぞれのアプローチに合わせて参照してみてください。
クイックスタート: Python (Django または Flask) Web アプリを Azure にデプロイする - Azure App Service | Microsoft Learn

因みに、私はVScodeでの方法を採用しています。
この方が楽そうだなっという簡単な理由です。

下記コードをコマンドプロンプト等で入力して、Flaskプロジェクトを作成します。

#gitコードを取得
git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart

#プロジェクトディレクトリに移動
cd msdocs-python-flask-webapp-quickstart

#仮想環境を作成
py -m venv .venv

#依存関係をインストール
pip install -r requirements.txt

ここまで出来たら、一度ローカルで確認します！
下記で実行し、127.0.0.1:5000をブラウザでアクセスします。

python ./app.py

ここまででFlaskを構築するところまでは完了です。
次にAzureを使うのですが、VScodeで行ってしまいます。

サイト公開作業

ここでは、VScodeをインストール済みの想定で進めます。
下記サイトでAzureの拡張機能をダウンロードします。
Azure Tools - Visual Studio Marketplace

その後は、公式を参考に進めます。
クイックスタート: Python (Django または Flask) Web アプリを Azure にデプロイする - Azure App Service | Microsoft Learn
個人情報の関係で、作業を載せるのはやめておきます。。

うまくいくとサイトが公開できます。

FlaskをAPIをして使う

Flaskをバックエンドとして使用するので、APIをフロントとつなげるように設計する必要があります。

プロジェクト内の「requirements.txt」に下記を追記します。

flask_restful
flask-cors

さらに下記コードの要素を「app.py」に追記します。

import os

from flask import (Flask, redirect, render_template, request,

send_from_directory, url_for, jsonify)

from flask_restful import Resource, Api

from flask_cors import CORS

app = Flask(__name__)

api = Api(app)

CORS(app)

# テストデータ

users = [

{ "id": "U001", "name": "ユーザ太郎", "age": 27 },

{ "id": "U002", "name": "ユーザ二郎", "age": 20 },

{ "id": "U003", "name": "ユーザ三郎", "age": 10 }

]

@app.route('/test')

def get_test():

return jsonify(users)

if __name__ == '__main__':

app.run()

このようにコードを書いたら、下記の手順で変更内容をデプロイします！

VScode > Azure拡張機能 > App Services > 自分のプロジェクトを右クリック > Deploy Web App ... > ダイアログのdeployをクリック

しばらくすると下記のような通知が出ます、そうしたら完了です。

APIテスト

それでは、APIのテストを行うため「POSTMAN」というアプリを使用します。
「ドメイン/test」にGETリクエストを送るとjsonを返してくれる動きとなるはずです。

では試してみます。

しっかり返してくれますね！成功です♪
ただ、セキュリティ的には結構弱いので色々直さなければならない点はあります。。

次回はフロントエンドを構築して、組み合わせていきたいと思います。

まとめ

プログラムを作成する際に、サイトを公開する想定で行うと色々と懸念しなきゃエラー地獄にはまります。。そういった点では、このようなサイトを公開する経験はとても大事だし、いい勉強になったかなと思います。

近い内に、フロント部分の公開もまとめていきます！
言語はnext.jsを使用していく予定です。

ここまで読んでいただきありがとうございました！