Blog

Next.jsで構築したコーポレートサイトをNowにデプロイした話

zeit/now

はじめに

株式会社GEEKでフロントエンドエンジニアをしている川津です。
弊社の事務所移転に伴い、コーポレートサイトのリニューアルすることになり、その構築担当になりました。

今回のリニューアルではコーポレートサイトはSPAで構築するという要件があったため、今回はNext.jsで構築しました。

Nowを選んだ理由

構築したサイトを通常のレンタルサーバにアップしてもページリロードすると404になったりとSPAサイトとして公開するためにはサーバ上の設定も必要なことがわかりました。

そこでNext.jsを提供しているZEITが同じく提供しているNowというサービスを利用してデプロイすることにしました。

Nowを選んだ理由としては

  • デプロイ方法がカンタン(コマンド、手順が少ない)
  • Next.jsで構築したサイトを多くの設定なしでSPAサイトとして公開できる
  • 無料プランでも機能的に不足する点が少ない

上記のような理由からです。早速仮アドレスでデプロイしてみたところ、SPAサイトとして正常に動作してくれました。

SPAサイトとしての動作上は問題なかったのですが、今回は以下のような点でつまずきました。

既存の独自ドメインをNowに移行

既存で取得している独自ドメインをNowに移行させるためには

  • 独自ドメインの所有者認証
  • 独自ドメインの SSL 証明書

上記の手順が必要になります。

追加した独自ドメインのスタータスはNowのprojectの管理画面からもステータスが確認できるのですが、所有者認証が済んでいるのになぜかクリアになりませんでした。

いろいろ試行錯誤した結果、独自ドメインで取得しているSSL 証明書をNow上にアップロードすることでようやくクリアになりました。

静的サイトとの同居

リニューアルある前からあるリクルートサイトはNowでデプロイしたコーポレートサイトの配下にそのまま残すことになりました。既存のリクルートサイトは静的サイトとして構築されていました。

Next.jsで構築したSPAサイトと静的に構築したサイトを合わせてデプロイするにはそれぞれのbuild方式を設定してデプロイする必要がありました。そこでデプロイする際のnowの設定ファイルである「now.json」に以下の追記をすることで両方正常にデプロイすることができました。

"builds": [
    {"src": "recruit/**/*", "use": "@now/static"},
    {"src": "next.config.js", "use": "@now/next"}
  ],

GitHubとの同期を解除

デプロイした直後はリクルートサイトは正常に閲覧できていたのですが、しばらくすると404になりサイトが閲覧できなくなるという現象が発生しました。

いろいろ調査した結果、NowプロジェクトとGitHub上のリポジトリを連携させている場合、定期的に自動同期をとっていることが判明しました。

リクルートサイトは静的サイトのため、Next.jsで構築したコーポレートのリポジトリには含めていないことが原因だったようです。

そこでnow.jsonに以下の追記をすることで自動同期を解除することができました。

"github": {
    "autoAlias": false
  }

終わりに

いろいろつまずいた点はありましたが、一からサーバ設定をする労力と比較すると大きなつまずきもなく設定も最小限でスムーズに公開できたように思えました。

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES