デンバーサーバータイムプロジェクトの開発過程と感想

プロジェクト紹介

このプロジェクトは、サーバーの時間をできるだけ正確に知らせるサービスです。人気のあるチケットや受講登録は通常、開始と同時に数秒で締め切られます。そのため、すぐに申し込む必要があります。しかし、問題はすべてのサーバーの時間が微妙に異なることです。どこかは2秒速く、どこかは1秒遅いです。さらに大きな違いもあります。サーバーの時間を事前にチェックし、受講登録をすることは必須です。

開始の理由

どのプロジェクトを進めるか考えているうちに気づいたことがあります。1人で開発する製品は、リソースが豊富な企業とは異なる必要があります。1人で開発する人は資金も不足しており、開発に使用できるリソースも不足しています。したがって、少し商品性を諦めても、より少ないリソースを使用する製品を作る必要があります。それによって継続できます。

受講登録やチケット販売によく使用されるサーバー時間の確認サイトは、バックエンドにほとんど負担がかかりません。Vereclを介して展開すれば追加の展開コストもかからないため、広告を通じて少しの収益化でも実現すれば、私が眠っている間でも少しずつお金を稼いでくれます。一度作っておけば特に問題なく継続して運営されるウェブサイトは、1人で開発をする私にとって良いテーマでした。

制作過程

初めてのプロジェクトだったので、事前に計画を立てて開始しました。
- ターゲット：10〜30歳の年齢層、公演の予約や受講登録をする人々。
- 開発期間：2週間としました。
- 1週間目には、核心機能のみが動作するMVPバージョンを作成し、2週間目にチャットの追加や以下のような不足部分を補いました。一度に完成させず、段階を分ける理由は、MVPバージョンを事前に展開し、改善する際に私が最も効率的であるためです。

2. プロジェクトの規模に比べてスケジュールを長く取った理由は、今後この程度の小さなプロジェクトを複数展開する予定があるためです。毎回ゼロから作るよりも、テンプレートや必要なライブラリを事前に作成し、次のプロジェクトで活用できるようにすることを目標としました。

Next.jsのテンプレートを作成しました（i18n、svgr、react-query、tailwindcssなどを事前にセットアップしました）。
デザインシステムのプロトタイプを作成しました。ボタンや入力などよく使用するコンポーネントを事前に作成し、Githubパッケージに展開して使用できるようにしました。

ドメインを購入せずにサブドメインに接続しました。広告収益が得られるかどうか不透明なプロジェクトに毎月ドメイン費用を支払う余裕はありませんでした。(https://servertime.danver.io を使用しました。)
Route53を使用してVercelサーバーレスのコールドスタート問題をウォームアップしました。
何をするかを細かく分けておくことが作業しやすいため、事前にカードを作成しました。1つのカードを終えるたびにクリア表示をして箱に入れながら、1日にどれだけの仕事を処理したかを毎日チェックしながら管理しました。
デスクの前にGoogle Homeを置いて、25分ずつ働いて5分休憩を繰り返しました。同じ姿勢で長時間働くと体に負担がかかります。少しずつ頻繁にストレッチをしてあげると、そのような問題なく長時間集中できるため、Google Homeの助けを借りています。ポモドーロタイマーも試してみましたが、いくつかの方法を試してみましたが、最も便利です。仕事を始めるときに「ヘイ、Google、25分タイマー」と話しかけると、正確に25分後に通知してくれるため、時間管理が楽になります。
翻訳テキストはGoogleスプレッドシートで管理しました。一目で見やすく、将来友達に翻訳を依頼する際に便利です。スプレッドシートに記入し、コマンドを使用してダウンロードしてi18nに合わせて変換します。

8. デザインシステムはGithub Packagesを介して展開して使用しています。NPMとは異なり、Github Packagesは一定範囲までプライベートパッケージを無料で使用できます。

9. Vercelを通じてウェブを展開しましたが、サーバーレスの特性上、数分使用を停止するとCold startが発生します。Route 53 Health Checkを活用して30秒ごとにリクエストを送り、常に迅速に接続できるように設定しました。この部分は以下のブログ記事を参考にしました。

https://medium.com/aws-tip/speeding-up-aws-amplify-nextjs-first-render-cold-start-and-images-an-unexpected-result-36a416d69615

使用した技術

ウェブ：Next.js、Typescript、TailwindCSS
多言語化：next-i18next（翻訳）、Googleシートを使用した翻訳テキスト管理
チャット：Firebase Realtime Database
音声再生：use-soundライブラリ（https://github.com/joshwcomeau/use-sound）
展開：Vercelを通じた自動展開
バックエンド：Next.js APIルートバックエンド

良かった点

Github Packagesを通じてライブラリを初めて展開して使用したこと
フロントエンドとバックエンドの両方に自動展開を適用して、コードに集中できるようにしたこと（1人で開発の問題であるリソース不足を少しでも助けることができる）
Firebase Realtime Databaseを使用してチャットサービスを無料で簡単に作成したこと（1日ダウンロード360MBまで無料）
今後使用する技術の方向性を決めたこと。お金を稼ぐことに新しくてより良い技術は意外に必要ない。技術よりもビジネスがより重要なので。技術を学び、試行錯誤を解決する時間に1つのプロジェクトを作ることを選択した。退職後私が与えられた時間は6ヶ月。その中で結果を出したい。

進行中に経験した失敗

1. 正確な時間の推測が不可能

このサービスの核心は、サーバーの正確な時間を知ることですが、ここには限界があります。ウェブではいつも遅延があり、ネットワーク状況に応じてその時間が常に異なるためです。CORSの問題により、ユーザーのデバイスではなくVercelサーバーからチケットサイトにシグナルを送ることにも問題があります。より良い方法を見つけるまで、現在の方法のまま使用することにしました。

2. AmplifyでNext.jsを展開

Vercelに広告を掲載すると有料プラン（月額$20）を購入する必要があります。このような問題がないAWS Amplifyを介して展開を試みましたが、ロケールの検出に困難があり、諦めました。ミドルウェアで挑戦しましたが、順調ではありませんでした。決められたスケジュールがあるため、後で問題が解決されたら再度試してみる予定です。

3. AdSense承認失敗

コンテンツが不足していたため失敗しました。より多くのコンテンツを追加する必要があります。この部分は、むしろブログを通じて広告承認を受ける方法に変更します。ルートURLに対して承認を受けると、サブドメインは承認なしで使用できるため、ブログを通じて承認を受けて今後作成されるプロジェクトには最初から広告を挿入する予定です。

## 締めくくり

簡単なサイトではありますが、計画した通りの成果物を作り出せたことに満足しています。また、次のプロジェクトを迅速に作成できるように、さまざまな基盤を作り上げたことが嬉しいです。これからは考え方が少し変わるかもしれません。今後、新しいサービスのMVPバージョンは小規模ならば1日で作成して展開できるため、出勤しながら道を歩いているときにアイデアが浮かんだらすぐに試してみることができるかもしれません。

いつか完成させたいリスト

言語翻訳を他のユーザーからの支援を受けられる環境を構築。1つの言語を追加すると、その言語を使用する人だけだけ検索に表示される確率が増加します。これを実現するために言語翻訳支援を受けられる方法を考えてみたいです。これから私が作るどんなサービスでも活用できるためです。