GitHubのリポジトリとVercelを接続して、ホスティングする
Table of contents
このチュートリアルでは、GitHubのリポジトリと Vercel を接続して、ホスティングを行う手順を紹介します。
前提条件
- デプロイを行うGitHubのリポジトリを用意していること
- Vercelにサインアップしていること
このリポジトリはご自分でご用意いただくことも、Newtの Appテンプレートとスターター をご利用いただくことも可能です。NewtのスターターはGitHub上に公開しているので、フォークしていただくことで、リポジトリを用意できます。
リポジトリのフォーク方法については、GitHubの リポジトリをフォークする のドキュメントをご確認ください。
概要
Vercelに新しいプロジェクトを作成し、GitHubに用意したリポジトリと接続します。
環境変数やビルドコマンドをVercelで設定し、デプロイを行います。
詳細に内容を確認したい方は、Vercelの Git のドキュメントをご確認ください。
1. 新しいプロジェクトを作成する
Vercelの管理画面に入り、右上の「New Project」を押します。
すると「Import Git Repository」が表示されます。
2. 接続したいリポジトリのアカウントを追加する
「Import Git Repository」の左上にあるプルダウンから、接続したいアカウントが表示される場合は、既にアカウントが追加されています。3に進んでください。
アカウントが1つも表示されない場合や、他のアカウントはあっても接続したいアカウントが表示されない場合は、アカウントを追加する必要があります。
左上のプルダウンより「Add GitHub Account」を選択します。
すると、リポジトリの選択画面に移るので、どのリポジトリにVercelをインストールするか選択して、「Install」を押します。
ここで選択したリポジトリが「Import Git Repository」の欄に表示されます。
「Import Git Repository」の欄にリポジトリが表示されれば成功です。3をスキップして、4に進んでください。
3. 接続したいリポジトリにVercelをインストールする
すでにVercelを使っていて、一部のリポジトリにのみVercelをインストールしている場合、GitHubアカウントは追加されていても、接続したいリポジトリが「Import Git Repository」の欄に表示されていないことがあります。
その場合に、該当リポジトリにVercelをインストールする方法を説明します。
接続したいリポジトリが既に「Import Git Repository」の欄に表示されている場合は、4に進んでください。
「Adjust GitHub App Permissions」をクリックします。
リポジトリを追加して、「Save」を押します。
「Import Git Repository」の欄にリポジトリが表示されれば成功です。
4. ビルドの設定をして、リポジトリをVercelにインポートする
「Import Git Repository」から接続したいリポジトリ選んで、「Import」を押します。
Vercelの Configure a Build を参考に設定します。
プロジェクト名・フレームワーク・環境変数などを設定して「Deploy」を押します。
「Congratulations!」と表示されれば、デプロイ成功です。
もしエラーが発生した場合は、ビルドコマンドや環境変数が正しく設定されているかご確認ください。
5. ページを確認して、正しく表示されることを確認する
ダッシュボードから「Visit」を押します。サイトが正しく表示されていれば成功です。
これで、GitHubリポジトリとVercelが接続されました。
リポジトリに変更をコミットすると、Vercelでデプロイがトリガーされるようになります。
