2020年7月20日更新

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説

Thumbnail

今回の記事では、無料から使える高機能サーバーVercelでGatsbyサイトを公開する方法について紹介したいと思います。

Vercelって何？

まずはVercelがどんなサービスなのか見ていきましょう。

冬眠明けのクマ冬眠明けのクマ

そもそもVercelって何？

以前は ZEIT という名前だった

Vercelという名前を聞き慣れない方も多いと思いますが、それもそのはずで、以前はZEITという名前でした。

関連Vercel公式サイト

個人ユーザーは無料で使える

個人ユーザーは、無料で利用できて、ビルド時間の制限もかかりません。しかもクレジットカードの登録も不要という、個人には優しい料金体系です。

温厚なライオン温厚なライオン

ビルド時間の制限がかからないのは嬉しい。

チームで開発する場合の料金体系

メンバーを追加してチームとして運用する場合には、一人あたり月 20 ドル 〜の料金が発生します。

参考https://vercel.com/pricing

ステップ1: Vercel に登録

まずは Vercel に登録しましょう。

冬眠明けのクマ冬眠明けのクマ

すでに登録が済んでいる人はステップ2から見てね。


GitHub や GitLab、BitBucket の中から、連携したいアカウントを選択します。
※ 連携するアカウントは後で変更や追加ができます。
ここでは GitHub を選択してみます。


ユーザー情報の入力画面が表示されるので、GitHub のユーザー名（または Email）とパスワードを入力・認証します。


問題がなければトップページに移動します。これで連携完了です。

ステップ2: サイトを公開する

Vercel でサイトを作成するとき、Git リポジトリから作成する方法とテンプレートから作成する方法を選択できます。

ここではGitレポジトリからサイトを作る方法について見ていきましょう。テンプレートで作る方法についてはこのページの下の方で紹介しているので、興味がある方はぜひそちらも参考にしてみてください。

Git リポジトリと連携

Git リポジトリからサイトを作成するために、Vercel と Git リポジトリを連携します。


「From Git Repository」の下にある「Continue」ボタンをクリックします。


Git リポジトリとの連携を求められるので、連携したいサービスを選択します。


移動した画面の下の方で、リポジトリ全体へのアクセスを許可するかどうか聞かれるので、「リポジトリ全体」または「一部」へのアクセスを許可します。

Gitレポジトリからサイトをデプロイ

アクセスが許可できたらサイトをデプロイしましょう。


使用したいレポジトリを選択して「IMPORT」ボタンをクリックします。


インポート時の設定画面が表示されるので、アカウント名やプロジェクト名を入力します。


ルートとなるディレクトリを入力します。今回はGatsbyの通常の設定で進めたいので「./」のままにしました。


Gatsby.js や Vue.js、Nuxt.js などの有名なフレームワークの場合には Vercel が自動で設定してくれます（便利！）。
必要に応じて修正してから「Deploy」をクリックします。


Deploy ボタンを押すとビルドが始まり、プロジェクトのトップページに移動します。
あとはビルドが終了するまで少し待てば、サイトの公開完了です！

ステップ3: サイトの設定をする

では、次はサイトの設定をしていきましょう。

環境変数を設定

まずは環境変数の設定です。

冬眠明けのクマ冬眠明けのクマ

環境変数を設定しない人は次に進んでね。


ページ左上にあるナビゲーションメニューから「Settings」ページに移動します。


ページ下部の「Enviromnent Variables」というセクションで環境変数を設定できます。


Production 環境用の変数や Preview 環境用の変数、Development 環境用の変数も設定できます。

カスタムドメインを設定

カスタムドメインを設定についても見ていきましょう。

Vercel 側の設定

まずは Vercel での設定です。


ページ左上にあるナビゲーションメニューから「Settings」ページに移動します。


サイドバーの「Domains」をクリックして、ドメインの設定画面に移動します。


カスタムドメイン用の入力フォームが表示されるので、利用したいドメインを入力して「Add」ボタンをクリックします。


「Intended Nameservers」に書かれたネームサーバーを変更するように言われるので、ドメインレジストラの設定に移りましょう。ネームサーバーをコピーしておきます。

ドメイン登録サイトでの設定

では、ここからは、お名前ドットコムやムームードメインなどのドメインレジストラでの設定です。今回はお名前ドットコムでの操作方法を紹介したいと思います。


ナビゲーションメニューの「ドメイン」をクリックします。


ページ右上にある「ドメイン機能一覧」をクリックします。


ネームサーバー設定のセクションにある「ネームサーバーの変更」をクリックします。


ネームサーバー設定のページに移動したら、Vercel で使いたいドメインにチェックを入れます。


ネームサーバーを「その他」にして、Vercel でコピーしたネームサーバーを貼り付けます。
あとは確認ボタンを押せば、お名前ドットコムの設定は完了です。

