要約
- 推しのVsingerの情報まとめサイトを作った
- Next.js で開発して、AWS Amplifyでホスティング
- サイトを作って運用してみると色々勉強になる
- SEO・多言語対応・モバイルファースト・高速化とか
- 個人開発で手動テストは辛いのでテストコードは大事
動機
- 推しの個人勢Vsingerを布教・拡散しようにも、ネットも現実も交友関係がゼロなので全く役に立てない
- フロントエンド・SEO・広告運用の勉強がてら布教用の情報まとめサイト作ってみようと思い立つ
やったこと
- GitHubリポジトリ作成
- 要件定義・基本設計・技術選定などをREADME.mdにまとめる
- GitHubのProjectsで最初のリリースに向けてタスクを切る
- ローカル環境構築・開発
- faviconとかはFigmaで作成
- 本番環境構築・リリース
- AWSアカウント作成
- AWS Organizationsでrootと本番環境のアカウントを別々にしてSSOを設定
- 本番環境AWSアカウントのRoute53でドメイン購入
- AWS Route53は個人利用だとにWhois代行やってくれる
- 本番環境AWSアカウントのAWS AmplifyでGitHubリポジトリ連携してデプロイ
- AWSアカウント作成
- リリースしてみたがサイトにトラフィック流入させても即離脱するレベルなのでコンテンツをブラッシュアップ
- sitemapとrobots.txtなどを自動生成して、Search Consoleから登録
- 多言語対応
公開したサイトはこちら
日中は仕事があるので、夜や休日の勉強時間で作業してだいたい2週間ぐらいで最初のリリース。
その後は直したい箇所に気づいたらIssueを立てては細かくリリースを繰り返し。
最近はCypressで多言語化部分のテストを書いたりしてる。
得られた知見・所感
- Webアプリケーションフレームワークとフルマネージドホスティング環境はとっても楽
- ハッカソンとか製品開発前のプロトタイピングとかにも使えそう
- Tailwind使えばCSSのスキルが雑魚でもレスポンシブ対応できた
- AWS Amplifyでだいぶインフラの手抜きができた
- インフラのプロビジョニングやらデプロイパイプラインの構築作業が不要
- ECSで同じことをやろうと思うとぞっとする
- インフラのプロビジョニングやらデプロイパイプラインの構築作業が不要
- Next.jsの多言語対応が予想以上に使いやすかった
- 言語ごとのディレクトリやページファイルを作らなくてよい
- CIでのテスト実行は早めに導入すべき
- 多言語対応するとE2Eを自動化しないと回らない
- 最初から立派なものを作ろうとせず、割り切ってリリースして後から改善するのがよさげ
- 動くものができると楽しい
- GoogleAnalyticsやSearchConsoleで改善が目に見えるので次のモチベにつながる
- サイトの構築・運用費用が思っていた以上に安かった
- ドメイン購入費用含めて5月の請求が 13.75ドル (内ドメイン購入が12ドル)
- CloudFrontでコンテンツキャッシュが効くため、この先もお安く運用できそう
運用費用なんてYouTubeで黄色のスパチャ投げる程度でしかないから、
エンジニアリングスキル持っている人は推し活DXすればいいと思う。