Vercelってどんなサービス？
Vercel は、追加の構成を必要とせずに、Web アプリをより迅速に構築および展開するために必要なツール、ワークフロー、インフラストラクチャを提供する開発者向けプラットフォームです。
公式ドキュメントではこのように紹介されていました。
Vercelが優秀である点は、シングルページアプリケーション(SPA)のデプロイを行ってくれることです。主にReactやVueなどJavascriptのフレームワークを使用したアプリケーションのことを指しますが、特徴としては、動的なコンテンツを含む描画を可能にします。SPAはJSX記法やTypescriptで書かれますが、ブラウザはこれを直接理解することが出来ません。そのため一度ブラウザが理解できるファイル形式に変換する必要があります。この処理がビルド(コンパイル)にあたります。そして、変換されたファイルをサーバー上に配置(デプロイ)することで、インターネット上でwebアプリケーションを展開することが出来ます。
「ビルド」と「デプロイ」を自分で行うにはバックエンドの知識や、サーバーの用意をする必要があり複雑です。しかしVercelを利用することで、これらの作業を自動化でき、手軽にアプリケーションを公開することが出来ます。
実際に使ってみる
– アカウントの登録
始めに、Vercelのトップページから、「Start Deploying」ボタンをクリックします。
Vercelのデプロイ機能を利用するには、vercel内でサインアップする必要があります。
VercelではPlan Typeが全部で3種類存在します。個人開発や非営利目的での使用であれば無料のHobby Typeで十分です。有料のPro Type、enterprise Typeでは、商用利用が可能になり、チーム機能も追加されることからビジネス利用に適しています。
今回はHobby Typeを選択します。
VercelはGitHub、GitLab、Bitbucketなどのバージョン管理サービスと連携できます。これにより、各サービスにプッシュされたアプリケーションを、Vercelでビルド・デプロイすることが出来ます。事前にGitHubアカウント等は作成しておきましょう。
メールアドレスで先に進んだ場合でもGitHub等と連携することが可能です。この記事ではGitHubで進めていきます。
– GitHubの同期設定
連携後はこのようにレポジトリが表示されます。もしデプロイしたいレポジトリが表示されていない場合には、「Add GitHub Account」を選択します。
そうすると、GitHub側のサイトに飛びます。「Repository access」の項目で「All repositories」が選択されているか確認してください。これによりGitHubアカウントに紐づけられている全てのレポジトリをVercelで選択することが出来ます。
– デプロイ
デプロイしたいリポジトリの「import」ボタンを押し先に進みます。
この画面ではプロジェクト名や、フレームワークプリセット(各フレームワークに適したビルドが可能)、ルートディレクトリを指定することが出来ます。「Deploy」ボタンを押すと、ビルドとデプロイが開始されます。
進行状況を確認できます。小規模のアプリケーションであれば1分程度で完了します。
問題が無ければ完了の画面に遷移します。
一度デプロイが完了したプロジェクトは、サイト上部のメニュー「Project」から詳細を確認できます。
「Visit」ボタンを押すと、アプリケーションが別ウィンドウで立ち上がります。
豊富な機能・サービス
Vercelには他にも便利なサービスが用意されています。自分で使用したことが無いため詳しい説明は出来ませんが、いくつか紹介させていただきます。
– Serverless Functions
ユーザー側が、サーバーの準備やインフラストラクチャの管理をすることなく、サーバー側のコードを実行することが出来ます。APIエンドポイントの作成や、データベース操作、外部APIの呼び出しなどに利用できます。
– Edge Functions
この関数は、デフォルトでグローバルにデプロイされ、ユーザーリクエストに最も近いリージョンで実行することで、低レイテンシで提供されます。地域別コンテンツや認証処理などに利用できます。
– 画像最適化
webアプリケーションに追加する画像を、常に適切なサイズにすることができます。これによりwebサイトの読み込み速度の改善に繋がります。
