NetlifyでflaskのWebAPIを公開しようとすると404エラーになる

# 結論

Netlifyは静的サイトのホスティングサービスのため、API（のみ）の公開はできないらしい。（デプロイには成功するが404エラーになる）
Herokuにデプロイすることで解決した。

# 開発環境

- Mac
- Python 3.11.3(バージョンは任意)
    - デプロイ時はサポートしているバージョンに合わせる
- Flask 3.0.2


# APIの作成

まずは簡単なflaskアプリを作成するところから始める


#### flaskのinstall

```
pip install Flask
```

#### 開発フォルダの作成

```
mkdir my-test-api
cd my-test-api
```

#### APIの作成

pythonファイルのファイル名は任意

```python:main.py
from flask import Flask
import os

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
```

#### ローカル環境でのテスト

実行する。
WARNINGが出るが問題なし。

```
$ python main.py 
 * Serving Flask app 'main'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://10.68.150.34:5000
Press CTRL+C to quit
127.0.0.1 - - [31/Mar/2024 12:09:10] "GET / HTTP/1.1" 200 -
```
http://127.0.0.1:5000　にアクセスすると、
「Hello World!」が表示されていることが確認できる。

![スクリーンショット 2024-03-31 12.14.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692485/f6d41004-46c4-c4db-578f-f056411130b4.png)

# Netlifyへのデプロイの準備

デプロイに必要なファイルを作成していく。

#### runtime.txt

[NetlifyでサポートしているPythonのバージョン](https://docs.netlify.com/configure-builds/available-software-at-build-time/)を確認する。

特に何もなければDefalutを設定する。

![スクリーンショット 2024-03-31 12.29.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692485/027fa651-14ab-97d9-0866-daf59e110ab0.png)

```
echo "3.8" > runtime.txt
```

#### Procfile

```
install gunicorn
echo web: gunicorn main:app --log-file=- > Procfile
```

#### requirements.txt

```
pip freeze > requirements.txt
```

**gunicorn**の行が出力されていることを確認。

#### ファイルの作成完了

```
my_test_app/
│
├── main.py
├── Procfile
├── requirements.txt
└── runtime.txt
```

# デプロイ

NetlifyでAdd new Siteする。
Gitにリポジトリを作成して、そのリポジトリを連携するようにすると楽。

デプロイ設定は下記とした。

![スクリーンショット 2024-03-31 12.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692485/591bab13-c2ba-b80b-e283-6f8ee7c59fdb.png)

#### デプロイには成功するが、404エラーになる。

![スクリーンショット 2024-03-31 12.57.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692485/c870503f-4927-38d6-9be7-decb70e0fe00.png)

# 参考記事

https://stackoverflow.com/questions/69646745/python-netlify-page-not-found-error-404-even-when-the-site-is-built-without-an
https://answers.netlify.com/t/hosting-python-apps/94405

# 補足： Herokuへのデプロイ

herokuだと公開できるようなので確認してみる。

#### runtime.textの書き換え

[herokuでサポートしているPythonのバージョン](https://devcenter.heroku.com/ja/articles/python-support)を確認する。

```diff_te_x:runtime.text
- 3.8
+ python-3.11.3
```

#### heroku CLI インストール

```
brew tap heroku/brew && brew install heroku
```

#### heroku ログイン

```
heroku login
```

#### アプリ作成

アプリ名は他と被らないような任意のサイト名を設定する。

```
heroku create アプリ名
```

```
（例）これだと被るので作成できない
heroku create my-test-api
```

#### リモートブランチ作成

my-test-apiの部分は作成したアプリ名に置き換え

```
heroku git:remote -a my-test-api
```

#### Herokuにmainブランチをpushする

```
git push heroku main
```

#### サイト確認

```
heroku open
```
![スクリーンショット 2024-03-31 13.31.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692485/1813510a-01cc-cf9b-b89e-6036a6ac6354.png)