WebSurfer's Home

Filter by APML

Visual Studio 2022 で Python Flask

by WebSurfer 15. December 2024 14:55

先の記事「Flask 開発サーバーが .mjs に Contents-Type: text/plain を返す」と話が前後しますが、その記事を書くため自分の Windows 10 PC の Visual Studio 2022 17.12.3 で Python Flask アプリが動かせるよう設定しました。

Visual Studio 2022 で Python Flask

いろいろ紆余曲折があってスムーズにはいかなかったので、今後同じことを行うことがあったらその際にまた苦労しなくて済むよう、その紆余曲折を備忘録として残しておくことにします。

まず、Microsoft のドキュメント「チュートリアル: Visual Studio での Flask Web フレームワークの概要」の「前提条件」のセクションに従って Visual Studio Installer を起動し以下のワークロードと個別のコンポーネントを追加します。

  • 「Python 開発」ワークロード
  • 「個別のコンポーネント」タブの「コード ツール」下の [Git for Windows]

その後で「手順 1-1: Visual Studio プロジェクトとソリューションを作成する」に進みましたが、その手順に書いてある [Blank Flask Web Project] テンプレートが出てきません。(汗)

別の Microsoft のドキュメント「クイック スタート: Visual Studio で Python Web アプリを作成」を見ると、

"Visual Studio インストーラーで [Python 開発] ワークロードを選択し、インストールの詳細で [Python Web サポート] を選択します。"

・・・と書いてあるのでその通りにすると Python の Web アプリ関係のテンプレートはいろいろ出てくるようになりました。

上に紹介した 1 つ目の Microsoft ドキュメントには Git を使う手順がいろいろ書いてあるのですが、Flask とは直接関係ない Git の勉強に余計な労力を使いそうだったので、これ以降は 2 つ目のドキュメントに従って進めることにします。

プロジェクトの新規作成メニューで表示されたテンプレートの中で [Web プロジェクト] を選んでプロジェクトを作成し先に進めます。

「Web プロジェクト」テンプレート

Flask ライブラリをインストールする」のセクションまで進んで、

"1. プロジェクトの [Python 環境] ノードを展開して、プロジェクトの既定の環境を表示します。"

・・・をやってみましたが [Python 環境] 下には何も表示されません。(汗) 以下の操作を行う必要がありました。

ソリューションエクスプローラーで [Python 環境] ノードを右クリックして表示されたメニューから [環境を追加(E)...] をクリック、「環境を追加」ダイアログの左側のメニューの [Python インストール] を選択し、[Python 3 64 ビット (3.9.13)] を追加します。(サポート外) と表示されていましたが、後でアップデートすることにして、そのままインストールしました。

その操作により、ソリューションエクスプローラーの [Python 環境] 下に「Python 3.9 (64-bit) (グローバルデフォルト)」が表示されます。

「Python 3.9 (64-bit) (グローバルデフォルト)」を右クリックして [Python パッケージの管理] を選択します。 Microsoft のドキュメントに書いてある通り [パッケージ (PyPI)] タブ上に [Python 環境] ウィンドウが開きます。

検索フィールドに flask と入力し「次のコマンドを実行する: pip install flask」をクリックします。Microsoft のドキュメントに書いてある通り、ライブラリがソリューションエクスプローラーの [Python 環境] 下の「Python 3.9 (64-bit) (グローバルデフォルト)」下に表示されます。

コード ファイルの追加」のセクションに進んで最小限のウェブアプリケーションを実装します。

ソリューションエクスプローラーでプロジェクトのノードを右クリックし、表示されたメニューから [追加 (D)] ⇒ [新しい項目(W)...] と進んで、表示される「新しい項目の追加」ダイアログで [空の Python ファイル] を選び、名前を app.py として [追加] ボタンをクリックします。

Microsoft のドキュメントに書いてあるコード(下記)をコピーしてエディタウィンドウに貼り付けて保存します。

from flask import Flask

# Create an instance of the Flask class that is the WSGI application.
# The first argument is the name of the application module or package,
# typically __name__ when using a single module.
app = Flask(__name__)

