📚 概要
Next.jsを使用しブログ機能を備えた制作物置き場として作成しました。
tsParticleを採用し、言語アイコンがつながったり離れたりするのがなんだかおもしろいサイトになったらよいなと思っています。
制作期間：2週間～3週間
🛠️使用言語・ライブラリ
Next.js,React,Typescript,HTML/CSS,Git
本当は、ブログ機能でバックエンドも用意したかったんですが、vercelの公式テンプレートにnext-mdx-remote問物があり、ブログ機能が実装されていたのでそれを流用しました。
開発期間も当初2週間程度で見積もっていたのもあり、できるだけ工数を省くための選択でした。
🏠デプロイ先
Vercelを選択しました
はじめは、AWSへのEC2デプロイを考えていました。（ポートフォリオでAWS使いましたと書きたい邪心がありました。）
調査中にCloudFront＋S3デプロイができるという記事をみて好印象だったので、早速実装&デプロイにとりかかりました。
以下実装時の概要データになります。
■AWS構成図（ボツ）
実装完了時、ページが動いた！やった！と思ったのですが、落とし穴が二つ。
- CloudFrontは青天井の従量課金制
- アクセス制御のためには、AWS WAFの導入が必須（一個500円+従量課金サービス）
- ドメイン名設定にAWS Route53を入れるとそこでも課金が発生
単純計算で最低500円～1000円/月かかってしまうことが判明
当初は300円くらいでデプロイできたらいいなぐらい気持ちで開発していたので、予想外の出費です。 薄月給の私にはどうしても許容できない問題でした。
やむなくAWSデプロイをあきらめ、無料枠で安心なVercelへ転換することに。
vercelデプロイはボタンポチポチするだけなので簡単で、国別アクセス拒否機能なども無料で使えたので助かりました。
次のアプリ開発の際はインフラをどうするかといったところが最大の壁になりそうです。 フロントはNetlifyはGithub Pagesをうまく使えば何とかなりそうでした。 バックエンドもRenderを使えば無料デプロイとして問題なさそう。 ネックはDBですね。無料で使わせてくれる選択肢が現在ないのでは？といった状態。 こういったところを考慮するとクラウドにリソースを持たせずに、バックエンドを含めた実装はアプリ開発はデスクトップアプリ開発や、スマホアプリ開発で行い、アプリのDLページをAstro＋GithubPagesなどで用意するのがよさそうな気もしてきます。
少し話がそれました。
今回の個人開発での学びは、インフラの用意がかなり厄介ということでした。 AWSは機能は豊富で設定次第で理想の環境が設定できそうですが、それと引き換えにお金はしっかりと取られてしまうという印象です。
アプリ開発の無料デプロイ方法の模索はこれからの課題になります。
💪力を入れたところ
シンプルなデザインで最低限動くものといったコンセプトで作成しました。
作成途中背景が寂しかったので、いろいろ調べてTsParticleを導入することになり、画像をふわふわ浮かせたところ、いい感じの出来あがりになり満足しています。
簡単にロゴも作って設定してみました。
🖊️反省点
- 開発スピードを意識しすぎるあまり、ディレクトリ分割があまりできていない。
- デプロイ先を技術選定時に決めきれず、実装時に右往左往して余計に時間がかかってしまった。
- Figmaで当初デザインをしていたが、スピード重視として開発先行のデザインになってしまった。
- Tailwindの記述ルールを特に考えず書いてしまって可読性が下がってしまった。
あたりかなと思っています。
とりあえず最低限動くものを作る。が目標だったので、その目標は達成できたと思います。 次回の開発から今回の反省を活かして開発のクオリティをどんどん上げていきたいです。
📌感想
思ったよりも時間がかかりましたが、3週間程度で完成しました。
あとから見返して思ったのが、いろいろとあらが目立つな。。。というのが正直な感想です。 崩れにくいレスポンシブデザインの設計や、スタイルの一貫性。 挙げ始めればきりがないですが、少しずつ修正を行いながら運用しつつ、機をみて再度リニューアルを行っていきたいです。
現在、暗記カードアプリをtauriで作成中で、これが終わり次第プログラマ向けのノートアプリを作成したいなと考えています。
llmアプリにも挑戦しないとと考えているのですが、少し調べてみた感じだと今の私にはまだ学習コストが高いかなといった印象です。
pythonなどを使用して、データ分析・データの前処理などから少しずつ経験を積みつつ2，3年以内ぐらいでllmを活用したアプリ作れたらいいな。といったそんな感覚です。
ここまで、本記事にお付き合いいただきありがとうございました。 また少しずつ、更新していく予定ですので良ければ他のページもお立ち寄りください。