Vue + Flask + SQliteを使用したWebベースのファイル共有システム構築

IT

こんにちは！MixedNutsのつかさです！

本日は、タイトルの通りユーザー登録制ファイル共有システムを構築した際の備忘録として、主にWebシステム構築初心者の方向けに紹介します。

📌 システム概要

このシステムは、Webブラウザ上からログインし、登録ユーザー同士でファイルをアップロード・ダウンロード・プレビューできるアプリケーションです。

  • 使用OS：Windows 10（サーバ側）
  • フロントエンド：Vue.js
  • バックエンド：Flask（Python）
  • データベース：SQLite

主な機能は以下のとおりです：

  1. ユーザー登録・認証機能（今回は簡易的に管理者がDBを直接流し込む事とし、登録フォームなどを設けない）
  2. フォルダ作成 / ファイルアップロード・ダウンロード機能
  3. 画像・音声・動画・PDF・Excel・テキスト・Markdown のプレビュー表示
  4. ファイル/フォルダの移動・削除・リネーム
  5. 管理者によるお知らせ（アップデート情報）の管理

🔧 準備編

1. Python のインストール

以下のURLから Python の最新版をダウンロード・インストールしてください：

https://www.python.org/downloads/

2. Node.js と npm のインストール

以下のURLから Node.js の最新版をインストールしてください：

https://nodejs.org/ja/

インストール後、コマンドプロンプトで次のコマンドを実行し、バージョンが表示されれば成功です：

node --version
npm --version

3. Git のインストール（任意）

Git を使ってソースコードをクローンする場合は、以下からインストールします：

https://git-scm.com/downloads

📌 セットアップ手順

1. リポジトリをクローン

以下のGitHubリポジトリにて、ソースコードを公開しています：

https://github.com/MixedNuts-Dev/File-Sharing-System-MixedNuts

クローンコマンド：

git clone https://github.com/MixedNuts-Dev/File-Sharing-System-MixedNuts.git

2. Python側のセットアップ

cd File-Sharing-System-MixedNuts/backend pip install -r requirements.txt python app.py

※ 仮想環境を使用せず、システムにインストールされた Python 環境で直接実行しています。
もし `pip` や `python` のコマンドでエラーが出る場合は、pip3 や python3 をお試しください。

3. フロントエンド（Vue.js）側のセットアップ

cd ../frontend
npm install
npm run build

4. SQLiteとDBの準備

必要に応じて以下のSQLでユーザーを追加してください。以下はユーザ追加用のクエリサンプルです。：

INSERT INTO user (username, password, role) 
VALUES ('admin', 'admin_password', 'admin');

DBカラムの意味

User テーブル

  • id: ユーザー識別用の自動採番整数
  • username: ログイン名
  • password: ハッシュ化済パスワード
  • role: 権限（user または admin）

SystemUpdate テーブル

  • id: ID
  • content: アップデート内容
  • created_at: 作成日（自動設定）

5. アップロードフォルダの指定

ファイル保存先は UPLOAD_FOLDER に指定します：

UPLOAD_DIR = r"/path/to/upload"
os.makedirs(UPLOAD_DIR, exist_ok=True)

6. SSL証明書の設定

HTTPS通信のためにSSL証明書（Let's Encryptなど）を取得し、Flask実行時に指定します：

app.run(..., ssl_context=(
  '/path/to/fullchain.pem',
  '/path/to/privkey.pem'
))

※パスは各自の環境に合わせて変更してください。

7. アプリ起動

python app.py

上記コマンドで 起動します。

🛡️ セキュリティと補足技術

パスワードのハッシュ化

ユーザーのパスワードは generate_password_hash() でハッシュ化されて保存されます。

from werkzeug.security import generate_password_hash, check_password_hash

ログイン時は check_password_hash() を使って照合します。

入力値のサニタイズ

フォルダ名やファイル名に不正な文字が含まれないように次のような関数で保護しています：

def sanitize_input(input_string):
    allowed_pattern = r'[^\w\s\-/ぁ-んァ-ヶ一-龠々ー]'
    sanitized = re.sub(allowed_pattern, '', input_string)
    if re.search(r'[<>:"\\|?*]', input_string):
        raise ValueError("Invalid characters in input")
    return sanitized.strip()

📌 完成イメージ

ログイン後、ファイル一覧・アップロード・プレビュー機能などが使えるようになります。以下は簡易的な完成画面の例です：

💬 最後に

このシステムはあくまで自己学習目的で構築したもので、セキュリティ面については基本的な制御はしていますが、利用の際に発生した問題については一切の責任を負いません。十分にご留意ください。

githubに挙げているソースコードは、煮るなり焼くなり好きにしていただいて結構です。

こういう機能あれば便利じゃね？みたいなアイデアあれば是非適宜ブランチ切ってPR出していただければ確認させていただきます！

私自身は、このシステムをかなりカスタムして仲間内で使用していますので、機会があればカスタム内容も紹介したいと思います。

次回は証明書の自動更新とかの記事でも書こうかな？