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: , , ,

その他

PostgreSQL をインストールしました

by WebSurfer 17. July 2022 13:09

Windows 10 Pro 64-bit バージョン 21H2 の PC に PostgreSQL をインストールしましたので、その顛末を備忘録として書いておきます。インストールしたのはこの記事を書いた時点での最新版 PostgreSQL 14.4 です。

まず、どこからダウンロードするかですが「日本PostgreSQLユーザ会」他いろいろなサイトを調べてみたところ、EnterpriseDB 社のサイトの以下のページからインストーラーをダウンロードしてそれを使うということのようです。それ以外には情報は見つかりませんでした。

Download PostgreSQL

EnterpriseDB 社は PostgreSQL をベースにした企業向け製品とサービスを提供している企業で、その製品は基本的に有償だそうです。

上のサイトでダウンロードできる PostgreSQL は EnterpriseDB 社の製品の一部なのかどうかが問題ですが、自分がググって調べた限りでははっきりしなかったです。

とりあえずインストールしてから、SQL Shell (SQL) を起動して copyright を表示すると "Permission to use, copy, modify, and distribute this software and its documentation for any purpose, without fee, and without a written agreement is hereby granted ..." となっており、インストールした PostgreSQL は EnterpriseDB 社の製品ではないのだろうと勝手に解釈しました。

以下にインストールするときに表示された画像を貼って要点を書いておきます。

(1) インストーラーのダウンロード

上に紹介したダウンロードサイト Download PostgreSQL にアクセスすると、この記事を書いた時点では上の画像が表示されます。

PostgreSql Version の 14.4 (現時点での最新版) の行の Windows x86-64 列をクリックすると postgresql-14.4-1-windows-x64.exe というファイルがダウンロードされます。

(2) インストーラーの起動

Setup - PosrgreSQL

ステップ (1) でダウンロードした exe ファイルを起動すると上の画像が出ますので[Next >]をクリックするとインストールのための設定が始まります。

(3) インストールするディレクトリを設定

Installation Directory

PosrgreSQL をインストールするディレクトリを設定する画面が現れます。変更する必要がなければデフォルトのままにしておき[Next >]をクリックします。

(4) インストールするコンポーネントの選択

Select Components

PosrgreSQL 本体以外に管理ツールを一緒にインストールできます。全部インストールするのがお勧めです。デフォルトで全項目にチェックが入ってますので、そのままにしておき[Next >]をクリックします。

(5) データ保存ディレクトリを設定

Data Directory

データを保存するディレクトリを設定する画面が現れます。変更する必要がなければデフォルトのままにしておき[Next >]をクリックします。

(6) パスワードを設定

Password

パスワードを設定する画面が現れるので入力して[Next >]をクリックします。設定したパスワードは忘れないように!

(7) ポートを設定

Port

ポートを設定する画面が現れるので、変更する必要がなければデフォルトの 5432 のままにしておき[Next >]をクリックします。(ファイアウォールの穴あけはする必要がなかったです。勝手にやってくれるのでしょうか・・・)

(8) ロケールの選択

Advanced Options

ロケールを選択する画面が現れるので C (ロケールを設定しない) を選択して[Next >]をクリックします。

SQL Server で言う照合順序のようなものでしょうか? デフォルトは [Default locale] で OS の設定に基づくロケールになっています。自分がググって調べた限りですが、ロケールを使うと文字の処理が遅くなるなどのデメリットがあるそうなので C (ロケールを設定しない) を選択しました。

(9) 設定内容の確認

インストール開始前に設定内容のサマリー画面が現れるので内容を確認して[Next >]をクリックします。

(10) 設定完了の通知

Ready to Install

最後に設定の完了を通知する画面が現れるので[Next >]をクリックします。

(11) プログレスの表示

Installing

ステップ (10) で[Next >]をクリックするとインストールが始まりプログレスが表示されるので終わるまで待ちます。

(12) インストール完了

Completing

インストールが終わると上の画面が現れるので[Finish]をクリックします。

(13) スタックビルダ

スタックビルダ

ステップ (12) で Stack Builder にチェックを入れたまま[Finish]をクリックすると上の画像のようにスタックビルダが立ち上がります。使わないのであれば[キャンセル(C)]をクリックして閉じてください。

ちなみにスタックビルダというのは、Windows installers によると "StackBuilder; a package manager that can be used to download and install additional PostgreSQL tools and drivers. Stackbuilder includes management, integration, migration, replication, geospatial, connectors and other tools." というツールとのことです。

(14) インストール結果の確認

(14.1) サービス

サービス

コントロールパネルの[管理ツール]⇒「サービス」を見るとインストールした postgresql-x64-14 が Network Service アカウントで実行中になっているはずです。

(14.2) スタートメニュー

スタートメニューはステップ (4) で一緒にインストールした pgAdmin 4 等のコンポーネントを含めて上のようになっているはずです。

(14.3) 接続できることを確認

データベースへの接続

SQL Shell (psql) を起動してデータベースへ接続できることを確認します。Server [localhost] とかなっている [ ] の中はデフォルトの設定で、変更なければ入力は不用で Enter キーを押して先に進めます。[ユーザー postgres のパスワード]はステップ (6) で設定したパスワードです。

Tags:

その他

About this blog

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

Calendar

<<  February 2025  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
242526272812
3456789

View posts in large calendar