React+ViteのアプリをNetlifyにデプロイする方法

はじめに

今回は、React+Viteで作成したアプリを静的サイトとしてNetlifyにデプロイする方法を、分かりやすく解説します。

React+Viteのアプリは、GitHub Pagesを利用して公開することも可能ですが、GitHubのフリープランではPublicリポジトリのみが対象となるため、ソースコードを非公開にしたままデプロイするのは難しいです。

一方で、Netlifyを使用すれば、フリープランでもGitHubのPrivateリポジトリからビルドした静的サイトを公開できます。ソースコードを非公開にしつつ、アプリを簡単に公開したい場合に非常に便利です。

前提条件

事前に、公開したいReact+ViteのアプリがGitHubのPrivateリポジトリに登録されている必要があります。

Netlifyの登録

まず、Netlifyの公式サイトにアクセスし、アカウントを作成します。 登録が完了すると、自動的にフリープランが適用されるため、特に追加の手続きは不要です。

GitHubリポジトリのインポート

1. Netlifyのダッシュボードにログインし、「Import from Git」をクリックします。

   

2. 「GitHub」を選択します。

   

3. 「Authorize Netlify」をクリックし、GitHubへのアクセスを許可します。

   

4. アクセスを許可するリポジトリを選択します。

   • 特定のリポジトリのみ許可する場合は「Only select repositories」を選び、対象のリポジトリを選択します。
   • 今後追加するリポジトリも含めてすべて許可する場合は「All repositories」を選択し、「Install」をクリックします。

   

デプロイの設定

1. Netlifyの画面に戻ると、許可したリポジトリの一覧が表示されます。ここから、公開したいリポジトリを選択します。

   

2. Team名とサイト名を入力し、「Check availability」をクリックして、名前が利用可能か確認します。

   

3. ビルド対象のブランチやビルドコマンドを設定します。基本的にはデフォルト設定のままで問題ありません。

   

4. 「Deploy <サイト名>」をクリックし、デプロイを開始します。

   

デプロイの完了

デプロイが完了すると、「View site deploy」のリンクが表示されます。これをクリックすると、デプロイされたサイトを確認できます。

まとめ

今回紹介した手順を踏めば、React+ViteのアプリをNetlifyに簡単にデプロイできます。特に、GitHubのPrivateリポジトリを利用しながら、安全に静的サイトを公開したい場合におすすめです。ぜひ試してみてください！