1日のスケジュール管理Webアプリ「daydule」 - システム概要

はじめに

みなさん、こんにちは！
最近はキャンプにハマっているエンジニアの@mellbrotherです。

今回は私たちが作成したスケジュール管理アプリdayduleの「システム概要」と「利用しているホスティングサービス」について紹介していきます。
ホスティングサービスについては、候補に上がった他サービスの情報も簡単に取り上げます。

（アプリ概要を知りたい方は、 前回の 1日のスケジュール管理Webアプリ「daydule」 - 概要 を見てみてください）

システム概要

dayduleはフロントエンドとバックエンドが分かれた構成となっています
システムを分けて開発している理由は大きく3つです

1. システムを分けることで責任範囲を分離できるため
   色々なサイトで紹介されていることですが、考えることが減るのは良いことですね
   フロントエンドはUI/UXに、バックエンドは業務ロジックやデータ操作に専念することができます
2. それぞれのシステムの変更が容易にできるため
   システムが分かれているため、一方の変更が他方に影響を及ぼすことが少ないです（API定義などの変更の場合は、例外ですが...）
3. フロントエンドのReact、Next.jsを使ってみたかったため

お互いのシステムのことを考えなくて良い、ということはかなりメリットに感じています
フロントエンド側の変更がかなり多かったのですが、バックエンドのことをあまり気にしなくて良かったので、スムーズに改修が行えました

デメリットはあまりなかったのですが、強いて言えばホスティングサービスを2つ用意する必要があり、選定することに苦労したことですかね

この後、ホスティングサービスで何を使用しているか、他の候補などはあったのか、などについて書いていこうと思います

ホスティングサービス

dayduleではフロントエンドにVercelを、バックエンドにrenderを使用しています
DBはrender内で構築しており、postgreSQLを使用しています

フロントエンドはNext.jsを利用すると決まっていたので、デプロイの容易さなどを考えるとVercel一択でした
フリープランだと商業用に使えないので、そこはちょっと残念ですが、使いやすさはかなりよかったです（広告を貼っていきたいなと思っているので、現在は他のホスティングサービスに乗り換えることを検討しています）

バックエンドはrenderを利用していますが、こちらは消去法で選んだ形です
node.jsとpostgresSQLの組み合わせが無料で使えそうなのが、ここくらいしかありませんでした
無料なので仕方がない部分ですが、3ヶ月でDBがリセットされる仕様となっていました
3ヶ月ごとにバックアップ→DBを新規立ち上げ→バックアップしたデータを投入する、という作業が必要で、なかなか面倒です...

バックエンドのホスティングサービスで他に候補に上がったものも簡単に紹介します（今回はマイナーなものに絞って）
私たちのシステムには利用できませんでしたが、この記事を読んでいる方が作成するシステムにはマッチしているかもしれませんので、ご参考までに

• Fly.io
  • Rails/Laravel/Django/Javascriptが使える
  • MySQLやMariaDBを使える
  • 従課金制
• Glitch
  • Node/Reactが使える
  • SQLiteが使える
  • 無料プランあり
  • 5分アクセスがないとスリープしてしまう
• Qoddi
  • Node.js/PHP/Python/Docker/Ruby/Django/Laravel/Java/Rust/Goが使える（かなり多い）
  • 無料プランあり
  • スリープなし
  • RDB周りが使えなそう

苦労したこと

ローカルでフロントエンドとバックエンドがうまく連携できないということは、あまりなかったのですが、本番環境にデプロイした瞬間、API呼び出しがうまくいかなくなりました

CORS関連のエラーでドメインが異なっているために失敗していたのですが、それになかなか気づけず、コード修正→デプロイ→動かない→コード修正→...の負のループを繰り返していました

ドメインを揃えると今までのことが嘘のようにすんなり動いていて、かなり時間を無駄にしたなぁと落ち込んでいたのが懐かしいです

さいごに

今後もdayduleについて情報発信していきますので、もしよかったら「いいね」をお願いします。
意見・質問・感想があれば、コメントまで。

では、またの機会に！！