手軽に高速にWebサイトを公開！ Webホスティングサービス「Vercel」の概要と使い方

Vercel＋Next.jsを活用したWebアプリケーション開発入門　第1回

　皆さんがBlogやランディングページなどのWebサイトをいち早くインターネットにサイトを公開したいとき、どんなプラットフォームを活用しようと思い浮かべるでしょうか？ Amazon S3などのクラウドサービスでしょうか？ それともGitHub PagesやNetlifyなどのホスティングサービスでしょうか？ この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。

対象読者

• JavaScript、Next.js、Web開発の基礎を理解している方
  • Next.jsについては「Next.jsのシングルページアプリケーションをデプロイして、基本をマスターする」を参照してください。
• GitおよびGitHubの経験がある方
• CI/CDの経験がある方
• Webのホスティング環境に興味のある方
  • NetlifyやGitHub Pagesのご経験がありますと、より理解がしやすいと思います。

前提環境

　筆者の環境は次の通りです。

• Windows 10
• Visual Studio Code
• Next.js
• Vercelアカウント
• GitHubアカウント

Vercelとは

　VercelはCI/CDとWebサーバーが合わさったサービスです。無料で始めることができ、GitHubなどのリポジトリと連携することで手軽にアプリケーションをデプロイすることが可能です。また、CDNが含まれているため高速なページ表示が可能となっています。

　Vercelが目指していることは、最高の開発者エクスペリエンスとエンドユーザーのパフォーマンスへのこだわりです。チーム開発もサポートしており、開発チームにすぐに組み込むことが可能です。

　現在では電子商取引、旅行、ニュース、マーケティングといったさまざまな用途に使われており、代表的なサイトはPatreonがあります。

Vercelが持つ3つの特長

　Vercelでは他のサービスと比べて3つの特長があります。

1. Fast Refresh

　ライブエディットに対応しています。コードで変更した箇所が即座にブラウザ上で確認できます。

2. Flexible Data Fetching

　作成したページを任意のデータソース、ヘッドレスCMS、APIに接続し、開発環境で動作させることができます。

3. Edge on Localhost

　キャッシュからサーバーレスファンクションまで、すべてローカルホストで完全に動作します。