バックエンドのRenderへのデプロイ

7日目。これでこのシリーズは最終日。
準備したDockerfileをもとにRenderにデプロイします。

バックエンドサービスはRenderのWeb Serviceをつかってデプロイします。
Web Services – Render Docs
基本的にはフロントと同じく、GitHubからのCI/CDになるので、GitHubのレポジトリに正しくDockerfileが設定できていれば問題ないかたち。

Dockerを使ったデプロイのマニュアルはこれ
Docker on Render – Render Docs

設定項目は以下。

Name : webアドレスになる　appname-backend → https:// appname-backend.onrender.com
- frontのaxios.postの設定URLと一致させる
Project : フロントとバックのアプリを同じプロジェクトに入れておくと管理が楽になる。（同じダッシュボードで管理できる）
Language: Docker　デプロイにDockerを使う場合はここで指定する
Branch: main　GitHubのレポジトリでデプロイに使うブランチを指定する
Region: Oregon (デフォルト）
Root Directory : 設定しない。*1
Instance Type : Free　無料枠のインスタンスを指定する。
Environment Variables : .envで設定している環境変数を入れる
- uvicornで指定するportはデフォルトでは環境変数PORTで指定される10000を利用することになる
- 準備したDockerfileを修正した

それから、デプロイしたフロントのURLをCORS設定に加えることを忘れずに。

全ての準備が整ったらデプロイ！

しばらく待つと問題なければ無事にサービスが立ち上がります。
とはいえ、最初はDockerfileに不備があったりしてエラーが出てはGPTに聞いて直して、を何回かやりました。
コードの修正はCodespaceでコードを編集して、リポジトリのmainにpushするだけ。
CI/CD連携があるので、修正がコミットされるたびに自動的にデプロイの作業がリスタートされます。
このあたり、とっても便利でサービスの発展を感じました。

無事にデプロイが完了したら、いよいよサービスの確認です。
フロント側にアクセスして、ボタンを押す→バックの処理が実行される、まで挙動を確認出来たら完成。
はじめてのWebサービスづくり、できました！

実際に作ってみることで、Webサービスってこんな仕組みで出来ているんだなあ、という理解がとても進みました。
とくにフロント側はほとんど知識のない状態からよくここまできた、、、
Reactアプリを作ってみて、JavaScript, CSS, HTMLとネットワーク接続のあれこれにちょっとだけ触れることができました。
それからバックエンドのAPIを一から作るのも、フロントと接続するのも勉強になりました。
Dockerをつかったデプロイ、GitHub連携をつかったCI/CDも学びがおおく、、、
ほぼ一週間でものすごく基礎知識の底上げができた感じがします。

つど分からないところをChatGPTに聞けるのはすごくよい学習体験でした。
ただ、対話型の学習では体系的な知識を学ぶのは難しい、とも感じました。
ある程度まとまった知識は解説ページなり、書籍なりを読むほうが入ってきやすい。
なので、教科書的なテキストを見ながら、手を動かし、分からないところは生成AIに質問する、という組み合わせが技術勉強には最適なのかなー、と思いました。

アプリとしてはまだまだ必要最低限の機能しかない状態なので、ここから機能追加をしつつ、より良いものにできればと思います！