Vercelへ独自ドメインを使ってデプロイする

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

個人開発のアプリを独自ドメインでVercelへデプロイしたのでメモしておく。

 

Projectを作成する

まずVercelのダッシュボードへ移動する。

 

1:Create a New Projectをクリック

 

2:ホスティングしたいアプリケーションを選択する

まず検索窓にRepository名を入力する。

今回はプライベートなRepositoryをホスティングしたかったので、Vercelにプライベートリポジトリをimportをするための権限を与える必要がある。

 

『Configure GitHub App』をクリック。

 

どのアカウントにVercelをインストールするか選択する。

 

Vercelをインストールするアカウントを選択すると、VercelがアクセスできるRepositoryの選択画面へ遷移する。

 

すべてのRepositoryへアクセスしても良ければ『All repositories』を選択、特定のRepositoryのみへのアクセスを許可する場合は『Only select repositories』を選択する。

 

自分の場合は、全てのRepositoryへのアクセスはさせたくなかったので、『Only select repositories』を選択。

 

選択したら『Save』を押す。

 

Saveをするとデプロイするページへ遷移するので、まずは使っているフレームワークを選択する。

 

今回はNext.jsのアプリケーションなので、Next.jsを選択。

 

あとは環境変数の設定などがあれば、Environment Variablesで設定できる。

最後に『Deploy』をクリックする。

 

 

 

Projectに独自ドメインを紐付ける

 

Projectの作成が終わったら、このProjectに取得したドメインを紐づける。

まだドメインを取っていないようであれば、ドメインの取得費用の安い『お名前.com』で取得するのがおすすめだ。

 

1:取得したドメインを追加する

まず『Settings』をクリックし、左サイドバーの『Domains』をクリック。

 

そうすると、以下のような画面に遷移する。

 

次に取得したドメインを入力して、『Add』をクリックする。

1番上のAdd www [Your Site]~ and redirect [Your site] to itを選択し『Add』する。

 

独自ドメインをAddすると、ネームサーバーを設定してくれと言われるので、Intended Nameserversに記載されている2つの値をそれぞれコピーしておく。

 

コピーしたネームサーバーの値をドメインを取得したサイトで設定する。

設定の方法だが、『お名前.com』の場合は以下の動画を観ればOK。

 

 

以上で独自ドメインの紐付けが完了した。

しばらくすると、設定したドメインでサイトを閲覧できるようになる。