# Flask route decorators map / and /hello to the hello function.
# To add other resources, create functions that generate the page contents
# and add decorators to define the appropriate resource locators for them.

@app.route('/')
@app.route('/hello')
def hello():
   # Render the page
   return "Hello Python!"

if __name__ == '__main__':
   # Run the app server on localhost:4449
   app.run('localhost', 4449)

アプリケーションの実行」のセクションに進みます。app.py を [スタートアップファイルとして設定] し、プロジェクトのプロパティ画面でポート番号を app.py に指定した 4449 に設定します。

Visual Studio のメニューバーの [デバッグ(D)] ⇒ [デバッグなしで開始(H)](もしくは [デバッグの開始(S)])で Flask 開発サーバーが立ち上がり、

Flask 開発サーバー

この記事の一番上の画像のようにブラウザが立ち上がって app.py に設定した文字列 Hello Python! が表示されます。

Tags: , ,

その他

Flask 開発サーバーが .mjs に Contents-Type: text/plain を返す

by WebSurfer 22. November 2024 13:48

開発マシンが Windows OS の場合、Flask 開発サーバーが拡張子 .mjs のファイルを応答として返す時、応答ヘッダの Content-Type が text/plain になるので (MacOS や Linux の場合は不明)、ブラウザは受信したスクリプトのロードに失敗することがありました。その理由と解決方法を備忘録として書きます。

元の話は Qiita の質問「アップロードしたファイルをPDF.jsビューワーで開きたい」で、PDF.js を Flask アプリで使うことに関する Q&A の際に自分が遭遇した問題です。

拡張子 .mjs のファイルはモジュール機能を持つ JavaScript ファイルです。<script> 要素に type="module" 属性を含めることでそのスクリプトがモジュールであることを宣言します。詳しくは MDN の記事「JavaScript モジュール」を見てください。

html コードに含まれる <script> 要素の src=".../xxx.mjs" 属性の指定による要求に応じて、Flask 開発サーバーが xxx.mjs ファイルを応答として返す時、応答ヘッダに含まれる Content-Type が text/plain になります。

その結果、下の画像のようにブラウザ (Chrome の例です) は受信した .mjs ファイルのスクリプトのロードに失敗します。

スクリプトのロードに失敗

上の画像のエラーメッセー���に "Strict MIME type checking is enforced for module scripts per HTML spec." とあります。ブラウザは type="module" 属性を見て module scripts であると判定し、応答ヘッダに含まれる Content-Type が text/plain では HTML spec に反するのでロードしないと言っているようです。

ブラウザがスクリプトをロードできるようにするには、応答ヘッダの Content-Type を text/javascript にする必要があります。(application/javascript は RFC9239 で廃止になったそうで、text/javascript を使えということになっています。Windows OS のレジストリや IIS の MIME Mapping では未だに .js には application/javascript が使われていますが)

なぜ Flask 開発サーバーが Content-Type を text/plain に設定するかは、stackoverflow の記事 Python Flask - Error: "Failed to load module script. Strict MIME type checking is enforced". Works on production, not on the local server に書いてありますが、Windows PC の場合レジストリの設定情報を読んでくるからだそうです。

自分の環境の Windows 10 22H2 のレジストリを調べてみると、以下の通り .mjs は text/plain になってました。ということで、諸悪の根源は Windows OS ということのようです。

レジストリの設定

なお、レジストリに .mjs の設定がないケースがあって、その場合は mimetypes 内蔵のデータベースを使って拡張子から text/javascript と推測するので問題ないことがあるようです。

自分の開発マシンでは上の画像のとおりレジストリの設定があるのですが、レジストリをいじらなくても以下の様な設定で変更可能ということが上に紹介した stackoverflow の記事書いてありました。

import mimetypes
mimetypes.add_type('test/javascript', '.mjs')

試してみると、応答ヘッダの Content-Type は text/javascript になり、ブラウザはスクリプトをロードして期待通り動くようになりました。

PDF.js による表示

Tags: , , ,

その他

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。ブログ2はそれ以外の日々の出来事などのトピックスになっています。

Calendar

<<  January 2025  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar