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

その他

Visual Studio 2022 のブラウザーリンク

by WebSurfer 10. December 2023 18:38

Visual Studio 2022 で、ブラウザーリンクの機能を使わない場合は不要となる Visual Studio とブラウザ間の通信を行わないようにする方法を書きます。2023 年 12 月 10 日現在の最新版 17.8.3 の話で、更新プログラムが適用されると話が変わるかもしれませんのでご注意ください。

Visual Studio 2022 のブラウザーリンク

Visual Studio 2022 では、上の画像の赤枠で示した「ブラウザーリンクを有効にする」にはデフォルトでチェックは入っていません。しかし、チェックを入れなくてもブラウザーリンクの機能による Visual Studio とブラウザー間の通信が行われます。ブラウザーリンクは使わないのにそのための通信が行われるのは避けたい場合、通信を行わないようにするにはどうすればいいかという話です。

ブラウザーリンクというのは何かですが、Visual Studio 2013 で新たに搭載された機能で、Edge, Chrome, Forefox など複数のブラウザを同時に立ち上げて表示させたり、Visual Studio 上でのコードの修正を複数のブラウザに同時に反映させたりする機能だそうです。詳しくは以下のMicrosoft のドキュメントを見てください。

「ブラウザーリンクを有効にする」にチェックが入ってない状態でも ASP.NET が生成する html ソースの body 要素の最後に以下のようなブラウザーリンクのためのコードが追加されます。(その下の script タグの aspnetcore-browser-refresh.js はホットリロード機能を実現するために使うものらしいです)

<!-- Visual Studio Browser Link -->
<script type="text/javascript" 
  src="/_vs/browserLink" 
  async="async" 
  id="__browserLink_initializationData" 
  data-requestId="14aa4d281859488cbb19bdfef314a877" 
  data-requestMappingFromServer="false" 
  data-connectUrl="http://localhost:57421/8a979671883c4acf85fb8bd2fd42853e/browserLink">
</script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js">
</script>

Visual Studio からアプリを実行すると、上のスクリプトが動いて Visual Studio とブラウザが自動的に通信を行います。アプリを実行して Fiddler で要求・応答をキャプチャすると、その中には上のスクリプトによる通信が含まれます。下の画像を見てください。

Fiddler で要求・応答をキャプチャ

画像の #13, #16, #18 が script 要素の data-connectUrl 属性に設定された localhost:57421 との通信です。#23 の localhost:44320 は、応答が HTTP 101 Switching Protocols となっており、応答ヘッダに Upgrade: websocket が含まれているところを見ると、やはりブラウザーリンクの関係のようです (ブラウザーリンクは通信に SignalR を使います)。

Visual Studio を使っての開発中であれば、ブラウザーリンクの機能を使う使わないに関わらず、デフォルトの設定のままにしておいて不都合はないかもしれません。しかし、使わないのに Visual Studio とブラウザー間のやり取りがあるのは煩わしいという場合があると思います。

その余計なやり取りをなくすにはどうしたらいいかですが、ググって調べてみると How to disable Browser Link in ASP.NET Core (.NET 6, VS 2022) という記事が見つかりました。Visual Studio の[ツール(T)]⇒[オプション(O)...]でオプション画面を開いてホットリロード関係の設定を変更する必要があるとのことです。

設定画面を開いてみると、デフォルトでは以下のように「CSS ホットリロード」が「有効」に設定されています。

デフォルトは「有効」

これを無効に変更すると、ASP.NET が生成する html ソースにはブラウザーリンクのため script 要素は含まれなくなり localhost:57421 との通信は行われなくなくなります。上の Fiddler の画像の #48 以降のやり取りがその結果です。

「CSS ホットリロード」無効

ただし、ここまででは #51 に示されるように依然として localhost:44320 との通信が行われています。また、html にはホットリロード用の script タグは残ったままになります。

localhost:44320 との通信およびホットリロード用の script タグも無くしたい場合は、「自動ビルドと更新のオプション」も「なし」に設定し、

「自動ビルドと更新のオプション」設定

さらに、デバッグ > .NET/C++ ホットリロードの設定画面で以下の赤枠の 2 項目のチェックを外します。

ホットリロードの設定

詳しいことは分かりませんが、ブラウザーリンクとホットリロードとは関係があるようで、上のようなホットリロードの設定がブラウザーリンクに影響しているようです。

Tags: , ,

DevelopmentTools

React の勉強を始めました

by WebSurfer 25. March 2022 17:32

ASP.NET のようなサーバーサイドの技術だけでなくフロントエンドの技術の勉強もしないと時代に取り残されるかもしれないと思って React の勉強を初めることにしました。下の画像が今日のところの成果です。(笑)

React アプリ

フロントエンドのフレームワークの有名どころは React, Angular, Vue だそうですが、まずは React の勉強から始めることにしました。

理由は、下の画像の通り使い慣れた Visual Studio のテンプレートでアプリの基本的な部分は自動的に生成してくれ、実行やデバッグも Visual Studio でできそうだったからです。

VS2022 のテンプレート

Angular という選択肢もあったのですが、テンプレートで作ってみると TypeScript などが何となく自分には合わなそうな気がしたので止めました。Vue は Visual Studio のテンプレートには見つからなかったのでとりあえずパスです。

一番上の今日の成果の画像は、Visual Studio 2022 の「React.js での ASP.NET Core」のテンプレートで作った React アプリに、mdn web docs の記事「React をはじめる」のサンプルを追加したものです。

JavaScript の知識の習得が何年か前に止まったままの自分には class とか => とか見慣れないものが出てきて、上の画像を表示するだけでもすでにいろいろ躓いています。(汗) なので、途中で挫折しそうな気もしますが、少なくとも半年ぐらいは頑張ってみようと思っています。

Tags: ,

React

About this blog

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

Calendar

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

View posts in large calendar