3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Cloudflare×Next.jsで低コスト高パフォーマンスの個人サービスをリリースした話

Last updated at Posted at 2024-10-20

はじめに

今回は、CloudflareとNext.jsを使って個人サービス(https://techrecruitindex.com) を開発し、低コストで高パフォーマンスなWebサービスをリリースした経験を共有します。年間わずか1,716円(11.48ドル)で、Google PageSpeed Insightsでほぼ満点を獲得するサービスをリリースしました。

リリースした個人サービスについて

IT企業の技術ブログと採用情報を一元化し、効率的に検索できるサービスです。
主な特徴は以下です。

  • 500社以上のIT企業の情報を集約
  • 技術ブログと採用ページへのクイックアクセス
  • 企業名での検索機能

ユーザーが興味のあるIT企業の技術ブログや採用HPへワンクリックでアクセスすることができます。

技術スタック

  • Next.js(TypeScript)
  • Tailwind CSS
  • Cloudflare Pages
  • GitHub

技術選定理由

個人サービスをリリースする上で、今回はパフォーマンスとコスト(金額的/時間的など)に着目して開発していきたいと考えていました。
その上で私は下記の理由で今回の技術スタックを選択しました。

  1. 低コスト運用: Cloudflare Pagesの無料枠で十分なホスティング機能を活用可能
  2. 高速なパフォーマンス: Next.jsの静的サイト生成(SSG)とCloudflareのCDNによる高速配信
  3. 簡単なデプロイ: GitHubとCloudflare Pagesの連携による自動デプロイ
  4. 効率的な開発: Next.jsの充実した機能とTailwind CSSによる効率的なUI開発

パフォーマンスと運用コスト

結果として、以下のようなパフォーマンスと運用コストを達成しました。

Google PageSpeed Insightsスコア

年間運用コスト: 1,716円(11.48ドル)

  • Cloudflare Pages: 無料
  • ドメイン費用: 約1,716円(11.48ドル)/年(.comドメイン)

まとめ

初めてCloudflare(Pages)を利用しましたが、個人的には非常に便利なサービスであると実感しました。
特に個人開発をする者にとっては大きなメリットがあるのではないでしょうか。
次はWorkersの方も利用してみたいと思います。

本記事をお読みいただきまして、ありがとうございました。

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?