[{"data":1,"prerenderedAt":559},["ShallowReactive",2],{"\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify":3,"relation-articles\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplifyシステム開発":462,"recommented-articles\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplifyシステム開発":513},{"id":4,"title":5,"body":6,"category":446,"createdAt":447,"description":448,"extension":449,"isRecommend":450,"meta":451,"navigation":452,"path":453,"seo":454,"stem":455,"subCategory":456,"tags":457,"thumbnail":459,"updatedAt":460,"__hash__":461},"blog\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify.md","Vercel(Hobby)→AWS Amplify 移行して分かった両者の違い",{"type":7,"value":8,"toc":430},"minimark",[9,13,26,41,45,48,55,58,61,66,73,77,80,161,169,172,175,183,186,194,197,200,221,224,227,237,240,248,252,255,265,268,273,279,282,293,298,302,312,315,323,326,333,344,351,354,357,373,377,392,401,404,412,424],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16,17,21,22,25],"p",{},"当ブログは",[18,19,20],"strong",{},"VercelのHobby","プランで運用していましたが、このたび",[18,23,24],{},"AWS Amplify","に移行しました。",[14,27,28,29,35,36,40],{},"この記事では、Vercel HobbyプランからAWS Amplifyに",[30,31,34],"span",{"className":32},[33],"marker","移行を決めた理由","と、実際に移行したあとに分かった",[30,37,39],{"className":38},[33],"両者のプラットフォームの違い","についてまとめました。",[10,42,44],{"id":43},"vercelaws-amplify-移行理由","Vercel→AWS Amplify 移行理由",[14,46,47],{},"移行を検討するきっかけになったのは、このブログでAmazonアソシエイトをはじめたかったからです。",[14,49,50,54],{},[30,51,53],{"className":52},[33],"VercelのHobbyプランは商用利用不可","のため、広告を貼ったりアフィリエイトを行ったりするにはProプランにする必要があります。",[14,56,57],{},"Proプランへのアップグレードも考えたのですが、既に使用した経験のあるAWS Amplifyの方が運用コストを抑えることができそうだったので、この機会にプラットフォームごと変えることにしました。",[10,59,60],{"id":60},"コスト比較",[62,63,65],"h3",{"id":64},"vercel","Vercel",[14,67,68,69,72],{},"Vercelには",[18,70,71],{},"Hobby・Pro・Enterprise","の3つのプランがあります。",[74,75],"link-card",{"url":76},"https:\u002F\u002Fvercel.com\u002Fpricing",[14,78,79],{},"3つのプランの違いを簡単にまとめました。",[81,82,83,101],"table",{},[84,85,86],"thead",{},[87,88,89,92,95,98],"tr",{},[90,91],"th",{},[90,93,94],{},"Hobby",[90,96,97],{},"Pro",[90,99,100],{},"Enterprise",[102,103,104,119,137,150],"tbody",{},[87,105,106,110,113,116],{},[107,108,109],"td",{},"用途",[107,111,112],{},"非商用の個人利用向け",[107,114,115],{},"商用またはチーム向け",[107,117,118],{},"さらなるセキュリティ、サポート、パフォーマンスが必要なチーム向け",[87,120,121,124,127,134],{},[107,122,123],{},"金額",[107,125,126],{},"無料",[107,128,129,130,133],{},"1ユーザあたり$20\u002F月",[131,132],"br",{},"※ただし制限を超えた分は従量課金",[107,135,136],{},"Custom",[87,138,139,142,145,148],{},[107,140,141],{},"商用利用",[107,143,144],{},"❌",[107,146,147],{},"⭕",[107,149,147],{},[87,151,152,155,157,159],{},[107,153,154],{},"チーム利用",[107,156,144],{},[107,158,147],{},[107,160,147],{},[14,162,163,164,168],{},"HobbyからProプランに変更する場合は、",[30,165,167],{"className":166},[33],"最低でも$20\u002F月のコスト","がかかります。",[14,170,171],{},"Proプランにもデータ転送量やビルドの実行時間の制限があり制限を超えた分は従量課金になりますが、かなり余裕を持った制限となっています。",[62,173,24],{"id":174},"aws-amplify",[14,176,177,178,182],{},"AWS Amplifyは",[30,179,181],{"className":180},[33],"従量課金","となります。",[74,184],{"url":185},"https:\u002F\u002Faws.amazon.com\u002Fjp\u002Famplify\u002Fpricing\u002F",[14,187,188,189,193],{},"ただし、",[30,190,192],{"className":191},[33],"最初の1年間は制限内の利用であれば無料","となっています。",[14,195,196],{},"従量課金の詳細は公式ドキュメントに記載されていますが、長くなるのでここでは割愛します。",[14,198,199],{},"料金の例として、以下のような記載があります。",[201,202,203,213],"ul",{},[204,205,206,207,209,210],"li",{},"300人のアクティブユーザー\u002F日、600ビルド\u002F月",[131,208],{},"\n→",[18,211,212],{},"8.08USD\u002F月",[204,214,215,216,209,218],{},"10,000人のアクティブユーザー\u002F日、6ビルド\u002F月",[131,217],{},[18,219,220],{},"65.98 USD\u002F月",[14,222,223],{},"（詳細な計算式はドキュメントで確認できます。）",[14,225,226],{},"ちなみにこのブログの場合は以下の通りです。",[201,228,229],{},[204,230,231,232,209,234],{},"100人のアクティブユーザ\u002F日、ビルド10回\u002F月",[131,233],{},[18,235,236],{},"約3.00 USD\u002F月",[14,238,239],{},"主に、ビルドとデプロイの時間とデータ転送(OUT)にお金がかかるため、月のビルド回数とアクティブユーザー数が分かれば概算を計算できます。",[14,241,242,243,247],{},"以上から分かるように、",[30,244,246],{"className":245},[33],"アクセス数がそこまで多くないWebサイトでは従量課金であるAWS Amplifyの方がコストを抑えることができます","。",[10,249,251],{"id":250},"vercelとaws-amplifyの違い","VercelとAWS Amplifyの違い",[14,253,254],{},"当ブログはNuxt.jsで運用していて、単純にサイトを公開するだけであればVercelでもAmplifyでも問題なく可能です。",[14,256,257,258,247,262,264],{},"実際に移行をしてみて、",[30,259,261],{"className":260},[33],"使い勝手に関わる部分で機能の違いがあったのでまとめます",[131,263],{},"\nまた、簡易的なアプリケーションを想定しているため、Serverless Functionsやキャッシュ等には触れません。",[62,266,65],{"id":267},"vercel-1",[269,270,272],"h4",{"id":271},"vercel-toolbar","Vercel Toolbar",[14,274,275,276,278],{},"Vercelの便利な機能として",[18,277,272],{},"があります。",[74,280],{"url":281},"https:\u002F\u002Fvercel.com\u002Fdocs\u002Fworkflow-collaboration\u002Fvercel-toolbar",[14,283,284,285,289,290,292],{},"Vercel Toolbarは、",[30,286,288],{"className":287},[33],"デプロイ環境に表示される開発支援ツール","です。",[131,291],{},"\nコメントやブランチ切り替えといった機能を、画面下部のツールから簡単に行うことができます。",[294,295],"img",{"alt":296,"src":297},"Vercel Toolbarから打ち込んだコメント","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vercel-vs-amplify_vercel1.webp",[269,299,301],{"id":300},"prへの表示","PRへの表示",[14,303,304,305,308,309,311],{},"VercelはGitHubと連携する設定をするだけでGitHubのリポジトリに",[18,306,307],{},"Vercel bot","が設定されます。",[131,310],{},"\nGitHubにプッシュするとPRのコメントでVercel botが表示されます。",[294,313],{"alt":307,"src":314},"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vercel-vs-amplify_vercel2.webp",[14,316,317,318,322],{},"ここでは",[30,319,321],{"className":320},[33],"ビルドの進捗やPrevier環境のURL等が表示","されるようになっており、マージ後の作業にすぐに取り掛かることができます。",[269,324,325],{"id":325},"ログイン認証が付いている",[14,327,328,329,332],{},"Vercelのプレビュー環境はデフォルトで",[18,330,331],{},"ログイン認証","がかかっています。",[14,334,335,336,340,341,343],{},"プレビュー環境はVercelのチーム内の人しか見ることはできず、逆に",[30,337,339],{"className":338},[33],"Vercelにログイン済みであればパスワード不要でプレビュー環境を表示","することができます。",[131,342],{},"\n（チーム外の人でも共有リンクによるアクセスの方法はあります。）",[14,345,346,347,289],{},"一方で、",[30,348,350],{"className":349},[33],"パスワードによる認証はProプラン以上、IPアドレスによる認証はEnterpriseプラン以上のみが使用可能",[62,352,24],{"id":353},"aws-amplify-1",[269,355,356],{"id":356},"コストが低い",[14,358,359,360,364,365,367,368,372],{},"AWS Amplifyの利点小規模なサイトでは",[30,361,363],{"className":362},[33],"運用コストが低い","ことです。",[131,366],{},"\n上にも書きましたが、",[30,369,371],{"className":370},[33],"VercelのProプランの$20の代わりに、Amplifyでは従量課金の金額$3ほどなので大幅にコストカット","できています。",[269,374,376],{"id":375},"basic認証を設定できる","Basic認証を設定できる",[14,378,379,380,384,385,388,389,391],{},"Amplifyの",[381,382,383],"code",{},"アクセスコントロールメニュー","では、ブランチごとに",[18,386,387],{},"Basic認証","をかけることができます。",[131,390],{},"\nAWSのユーザがなくてもアクセスできるため、融通が効きました。",[14,393,394,168,398,400],{},[30,395,397],{"className":396},[33],"Vercelにも「パスワード保護」という機能がありますが、利用には月額150ドル追加費用",[131,399],{},"\n（※詳細な認証方法は不明ですが、Basic認証とは違ってVercelのメンバーでないとログインできない仕様かもしれません。）",[62,402,403],{"id":403},"まとめ",[14,405,406,407,411],{},"この記事では、",[30,408,410],{"className":409},[33],"Vercel(Hobbyプラン) からAWS Amplifyに移行したときのコストや機能の違いを解説","しました。",[14,413,414,415,346,419,423],{},"小規模なサイトであれば、",[30,416,418],{"className":417},[33],"Amplifyの方がコストを抑えられる",[30,420,422],{"className":421},[33],"Vercelの方がVercel botやVercel Toolbarといった便利な機能がある","ことが分かりました。",[14,425,426,427,429],{},"必要に応じて使い分けるのが良さそうです。",[131,428],{},"\nNode環境をデプロイする際の、プラットフォーム選択の参考になれば幸いです。",{"title":431,"searchDepth":432,"depth":432,"links":433},"",2,[434,435,436,441],{"id":12,"depth":432,"text":12},{"id":43,"depth":432,"text":44},{"id":60,"depth":432,"text":60,"children":437},[438,440],{"id":64,"depth":439,"text":65},3,{"id":174,"depth":439,"text":24},{"id":250,"depth":432,"text":251,"children":442},[443,444,445],{"id":267,"depth":439,"text":65},{"id":353,"depth":439,"text":24},{"id":403,"depth":439,"text":403},"システム開発","2024\u002F05\u002F17","VercelとAWS Amplifyの料金体系や機能の違いについて解説します。","md",false,{},true,"\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify",{"title":5,"description":448},"blog\u002Fprogramming\u002Fvercel-vs-amplify","Vue.js",[65,458],"Amplify","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vercel-vs-amplify_vercel-amplify.webp",null,"lFopfWK63sVLplojwqPkkZZMW7aP4C_x3bwgKh2vglM",[463,472,480,487,493,502],{"id":464,"path":465,"title":466,"category":446,"tags":467,"thumbnail":470,"createdAt":471,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Faws-iam-passkey.md","\u002Fblog\u002Fprogramming\u002Faws-iam-passkey","AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました",[468,469],"AWS","Windows","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002F2024-08-22_11-12-41_nvre36gj.webp","2024\u002F08\u002F22",{"id":473,"path":474,"title":475,"category":446,"tags":476,"thumbnail":478,"createdAt":479,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue.md","\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue","React公式チュートリアルをVueでも書いて比較してみた",[477,456],"React.js","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_react-vue_react-vue.webp","2024\u002F06\u002F22",{"id":481,"path":482,"title":483,"category":446,"tags":484,"thumbnail":485,"createdAt":486,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Fvue-scoped-css.md","\u002Fblog\u002Fprogramming\u002Fvue-scoped-css","Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】",[456],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-define-model_vue.webp","2024\u002F06\u002F12",{"id":488,"path":489,"title":490,"category":446,"tags":491,"thumbnail":485,"createdAt":492,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Fvue-playground.md","\u002Fblog\u002Fprogramming\u002Fvue-playground","手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説",[456],"2024\u002F04\u002F08",{"id":494,"path":495,"title":496,"category":446,"tags":497,"thumbnail":500,"createdAt":501,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install.md","\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install","Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】",[498,499],"Tailwind CSS","Vite","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_tailwind-css-v4-install_tailwind-css.webp","2024\u002F03\u002F07",{"id":503,"path":504,"title":505,"category":446,"tags":506,"thumbnail":511,"createdAt":512,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Fphp-vite-warning.md","\u002Fblog\u002Fprogramming\u002Fphp-vite-warning","「vite-plugin-react can't detect preamble.」エラー対応【PHP、React】",[507,508,509,499,510],"PHP","CakePHP","Laravel","React","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_php-vite-warning_php-vite.webp","2024\u002F02\u002F13",[514,516,527,533,543,552],{"id":473,"path":474,"title":475,"category":446,"tags":515,"thumbnail":478,"createdAt":479,"updatedAt":460},[477,456],{"id":517,"path":518,"title":519,"category":446,"tags":520,"thumbnail":524,"createdAt":525,"updatedAt":526},"blog\u002Fblog\u002Fprogramming\u002Fnpm-develop.md","\u002Fblog\u002Fprogramming\u002Fnpm-develop","フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】",[521,522,523],"JavaScript","TypeScript","npm","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_npm-develop_thumbnail.webp","2024\u002F01\u002F14","2024\u002F01\u002F19",{"id":528,"path":529,"title":530,"category":446,"tags":531,"thumbnail":485,"createdAt":532,"updatedAt":501},"blog\u002Fblog\u002Fprogramming\u002Fvue-define-model.md","\u002Fblog\u002Fprogramming\u002Fvue-define-model","VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】",[456],"2024\u002F01\u002F07",{"id":534,"path":535,"title":536,"category":446,"tags":537,"thumbnail":540,"createdAt":541,"updatedAt":542},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-storybook.md","\u002Fblog\u002Fprogramming\u002Fnuxt-storybook","Nuxt3にStorybookを導入する方法",[538,539],"NuxtJS","Storybook","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-storybook_thumbnail.webp","2023\u002F11\u002F22","2024\u002F03\u002F18",{"id":544,"path":545,"title":546,"category":446,"tags":547,"thumbnail":550,"createdAt":551,"updatedAt":526},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-blog.md","\u002Fblog\u002Fprogramming\u002Fnuxt-blog","NuxtJSを使ってブログを作ってみた【Nuxt Content\u002FTailwindCSS\u002FdaisyUI】",[538,456,548,549],"TailwindCSS","ブログ","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-blog_thumbnail.webp","2023\u002F08\u002F25",{"id":553,"path":554,"title":555,"category":446,"tags":556,"thumbnail":557,"createdAt":558,"updatedAt":460},"blog\u002Fblog\u002Fprogramming\u002Fchat-scroll.md","\u002Fblog\u002Fprogramming\u002Fchat-scroll","メッセージ送受信時にスクロール位置を最下部に維持する処理を実装【TypeScript\u002FVue.js】",[521,522,456],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_chat-scroll_thumbnail.webp","2023\u002F08\u002F01",1793620323609]