【配布】Python Flask WEBサーバーテンプレート作った～DB/ログイン/Googleログイン/権限/Vue3/アップロード等～

2025年12月20日 19:16

こんにちはRcatです。
今回は、Python FlaskのWEBサーバーテンプレートを作りましたので紹介します。
このテンプレを書き換えることで、作品を効率よく作成することができます。
実は超大昔に作ったテンプレがあったんですが、最近の自分の動向に合わせ再構築することにした感じです。

はじめに

利用規約

情報や作品の活用時は事前に利用規約をご確認ください。

コメントについて

利用規約のガイドラインを確認の上コメントしてください。
則っていないコメントは削除します。

概要

WEBサーバーテンプレートって何?

その名の通りWebサーバーを作るためのテンプレートになります。
Webサーバーを採用することで、以下のようなことができるようになります。

ブラウザでアクセスできる
パソコンからでもスマホからでも操作できる
JavaScriptが使える
動的な操作画面を作ることができます
バックグラウンドでいつでもホスト
パソコンさえ立ち上げておけば、いつでもどこでも使えるツールになります。

使い道

基本的に小規模なツールにWEB操作画面を割り当てることを目的としています。
Webサーバーを使っている例としては、以下のような記事が挙げられます。

Rcatサイト
一応ガチで使ってみた例。ある程度極めればこういうのも可能。これはインフラ回りもわからないとだが…。

これはJavaScriptのフレームワークも活用してPythonでは苦手な部分はJavaScriptに丸投げした例ですね。

PythonはAIに強い言語です。さらにそこでWebサーバーと組み合わせることで、自分専用のチャットサーバーを立てることができます。

WebサーバーがOSのコマンドを代行して叩くことで、パソコンを24時間音楽プレイヤーにするというものです。
スマホからアクセスして操作できるのが魅力

ちょっと昔の動画ですが、Webサーバーって何どういう仕組みなのという方はこちらが参考になります。私のですが。

というわけで結論ですが、こういったWebサーバーをベースとしたツールを作る際に、毎回サーバーを作っていると面倒なので、テンプレートとして保持しているわけですが、ちょっと内容が古くなってきましたので、更新します。というのが今回の記事になります。

テンプレート紹介

では、まず今回のテンプレートはどのようなものなのか紹介していこうと思います。

シンプルなソース

Webサーバーとしてファイルを配信したり、APIを作る時のテンプレートとして既にコードが入っています。
APIのテンプレート関数をコピペで増やすだけで簡単に構築できます。

APIのテンプレートコードは2つあり、1つはいつでも使えるもの。
もう1つはログインしていないと使えないものとしています。
そのためのログイン用のAPIや設定を完備しています。
もちろんそんなの知らん!使わない!もOK。

Googleでログイン

こちらの記事で紹介しているアップデートで追加された機能です。
最近よく見かけるGoogleアカウントを使ってほかのサイトに楽々ログインできる機能を織り込みました。
準備さえできればご自身のサイトをGoogleログイン化できます。

データベース連携

SQLiteを使用したサーバーに依存しないデータベースを利用。
テンプレートではユーザー認証にしか使わないので、ご自由に拡張することができます。
データベースで、データを読み書きするためのコードも入っているので楽々です。
もちろんそんなの知らん!使わない!もOK。

権限

ユーザーに各種権限を割り振り、それによりアクセスやAPIの実行可否を決定することができます。
内容は自由に拡張可能です。
もちろんそんなの知らん!使わない!もOK。

APIキーを使用したAPI

ヘッダーに付与するタイプのAPIキーを生成して、外部プログラムなどから認証ありAPIへのアクセスを管理できます。
もちろんそんなの知らん!使わない!もOK。

vue3テンプレート

デフォルトでvue3を使ったフロントエンドを作成するためのコードが入っています。
活かせる方はこちらを使うことで、より本格的で柔軟なフロントエンドを作成することができます。
もちろんそんなの知らん!使わない!もOK。

導入方法

基本的な考え方

本作は、すべてのHTMLページを認証なしで返却するが、表示するためのAPIに認証を設けることで、データを表示させない方法をとっています。
そのため、HTML生成段階でデータを埋め込むやり方には向きません。

ダウンロードと展開

最下部よりダウンロードしたファイルを好きなところに配置します。
中身はこんな感じです。

まず最初に実行環境を作ります。careate.batをダブルクリックします。
※作者の環境はPython3.11と3.12です。

venvの作成とライブラリインストールが行われて落ちます。

共通設定

.envの設定。
ここでポート番号やドキュメントルートを設定できます。

DOCUMENT_ROOT
公開するHTMLの格納フォルダです
vueを使う場合はこのままでOK
PORT
ポート番号です。好きに設定しましょう。
PASS_PEPPER
ユーザー名/パスワード方式でログインする際に使うペッパー。任意の文字列。
UPLOAD_FOLDER
アップローダーを使う場合でフォルダ名を変えるときに使用
APIKEY_EXPIRATION_DATE
APIキー発行機能の有効期限です。0で無期限のキーを作れます。
Googleログイン関連
下記はGCPで認証画面を作った際に取得できるクライアント情報を記述する場所です。この機能を使わない場合は未入力。
- GOOGLE_CLIENT_ID
- GOOGLE_CLIENT_SECRET

ログイン機能を使いたい場合
dbinit.pyを編集します。
一番上にユーザーを定義するところがありますので、ユーザー名とパスワードを設定します。
その次が権限です。各ユーザーに対して権限番号で指定します。複数の追加が可能です。
その下は権限番号に対応した権限名です。なくてもいいですが忘れると悲惨です。
権限0-2はすでに使っています。それ以外なら自由に追加することができます。
GOOGLE_USERSはGoogleでログインを使う場合の設定です。ここにあるメアドだけログインできます。それ以外は蹴る仕組みです。