FletとDockerで作る快適なPythonアプリケーション開発環境

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


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

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

https://flet.dev/

## 背景
今回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配下は省略させて頂きます。
## 開発環境構築
### 必要なファイルの作成
1. 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
    ```
2. DcokerFile
    ```dockerfile
    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
    ```
3. docker-compose.yml
    ```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
    ```
4. サンプルアプリケーション（main.py）
    ```python
    import flet as ft
    
    def main(page: ft.Page):
        page.title = "Hello Flet"
        page.add(ft.Text("Hello, World!"))
    
    ft.app(target=main)
    ```
## Docker環境の起動
1. イメージのビルドと起動
    ```bash
    docker compose up --build
    ```
2. アプリケーションへのアクセス
    ```
    http://localhost:8550
    ```
3. アプリケーションへのアタッチ
    ```bash
    docker compose exec {app-name} bash
    ```
4. アプリケーションリスタート
    ```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