Python初心者がWebサービスを作る備忘録(～お試し環境で動くまで)

# これ is なに
Python初心者がWebサービスを作ってみるよ。
環境設定からの備忘録だよ。
## 初期装備
### 私
* Pythonはほぼ完全に初心者
* JavaでのWebサービス作成経験はある
  なので、オブジェクト指向、TCP/IPの仕組み、プラグインを使用した開発に関する知識は無ではない。（精通しているとは言えない）
* 英語は何となく単語は拾えるレベル
* IntelliJは少し触ったことがある
### 環境
* Windows11
* Python 3.10.11
* git version 2.40.1.windows.1
* https://github.com/mowarowsea/PythonWeb

## やること
* Pythonよくわからないけど技術キャッチアップのために練習するよ
* どうせならWebサービス作りたいよ（アイディアはない）
* Reflaxというフレームワークを使うと、PythonだけでWebサービスがつくれるっぽいので試してみる

# 本編
結構下記サイトを参考にしたよ。

https://zenn.dev/kun432/scraps/c3e347460406b6

## IDE(PyCharm)インストール
ChatGPTさんに聞いたらPyCharmをおすすめされたので仰せの通りにするよ。
下記からCommunity版をダウンロードするよ。
現時点でバージョンは `pycharm-community-2024.1.1.exe` だったよ。

https://www.jetbrains.com/ja-jp/pycharm/download/?section=windows

ダウンロードできたら適当にインストールするよ。
<details><summary>新しいプロジェクトを作ってみたけど、あとでReflexさんが新規プロジェクト作ってくれるみたいなのでいらない</summary>
インストールしたら新しいプロジェクトを作成して開いてみるよ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/d07ce6cd-ffeb-b8c8-0518-c0ca4dfbb778.png"/>
</details>


## フレームワーク（Reflex）のインストール
なんかPythonだけでWebサービスが作れるフレームワークらしい。ほかのフレームワーク知らんけど。

https://qiita.com/SFITB/items/c3361979b86f441993ff

https://qiita.com/payaneco/items/abda32f83a6e3eb33dc0

とりあえずPython自体はインストール済みなので、pipしてみる。
```
pip install reflex
```
なんかエラー出た
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/8280361a-a5b0-0228-10b7-b117792657f9.png)
よくわからないけど、コマンド実行しろって書いてあるから従うよ。
```
C:\Users\[ほげほげ]\AppData\Local\Programs\Python\Python310\python.exe -m pip install reflex
```
Successfullyって出ているから多分成功したよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/34bae4b3-54be-ae0e-c743-1fd26654b794.png)

## プロジェクト作成
プロジェクトフォルダを適当に作成して、そこに移動して下記コマンドを実行するよ。
```
reflex init
```
なんか聞かれた。とりあえずblankでやってみよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/8802b5df-f3c0-7d31-4bca-8aedb6c84499.png)
終わった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/68269718-4709-6d45-5118-a26fe4b21c34.png)
プロジェクトフォルダにはなんかいろいろ作られてた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/720de09b-47bc-a706-829e-841a7e8089c3.png)
PyCharmで開いてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/d3674460-65de-513f-4cbc-7409cc268258.png)
プロジェクト実行するには、`reflex run`を実行すればいいらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/a56684a6-4a64-b059-4151-1e2491166725.png)
動いたみたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/0d0b936f-c42d-7b4f-332c-62f93309b12e.png)
http:\\localhost:3000 にアクセスしてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/e8ed87da-780a-a5ea-1f99-c934b68c6582.png)
動いたわ。
とりあえずこの時点でGitHubにプッシュしておく。

## なんかエラーが出てるので対処する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/d4ad63c3-b7fe-e7fc-70bb-b02dbf38e6c7.png)
一つ目はなんかプロジェクトのパイソンのバージョン選べ、って話みたいで、適当に3.10を選んだら解消したよ。
二つ目はよくわからないけどキャッシュの問題っぽい？　Install requirement をクリックした後に PyCharm 再起動したら消えてた。

## Webサービスにデプロイ
<details><summary>Renderというサービスが無料でよさそうなので、ここにデプロイしてみる。　→ なんかうまくいかなかった</summary>

https://qiita.com/kizataka/items/10693e87f726a95499e4

Start Command はReflexを使用しているので変えたよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/34addf60-6872-30d8-5a93-0b7d4707a5df.png)

初回デプロイには11分ほどかかったよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/9f7cfd01-0d73-4d44-40d1-041e9e219758.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/eb133d25-8606-47eb-83e2-e3ec934131a8.png)
https://pythonweb-uts6.onrender.com/ にデプロイできたみたいなのでアクセスしてみるよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/1da6001a-c121-9991-0f3b-ed98351e1495.png)
404ってことなのかな？ なんでだろうね。

ようやくReflex公式ドキュメントを読んでみる。

https://reflex.dev/docs/hosting/self-hosting/#production-mode

デプロイするときには
```
reflex run --env prod
```
する必要がありそう？
とりあえずrxconfig.pyを変更して、Renderの設定を変えて再挑戦。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/daa28de4-ce37-8260-8b4a-fe42ad8f3a01.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/9861b528-d4a0-b685-f0c4-5704077d19a6.png)

なんかポートバインドしてくれって怒られた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/87b65493-7c7f-23da-1d13-8db674169fb5.png)
</details>

```
reflex login
```
するとGitHub連携画面が出るので連携する
GitHubのリポジトリのローカルリポジトリフォルダまで移動して
```
reflex deploy
```
を実行。
色々聞かれるので適当に回答。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/359a9712-717f-c47e-1996-237d11956730.png)
デプロイできたっぽい。
https://pythonweb.reflex.run/
おお、動いた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170904/ec494b70-cc3c-5b51-a82e-5d00dfed67ee.png)

お試し環境で動いたのでとりあえずここまで。