はじめに

PythonのUIフレームワーク「Flet」を使用したウェブアプリケーションを、Dockerで効率的に開発する環境の構築方法をご紹介します。Fletは、Pythonで美しいネイティブマルチプラットフォームアプリケーションを作成できる新しいフレームワークです。

Fletとは？

Fletは、FlutterをベースにしたPythonのUIフレームワークです。以下の特徴があります：

シンプルなPythonコードでリッチなUIを作成可能
デスクトップアプリケーションとウェブアプリケーションの両方に対応
マルチプラットフォーム対応（Windows、macOS、Linux、Web）
リアルタイムな状態更新と双方向通信

背景

今回CSチームが使用する自動化ツール開発にあたり、Fletを採用しました。
公式ドキュメントにはDockerを使用した環境構築がなく、ネット上に記事も少ないため執筆に至りました。
なおFletを採用した背景は以下です。

自分を含め開発を担当するメンバーにPythonのナレッジがある
1言語でフロントエンド・バックエンドを開発し工数を短縮したい
計算処理・スクレイピング処理が多いため、Pythonの強力なライブラリに頼りたい

プロジェクト構成

```
project/
│
├── app/
│   ├── __init__.py
│   ├── scraper/            #スクレイピングロジック
│   │   ├── __init__.py
│   │   └── scraper.py
│   ├── service/　　　　　　　#ビジネスロジック
│   │   ├── __init__.py
│   │   └── service.py
│   ├── ui/　　　　　　　　　　#uiコンポーネント
│   │   ├── __init__.py
│   │   └── components.py
│   └── utils/　　　　　　　　#utilsメソッド
│       ├── __init__.py
│       └── logger.py
│
├── Dockerfile
├── docker-compose.yml
├── requirements.txt
└── main.py
```

※今回はDocker環境がメインのため、app配下は省略させて頂きます。

開発環境構築

必要なファイルの作成

requirements.txt

flet>=0.21.0
flet-core>=0.21.0
flet-runtime>=0.21.0
pandas>=2.0.0
requests>=2.31.0
beautifulsoup4>=4.12.0
selenium>=4.0.0
webdriver-manager>=4.0.0
google-auth>=1.12.2
gspread>=6.1.4

DcokerFile

FROM python:3.11-slim

# 必要なパッケージのインストール
RUN apt-get update && apt-get install -y \
  git \
  build-essential \
  pkg-config \
  libcairo2-dev \
  libgirepository1.0-dev \
  wget \
  gnupg \
  unzip \
  curl \
  chromium \
  chromium-driver \
  && rm -rf /var/lib/apt/lists/*

# 作業ディレクトリの設定
WORKDIR /app

# 必要なPythonパッケージをインストール
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
RUN pip install flet-cli flet-desktop

# アプリケーションのコードをコピー
COPY . .

# コンテナ起動時のコマンド
EXPOSE 8550

docker-compose.yml

version: '3.8'

services:
  flet-app:
    build: .
    volumes:
      - .:/app
    ports:
      - "8550:8550"
    environment:
      - FLET_PORT=8550
      - FLET_HOST=0.0.0.0
    command: flet run --web --host 0.0.0.0 --port 8550 main.py

サンプルアプリケーション（main.py）

import flet as ft

def main(page: ft.Page):
    page.title = "Hello Flet"
    page.add(ft.Text("Hello, World!"))

ft.app(target=main)

Docker環境の起動

イメージのビルドと起動
```
docker compose up --build
```
アプリケーションへのアクセス
```
http://localhost:8550
```
アプリケーションへのアタッチ
```
docker compose exec {app-name} bash
```

アプリケーションリスタート

docker compose exec {app-name} bash
flet run --web --host 0.0.0.0 --port 8550 main.py

本番環境への展開における課題

セキュリティ設定
適切なポート制限
環境変数の管理
アクセス制御の実装

まとめ

FletとDockerを組み合わせることで、以下のメリットが得られます：

開発環境の統一性確保
効率的な開発プロセス
容易なデプロイメント
スケーラブルな環境構築

本記事で紹介した構成を基に、プロジェクトの要件に応じてカスタマイズしていただければと思います。

参考資料

Flet公式ドキュメント：https://flet.dev/

一緒に働く仲間を募集しています！

株式会社コネクター・ジャパンでは一緒に働いてくれる仲間を募集しています！

事業拡大に伴い、エンジニアを大募集しています。
興味のある方は下記リンクから弊社のことをぜひ知っていただき応募してもらえると嬉しいです。
▼会社について
https://www.wantedly.com/companies/cnctor/about
▼代表メッセージ
https://cnctor.jp/10years-anniversary/
▼応募はこちら
https://www.wantedly.com/companies/cnctor/projects