Fletを試す(5) - Cloudflare Pages にデプロイする

# はじめに

PythonでFlutterアプリが作れるフレームワーク「Flet」の検証です。

2023/2/6あたりに、Fletがv0.4.0になりました。
その後、公式のドキュメントに「Deploy a static website to any free hosting such as GitHub Pages, Cloudflare Pages or Vercel!」というとで、静的WebサイトとしてFletアプリをデプロイできるという記載が追加されましたので、試してみました。

https://flet.dev/docs/guides/python/publishing-static-website#deploying-website

今回は、使ったことがある Cloudflare を試してその結果をまとました。

実際にデプロイしたものが↓。
https://flet-report01.pages.dev/
制限はありますが、Fletアプリを無料で公開できます。

# 前提事項

- 試した環境
    - Windows10
    - Python 3.11.1
    - Flet 0.4.0
    - Cloudflare 2023/2時点

# 詳細

以下にCloudflareへのデプロイ手順を記載します。
公式ドキュメントにはもっと詳しく書いてあるので、不明点などはそちらを見てください。

## アプリのpublish

アプリを静的Webサイトにするためにpublishというコマンドを実行します。

### 実行前の準備

実行するためにはソースの`*.py`と`requirements.txt`が必要。
`requirements.txt`には、Fletとその他にimportで使っているモジュールの記載が必要。

↓が実行前の状態です。
ソースは以前の記事で作ったもの。
以前の記事：https://qiita.com/donraq/items/5182e3f01bd177bb6ff0

`Dockerfile  fly.toml`は今回の作業には不要なファイルです。
追加で使っているものはないので`requirements.txt`にはFletだけ記載。

``` sh
/c/donraku/flet.dev/first-app/report01
$ ls 
Dockerfile  fly.toml  main.py  requirements.txt

/c/donraku/flet.dev/first-app/report01$ cat requirements.txt 
flet==0.4.0

```


### publishを実行

実行コマンドと結果は以下のような感じ。
基本は`flet publish main.py`で良いのですが、`--app-title`を付けてみました。

結果として`dist`のディレクトリができて、中にいろいろファイルが作られます。

``` sh
/c/donraku/flet.dev/first-app/report01
$ flet publish main.py --app-title 'report01'
Cleaning up C:\donraku\flet.dev\first-app\report01\dist...
Packaging application to app.tar.gz
    Adding Dockerfile
    Adding fly.toml
    Adding main.py
    Adding requirements.txt
Patching index.html

/c/donraku/flet.dev/first-app/report01
$ ls
dist/  Dockerfile  fly.toml  main.py  requirements.txt

/c/donraku/flet.dev/first-app/report01
$ ls dist
app.tar.gz  favicon.png  flutter_service_worker.js  index.html    manifest.json  python-worker.js
assets/     flutter.js   icons/                     main.dart.js  python.js      version.json

```

:::note info
Memo
- 右記のサイトに`runtime.txt`というファイルにPythonのバージョン指定で「3.7」と書いておくという記載があったが、なくても動くみたい（https://ndonkohenri.medium.com/deploying-a-flet-app-for-free-on-cloudflare-pages-e56ecc6ce450）
- `--web-renderer html`はPCで見た感じでは動きに違いはなかった（web-rendererの説明：https://docs.flutter.dev/development/platform-integration/web/renderers）
:::


## Cloudflare Pages の設定とデプロイ

アカウントがある前提で進めます。

メニュー「Pages」→「プロジェクトを作成」→「ダイレクトアップロード」を選択。
今回はシンプルに直接アップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/a72af832-8464-b46f-a101-f98ce1662968.png)

名称を入れて「プロジェクトの作成」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/373a2810-cad7-6388-2621-79c1aed7e9d5.png)

「フォルダをアップロード」をクリック。
ここで↑で用意した「dist」のフォルダを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/63f9bcbe-1851-4338-285e-3002df696e6e.png)

少し待つと↓の表示になるので「サイトをデプロイ」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/33c6c588-4b3f-1148-fbde-37c7ad051094.png)

↓のようになれば成功。
リンク先にアクセスできるまで、時間がかかることがあるようです。（多分、設定が済むまで時間がかかる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/c5fe1cbd-3c5a-ffc0-fddc-670d015ffd57.png)

実際にデプロイしたものが↓。
https://flet-report01.pages.dev/

以上です。