Vercelを使ってみる

ホスティングサービスのVercelへのデプロイを、GitHubを使って行ってみます。

アカウント作成

Vercelでの作業前に、Vercelと連携するGitHubのリポジトリを作成しておいてください。
今回はHTMLファイル1枚のみ追加したリポジトリを用意しました。

リポジトリ作成後、GitHubにログインした状態でVercelのサイトにアクセスします。
右上のSign Upをクリックします。

アカウント作成方法を選択します。
今回はContinue GitHubをクリックします。

GitHubへのアクセス許可が求められるので、問題なければAuthorize Vercelをクリックします。

Vercelのアカウントが作成されました。

デプロイ

Select a Git Namespace から Add GitHub Accountを選択します。

インポートするリポジトリを選択します。
Only select repositories > Select repositories で先ほど作成したリポジトリを選択して、Installをクリックします。

リポジトリの追加ができたので、Importをクリックします。

プロジェクトの構成を設定します。
今回はルートディレクトリにHTMLファイルがあるのみなので、特に変更は行いません。
Deployをクリックします。

少し待つと、デプロイが完了しました。
Go to Dashboardをクリックしてダッシュボードに移動します。

右上のVisitでページを確認できます。

プレビュー

Vercelではブランチ単位で別ドメインのテスト環境が用意されるので、その機能も試してみます。

メインブランチから別途ブランチを切ってからファイルを変更して、コミットとプッシュを行います。
Vercelのダッシュボードに戻って、Deploymentsをクリックします。

先ほど追加したブランチが増えているので選択します。

右上のVisitから、変更したブランチの状態を別ドメインで確認できました。