高速、安定におごってもらうための技術構成でポートフォリオサイト(？)をリリースしました
こんにちは、底辺YouTuberです。
Railsバックエンドエンジニアを1年程度をやっており、最近は個人開発でNext.js触ってます。
はじめに
「おごってください！」というポートフォリオサイトを個人開発で作りました。
本記事ではなぜ「おごってください！」を作ったのか、「おごってください！」の技術構成について紹介させてください。
なぜ作ったのか
自分のポートフォリオサイトが欲しかったというよりも、使いたいと思っていた技術・サービスがまずありました。
使いたい技術・サービスは、Next.js、Stripe、mircoCMS(Jamstackにしたいなー)、Cloudflareだったので、これを全部使って何か作るならどうしよう？
もう一つの理由として 「プロが真面目にふざける」 というのに憧れがありまして、そんな個人開発をしたいなと常々思っております。(まだまだ駆け出しの分際ですが)
「プロが真面目にふざける」 のイメージはまさに以下の動画の感じです。僕はWebエンジニアのこれを目指しています。
で、思いついたのが 「おごり機能付きのポートフォリオサイト」 でした。
「おごってください！」について
サービス概要
トップページのサイト説明文を引用します。
このサイトは太田和希のポートフォリオ機能を持ったおごられサイト?です。
安定、高速におごっていただくためにJamstack構成を採用し、決済には安心安全のStripeを利用しています。
「おごってください！」は ポートフォリオ機能を持ったおごられサイト? です。(引用は読み飛ばされがちなので2度書きました。)
Jamstackを採用することで静的ファイルの配信のみになり、必然的に安定、高速になります。
また、ホスティングサービスにCloudflare Pagesを利用することで、Cloudflareの潤沢なCDNリソースを利用でき、これまた高速に配信できます。
さらに、決済にはStripeのPayment Linksを利用し、簡単に商品をつくることができるかつ、Stripeの決済インフラに乗っかることができるので、これまた安定に稼働させることができます。
デプロイフローと周辺
デプロイフロー
Cloudflare Pagesの本番環境にデプロイされるトリガーは以下の3つがあります。
- リモートリポジトリのmain更新
- microCMSでのお知らせ作成・更新・削除
- GitHub Actionsでの定期Webhook通知(現在は毎日早朝にWebhookが飛ぶようにしています)
最後の定期Webhook通知は、僕が書いたZennとQiitaの最新記事を反映するために動かしています。ZennやQiitaの記事を作成した時に毎回Webhookを飛ばすのはめんどくさいですし、そんなにリアルタイム性を求められないと思ったのでこの構成にしています。追加でYouTubeの最新動画を載せたい！と思ったとしてもこのフローに乗っかれそうです。
ユーザー
静的ファイル配信のみなので速いです。
| 携帯電話 | デスクトップ |
|---|---|
 |
 |
また、決済は先ほど書いた通りStripeのPayment Linksを利用しています。Apple Pay、Google Payも使えるので、すごく簡単に決済ができます。
弊社のエンジニアに「おごってください！」をお見せしたところ、あっという間(高速)におごってもらうことができました。(その節はありがとうございます！)
Stripeも進化を続けており、顧客が支払い金額を選択できる機能が先日追加されました。
これで、大富豪が来た時でも気持ちよく奢ってもらえそうです。
こだわったところ
維持費を無料にするところはこだわりました。
一応ポートフォリオサイトなのでずっと保持したく、運営費が多くかかるのは避けたいと思っていました。
Stripeの決済手数料3.6%とドメイン代以外は無料で運営できています。
ホスティングサービスをCloudflare Pagesに最終決定したのも、Vercelが商用利用だと有料プランを契約する必要があったからです。
microCMSは無料プランで十分賄えるように、テキストデータのみ利用しています。無料プランだとデータ転送量が20GB/月なので、画像を使うと場合によっては制限されてしまう可能性があるのでやめました。Jamstackでテキストデータしか使っていないということもあり、2022年7月のデータ転送量は0.002GBでした。データ転送量に関してはこのままの制限であれば一生大丈夫だと思います。
速いサイト を作りたいと思ってもいたのですが、Jamstackにしたので苦労することなく高速化できました。
デザイン はすごくこだわったわけではないですが、なんとなくそれっぽく見えるようにしたいなと思っていました。そのため、他のサイトを参考にしながらラフを書いたり、Figmaでそれっぽく整えてから実装に移りました。
| ラフ | Figmaで整えたやつ |
|---|---|
 |
 |
まとめ
今回の記事では個人開発で作った「おごってください！」というポートフォリオサイトを紹介しました。
直近の目標は twitterでバズって、このサイトを宣伝すること です。そのため、バズりそうなおもしろツイートを試みるので是非twitterのフォロー＆ファボ＆リツイートおねがいします。
ついでにYouTubeのチャンネル登録もお願いします。技術とは全く関係ない日台カップルで運営しているチャンネルです。
謝謝！
Discussion