Vue.js(Vite)のサイトをVercelでホストする [初心者向け]

始めに

Vercelとは

Vercelとは、簡単にWebアプリをホストするクラウドプラットフォームです。
サーバーの契約や面倒な設定不要で、簡単にWebサイトをホストできます。

事前準備

リポジトリのフォーク (Organizationのみ)

この作業は、Organizationのリポジトリをデプロイする場合のみ必要です。
個人のリポジトリ(個人開発では普通こちら)では不要です。

Vercelの無料プランでは、GitHub Organizationのリポジトリをそのままデプロイできません。
ここでは、対象のリポジトリを個人アカウントにForkすることで、制限を回避します。

1. 対象のリポジトリのGitHubを開き、上部のForkボタンから、Create a new fork画面を開く
2. Ownerが個人アカウントになっていることを確認してCreate forkを押してフォーク完了
3. 個人のリポジトリ一覧に、対象のリポジトリのFork(コピーみたいなもの)ができていればOK

ここからのデプロイ作業では、今Forkしたリポジトリをデプロイすることになります。

Vercelの設定ファイルを用意する

VueRouterを正常に動かすため、下記のvercel.jsonという名前のファイルを、vite.config.jsと同じフォルダ階層に設置します。

vercel.json

{
    "rewrites": [
        {
            "source": "/:path*",
            "destination": "/index.html"
        }
    ]
}

デプロイ

1. VercelにGitHubアカウントでログイン
2. 「Add New…」などから新しいProjectを作る
3. GitHubのリポジトリ一覧が表示されるので、デプロイしたいリポジトリを選択
4. vite.config.jsがリポジトリ直下にない場合、vite.config.jsのあるフォルダをRoot Directoryとして選択する
5. Framework PresetがViteになっていることを確認する
6. Deployを押してデプロイ
7. しばらくするとデプロイが完了し、DomainsにあるURLから公開されたサイトを確認できる

更新(再デプロイ)

リポジトリの対象ブランチに変更が加えられた場合、自動的にVercelが再デプロイしてくれます。

Forkしたリポジトリの同期 (Organizationのみ)

この作業は、Organizationのリポジトリをデプロイする場合のみ必要です。
個人のリポジトリ(個人開発では普通こちら)では不要です。

Organizationのリポジトリを更新した場合は、Forkした個人アカウントのリポジトリを開いて、Sync forkを押せば、公開済みのサイトも更新できます。

他のアカウントが変更を加えた場合、Vercelの制限で自動的に再デプロイをしてくれません。
再デプロイするには、README.mdあたりを若干書き換えて自分が最終編集したことにします。

参考文献