Next.jsとStorybookをVercelにデプロイする
以前書いた「Next.js+TypeScript 環境で Storybook を使う」では Next.js と Storybook の環境を立ち上げるところまでやりましたが、Vercel へのデプロイを行う前にブログ記事の締め切りが来てしまいました。
今回は積み残した Vercel へのデプロイをやります。
今回も前回と同じプロジェクトを使い、作業内容は下記にPRしました。
今回主に参照した公式ドキュメントのページは下記です。
- https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
- https://vercel.com/docs/configuration#project/redirects
Vercel とは
Vercel は Next.js の開発元である Vercel 社が提供しているフロントエンド向けホスティングサービスです。
かつては会社名が Zeit でサービス名は Now でした。「Zeit Now 便利！！」とか言われていたものは Vercel になりました。
Vercel の設定
基本的には Vercel でアカウントを作成したら画面のとおりに進めていき、GitHub 上のプロジェクトを紐付けて権限を渡せばデプロイが可能です。
とくに Next.js などメジャーなフレームワークを使っている場合は Vercel 側が自動的に判定しておすすめのデプロイを提示してくれるのでそのまま設定すれば master や各ブランチでのデプロイができます。
無事設定と初回のデプロイに成功すると下記のような画面になります。
前回の修正
前回の記事ではデプロイのチェックまでしておらず、いくつか問題があったのでまずは修正を行います。
Story を pages ディレクトリから削除
pages/ ディレクトリにある tsx ファイルはすべて Next.js の routes に反映されてしまうので Storybook 向けの *.story.tsx などは components/ ディレクトリに移動しました。
Next.js のビルドに story を含めない
next.config.js に webpack パートを指定することで Next.js が内包している webpack 設定を上書きできます。
Storybook の内容は Next.js に含める必要がないため webpack.IgnorePlugin を指定します。
※前述の Routes の件はファイル名を参照しているらしく、 IgnorePlugin を使っても無視することができませんでした。ここを解決できれば pages/ 以下に Story を置くことも可能かもしれません。
module.exports = {
// via. https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
webpack: (config, { webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\.stor(ies|y).[tj]sx$/));
return config;
},
};Vercel のリダイレクト設定
ここまでの内容で無事デプロイは通るようになりました。
しかし、デフォルトの Vercel 設定では trailing slash をケアしてくれません。そのため Storybook にアクセスする際 /_storybook のように末尾にスラッシュなしのURLで開いてしまうと assets の相対パスがずれてしまい何も表示されません。（前回の記事ではここでハマってしまい締め切りに間に合わせられませんでした。がっでむ）
Vercel の設定で trailing slash を統一することもできるのですが、開発しているアプリ本体ではなく Storybook のみの問題なので今回は個別に対応することにしました。
/_storybook を開いてしまうのが問題なので、 /_storybook から /_storybook/ へリダイレクトすれば解決です。
また、 Storybook では任意のページをトップにするのがうまくいかないことがあるので Welcome to Storybook のページがトップになるようリダイレクト先を設定することにしました。
Vercel の設定は vercel.json に記述します。今回はリダイレクトだけできれば良いので下記を参照しました。
{
"redirects": [
{
"source": "/_storybook",
"destination": "/_storybook/?path=/story/welcome--to-storybook"
}
]
}リダイレクト以外にも様々な設定ができるので一通り見ておくと面白いです。
完成
これで Vercel 上に Next.js と Storybook のデプロイができました。
ここまでの作業内容の下記PRに push していますのであらためて全体像を把握したい場合はこちらをご確認ください。
すでに master にマージしているので下記URLでデプロイしたものが見られます。
- https://demo-storybook-with-next-typescript.vercel.app
- https://demo-storybook-with-next-typescript.vercel.app/_storybook
- 末尾のスラッシュなしでも問題なくリダイレクトしてるのが確認できます。
ステージング環境の用意はプロジェクト立ち上げ時のとてもめんどくさいタスクの一つだと思います。
Vercel に限らずそれらを手軽にしてくれるサービスがどんどん増えていてわくわくしますね。
とくに Vercel は Next.js の開発元ということもあって個人的にとても期待しているサービスの一つです。
残念ながらまだプロダクションで使ったことはないですがいつか使いたいです。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
