Flask Shorty：Flask + PostgreSQL で作る超軽量URL短縮サービス

GitHub：https://github.com/ynakao55/flask-shorty

Flask と PostgreSQLを使ってURL短縮サービスを作成・公開しました。
この記事では、アプリの説明／学んだ技術／主要ファイル／をまとめます。
これ一つで、Webアプリ開発の基本要素（ルーティング、DB、テンプレート、環境変数、デプロイ）が一通り体験できます。

---

1.アプリの説明

何をするアプリ？

入力された URL を 6文字コードで短縮し、/<code> にアクセスすると元URLへリダイレクトします。
トップページには直近で作成された短縮URLの一覧とクリック数が表示され、削除ボタンで不要な短縮をDBから消せます。

主な機能

• URL短縮（6文字の英数字コードを自動生成）
• 既存URLの再利用（同じURLは重複作成しない）
• 短縮URLへのアクセス数（clicks）のカウント
• 最近作成した短縮一覧＋削除ボタン（確認ダイアログ付き）
• 基本的なバリデーション（http(s):// 付与・形式チェック）
• 404/500 の簡易エラーページ
• /health ヘルスチェック

技術スタック

• Flask 3.x（ルーティング／テンプレート）
• SQLAlchemy / Flask-SQLAlchemy（ORM）
• PostgreSQL（DockerのマネージドDB）
• Jinja2（テンプレート）
• Bootstrap 5（UI）
• gunicorn（本番サーバ）
• python-dotenv（ローカル環境変数の読み込み）
• validators（URLチェック）

2.学んだ技術とハマりどころ

1) ルーティングとフォーム処理

• GET /：入力フォーム表示、最近の短縮リンク一覧
• POST /shorten：短縮URL作成
• GET /<code>：元URLへ302リダイレクト
• POST /links/<id>/delete：DBから削除（今回追加）

2) DBモデリングとORM

• Link テーブル
  id, original_url, short_code(unique), clicks, created_at
• 重複URLは既存レコードを再利用して無駄な増殖を防止。
• クリック数はアクセス時に UPDATE clicks = clicks + 1。

3) 環境変数と接続文字列

• ドライバ切り替え時は postgresql+psycopg:// を使う設計も視野に。

4) デプロイ時のPythonバージョンとDBドライバ

• psycopg2-binary は Python 3.13 と相性問題が出やすい。
• Python 3.10〜3.12 に固定し、psycopg2-binary==2.9.9 を使うと安定。

3.主要なファイルの説明（抜粋）

flask-shorty/
  app.py                # ルート定義、DBモデル、短縮ロジック
  requirements.txt      # 依存パッケージ（Flask, SQLAlchemy, psycopg2-binary など）
  Procfile              # 本番起動コマンド（gunicorn）
  .env.example          # ローカル開発用の環境変数サンプル
  templates/
    base.html           # レイアウト
    index.html          # フォーム＋最近の短縮URL一覧（削除ボタン付き）
    result.html         # 作成後の表示（コピー用UI）
    404.html / 500.html # 簡易エラーページ
  static/               # 必要ならCSS/JS/画像など

---

4.Flask-Shorty の実行方法（ローカル / Web）

ここからは、URL短縮アプリ Flask-Shorty の実行方法をまとめます。
ローカル環境（WSL + Docker）で動かす方法と、公開リンクから試す方法の両方を記載しています。

---

ローカルで実行する方法（Docker / WSL）

前提

• WSL（Windows Subsystem for Linux）がインストール済み
• Docker Desktop がインストール済み
• WSL と Docker の連携設定（WSL integration）が有効

1. Git をインストール（未インストールの場合）

sudo apt update
sudo apt install -y git

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

git clone https://github.com/ynakao55/flask-shorty.git
cd flask-shorty

3. Docker Compose で起動

通常の起動 / 停止

docker compose up -d --build
docker compose down

確実に作り直して起動したい場合（推奨）
コンテナ・ボリューム・不要な関連コンテナも整理してから再作成します。

docker compose down -v --remove-orphans
docker compose up -d --build --force-recreate

4. ブラウザで開く

起動後、ブラウザで以下のURLを開きます。

• http://localhost:8081

---

公開リンクから実行する方法（Web）

以下の公開URLからアクセスできます。

• https://flask-shorty.onrender.com/

ローカル実行時補足（トラブルシュート）

コンテナの状態を確認

docker compose ps

ログを確認

docker compose logs -f

画面が開かない / 反映されない場合

docker compose down -v –remove-orphans docker compose up -d –build –force-recreate

5.画面イメージ

トップページ（フォーム＋一覧）

短縮結果画面（コピーUI）

伸びしろ（次の一手）

• 認証（ログインユーザーだけ削除可能に）
• 短縮コードのカスタムエイリアス
• 有効期限の設定、パスワード付き短縮
• API化（/api/shorten）と簡単なフロントSPA
• CI（テスト1本でもOK）＆自動デプロイ

6.まとめ

• 最小構成でも、DB連携→動くWeb→本番デプロイまで一気通貫で形にできたのが今回のポイント。
• 次は Rails / Django / Laravel でも同レベルのCRUDアプリを公開し、「複数フレームワークでデプロイまでやり切れる」ことを示していきます

• GitHub:https://github.com/ynakao55/flask-shorty