こんにちは。justInCaseTechnologiesのwebフロントエンドエンジニアのkondeiです
この度、当社は Vercel Pro から Enterpriseプランへと変更しました
差分は Pricing – Vercel の表にある通りです
これから検討している方に参考になりそうな情報としては、
- 契約締結に向けたメールのやり取りについて、こちらからは日本語で書いて送信できた
- 日本語ができる方によるサポートを受けれている
- Onboarding Support (Training sessions and shared Slack channel with a dedicated Customer Success Manager.) とあるように、slackによるサポートがある
- ただし詳細は契約内容による
があります
また、メンバーのohataさんと協力して作った導入申請書の一部を公開します（サービス比較など、不完全な部分も多いですが）
要点としては、メンバーを増やせるということ、SLAがあるということがポイントでした
こういう作業で個人的に印象が深かったのは、非エンジニアに対して必要性が分かりやすい稟議を出すために、工数をどれくらい削減するか見積もるという視点が得られたことでした
導入したいサービス・ツール
概要
- 現状、Webフロントエンド ホスティングサービスとして、Vercelを利用している。
- 現状のProプランは、10人までしか使えない。
- Webフロントエンドエンジニアの増強に伴い、Enterpriseプラン変更をしたい。
導入の目的・解決したい課題
Webフロントエンド エンジニアの生産性の向上
- AWSエンジニアに頼らず自律して開発を進められる or （AWS特有の）インフラ管理・キャッチアップの工数を減らす
- Preview を提供するための、デプロイ管理する工数を削減できる
- 各案件・商品に対して、Preview を迅速・並行して提供することで、社内外の確認を円滑に実施できる
- Next.js の開発元として安定している、管理・構築が不要
- Webフロントエンドエンジニアが使いやすい、ドメイン管理機能がある
- 商品ごとにLPのサブドメインを分けるなど、自律して対応できる
- Webフロントエンドエンジニアが使いやすい、アクセス保護機能がある
- AWSLambdaなどで、Basic認証の実装・連携が不要
- EnterpriseだとSSO Protectionも選べて、チームの大規模化に伴うパスワード共有の煩雑さを解消しやすい
- Webフロントエンドエンジニアが使いやすい、サーバーレスファンクション機能がある
- Preview を提供するための、デプロイ管理する工数を削減できる
- web frontendフレームワーク最大シェアのNext.jsの開発元としてその機能を完璧にサポートし、継続的により良い機能を取り入れられる
- 分離されたインフラでさらなるビルド速度、実行キュー待ちの削減
Vercelで、Webフロントエンドエンジニア or SRE の工数を、6時間/人月 以上 は 削減している
※ 削減できる工数に加え、そこから生み出すクリエイティブに、より価値がある
現状のプランのままだと、10人までしか使えない。
- 現状10人利用しており、更にWebフロントエンジニアが数人入社する（やりくりが限界）
- コミットのAuthorが Vercelのmemberである必要がある
- デプロイ時の担当者がボトルネックor切り替え工数がかかる
- 当社は自律したプロダクトチームを推進、MoveForwardでフルスタックな関わりを推奨している
Vercel 以外のものに移行するにも工数はかかるので、Vercelのプランを変更するのが良い。
事業継続・事故防止・損失回避
導入にかかるコスト
費用
契約に関わるので秘匿
工数・スケジュール感
- 導入そのものにコストは掛からない（プラン変更のみ）
- Enterprise契約の締結なので、段取りに1-2ヶ月かかる
- 英文契約書のレビュー・締結など
- Webフロントエンドエンジニアがジョインする時期までにはプラン変更をしたい
検討した選択肢
要件・比較ポイント
- Next.js 機能のサポート
- サイトパフォーマンスの上げやすさ
- 管理工数（CI/CD連携、ビルド など構築、そのキャッチアップ）
- その他、生産性に寄与する機能
Vercel
Pros
- next.js機能のサポート ◎ （開発元）
- サイトパフォーマンスの上げやすさ ◎
- CDN edgeに配置される
- https://speakerdeck.com/takefumiyoshii/nextjs-make-the-web-faster のように次世代のreactパフォーマンスについて設計されている
- 管理工数 ◎
- その他、生産性に寄与する機能 ◎
Cons
- コスト ○
- コストパフォーマンスは有る
- Amplify並の細かい設定はない
- 複数環境ビルドには若干準備が必要
参考
- 各種フレームワークのサポートにより、next.js以外もデプロイしやすい
- https://vercel.com/docs/concepts/deployments/build-step#framework-preset
- 実際、rinseではnext.js非採用で使っている
- SWCやmonorepoのビルドツールであるturborepoを取り込んでいるなど、生産性改善への取り組みが進んでいる
- SWCなど重要なOSSの作者を雇用しているのでエコシステムの先行きが明るい
serverless-nextjs を使ってAWSによしなに配置
Pros
- next.js機能のサポート ○
- サイトパフォーマンスの上げやすさ ○
- Lambda@Edgeに配置されるので良いと思われるが、AWSの使い方による
Cons
参考
https://www.serverless.com/blog/serverless-nextjs/
https://qiita.com/fumiki/items/5f4408ce844520a922c2
AmplifyとかS3とかに配置
Pros
- コスト
Cons
- next.js機能のサポート ×
- dynamic routingやSSRのような、staticで済まない機能が必要になった場合に対応できない
- サイトパフォーマンスの上げやすさ△
- AWSの使い方による
- 管理工数 ×
- Amplifyはビルドが保留のまま止まることがそこそこ多く不安定で支障が出ることがある
- キャッチアップが難しい
- その他、生産性に寄与する機能 ×
- AWSとしてはある、キャッチアップなどが必要
参考
EC2にnode serverとして配置
Pros
- Next.js 機能のサポート ○
- SSR, ISRなどの基本機能は使えるがvercel + nextで楽に使えることが前提の機能は厳しいと思われる
Cons
- 管理工数（CI/CD連携、ビルド など） ×
- 仮想サーバー管理コストがかかるし、CI/CD を自前で頑張ることになる
- その他、生産性に寄与する機能 ×
参考
netlify
Pros
- Next.js 機能のサポート ○
- 管理工数（CI/CD連携、ビルド など） ○
- その他、生産性に寄与する機能 ○
Cons
参考
https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/
できるけどあえてnext.jsを開発してるところと違う会社のjamstackにする必要がない
セキュリティ・リスク
都合上内容は割愛
その他、リスク・注意事項
都合上内容は割愛