冬眠明けのクマ冬眠明けのクマ

ドメインレジストラの設定は少し時間がかかるよ。

少し待つとカスタムドメインでサイトが表示される


設定が完了すると、Vercel のドメイン設定画面にもチェックマークが表示されます。これでカスタムドメインでサイトが表示されるようになりました！

ステップ4: デフォルトの 404 ページを変更

ここまでサイトを公開する方法について紹介してきましたが、404ページの設定方法についても見ていきましょう。


サイトに存在しない適当なパスを入力して 404 ページを表示してみると、、
Gatsby.jsの404ページではなく、Vercelが用意した404ページが表示されます。

今回はVercel用の設定ファイルnow.jsonを使って、404ページをGatsbyの404ページに変更してみましょう。

now.json を作成

Vercel用の設定ファイルnow.jsonを作成し、404 ページのルートを変更します。


gatsby-node.js と同じ階層に「now.json」ファイルを作成します。

now.jsonを作成したら、以下を記入します。

JSON
コピーする
{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "status": 404, "dest": "/404.html" }
  ]
}

リモートに Push したら完了

now.jsonに上のコードを記入したら、リモートブランチにプッシュします。

SHELL
コピーする
git add .
git commit -m "hoge hoge"
git push origin master

これでローカル環境と同じ 404 ページが表示されました！

補足：コマンドでサイトをデプロイするには

先ほどは管理画面からGitリポジトリと連携させる方法でサイトをデプロイしましたが、Vercelではコマンドを使ってサイトをデプロイすることもできます。

コマンドを使ったデプロイ方法についても見ていきましょう。

Now CLI をインストール

まずはデプロイに必要なNow CLIをインストールします。

SHELL
コピーする
# npmを使うとき
npm install -g now
# yarnを使うとき
yarn global add now

最初に使うときはメール認証が必要

Now ClI がインストールできたら、nowコマンドを実行してみましょう。
最初にnowコマンドを実行すると、メールアドレスを使った認証を求められます。

$ now
Now CLI 19.0.0
> No existing credentials found. Please log in:
We sent an email to yourmail@gmail.com. Please follow the steps provided inside it and make sure the security code matches Wonderful Bobcat.

Vercel からメールが届くので、メールにあるverfifyボタンをクリックします。これで無事nowコマンドが使えるようになりました。

✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `now`.
????  Connect your Git Repositories to deploy every branch push automatically (https://zeit.ink/1X).

now コマンドを実行

認証ができたら、もう一度nowコマンドを実行します。

対話形式で Now CLI から公開したいサイトについて質問されるので、流れに沿って回答します。

SHELL
コピーする
$ now
Now CLI 19.0.1
> NOTE: Deploying to Now 2.0, because this project does not yet exist. More: https://vercel.com/docs/version-detection
? Set up and deploy “~/path/to/directory”? [Y/n]
y
? Which scope do you want to deploy to? yourname
? Link to existing project? [y/N] n
? What’s your project’s name? gatsby-blog
? In which directory is your code located? ./
Auto-detected project settings (Gatsby):
- Build Command: `npm run build` or `gatsby build`
- Output Directory: public
- Development Command: gatsby develop --port $PORT
? Want to override the settings? [y/N] n
????  Linked to yourname/gatsby-blog (created .vercel and added it to .gitignore)
????  Inspect: https://vercel.com/yourname/gatsby-blog/jdsj3iee82 [6s]

管理画面で設定したときと同じように、Gatsby や Vue.js、Nuxt.js などのフレームワークを自動で検知して設定を提案してくれるので、必要に応じて修正します。

✅  Production: https://gatsby-blog.now.sh [copied to clipboard] [1m]
????  Deployed to production. Run `now --prod` to overwrite later (https://zeit.ink/2F).
????  To change the domain or build command, go to https://zeit.co/yourname/gatsby-blog/settings

これでビルドが終了し、サイトが公開されます。


サイトのプロジェクトページも自動で作られていますね。
※ 管理画面から設定した場合と同じように設定することができます。

補足：テンプレートを使ってサイトを公開するとき

先ほどサイトを公開する方法を紹介したときに、Gitレポジトリと連携させてサイトを公開する紹介しましたが、テンプレートを使ってサイトを公開する方法についても見ていきましょう。


「From Template」の下にある「Select Template」ボタンをクリックします。


いろいろなテンプレートが表示されます。ここでは Gatsby のテンプレートを選択してみます。


Gatsby を選択すると、プロジェクトの情報を入力する画面に移動します。
プロジェクト名を記入して「Continue」をクリックします。


Gitホスティングサービスとの連携画面に移動します。GitHub などのサービスと連携しておけば自動でレポジトリを作成してくれて便利なので、必要に応じて連携しておきます。

設定ができたら、「Deploy」ボタンをクリックします。


これでテンプレートを使ってサイトを公開することができました。

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.