質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

1回答

1303閲覧

静的ページと動的ページのインフラ運用について

frontmastrr

総合スコア0

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

2クリップ

投稿2021/12/18 07:29

編集2021/12/18 07:46

インフラについて詳しくなく質問させていただきたいです。

バックエンドにlaravelやrailsでrest api、
フロントエンドでNuxtjsやNextjs、
インフラにaws(vercelなども考えてます)を使う場合、

インフラの費用を抑えるために、静的ページと動的ページに分けて運用することはできますか?

Nuxtを使う場合はSSR(サーバーサイドレンダリング)、Nextを使う場合はページごとにSPAやSSR、SSGなど分けて開発したいと考えています。

インフラに詳しくなく参考になる情報や知見をお聞きしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/18 08:49 編集

費用を抑えたいのに「分けて」という要件の理由が分かりません。
frontmastrr

2021/12/18 09:41 編集

MPAのサイトで静的ページと動的ページで分けデプロイ?することで運用コストを抑えてるという話をお聞きし、BFFで作られたサイトもそういった方法があるのか気になりお聞きしました。 技術の知見は深く持ち合わせていない為、検討違いな質問だったらすみません。
m.ts10806

2021/12/18 09:52

>話をお聞きし その話を聞いた人(場所?)で直接話を聞かれたほうが良いと思います。 また、フレームワークや言語のタグをつけてしまうと、インフラ側の意見は集まりにくいと思いますので、タグも変更された方が良いです。 ただ、あまりインフラ系の質問はタグ自体が少なく、その分ユーザーも多くはないので、アプリケーションによった質問にするか、別の場所を探すかしたほうが良いとは思います。 「デプロイ」にフォーカスするならまだアドバイスは得やすいかもしれません。
退会済みユーザー

退会済みユーザー

2021/12/18 10:22

初心者レベルでそんなことを考えても意味がなく無駄。前提が全く違うネットの情報に騙されすぎ。 分けたとして何の費用が安くなる?何も安くならない。
yu_1985

2021/12/19 07:59

そういった分け方をするのは必ずしも費用を抑えるためではないです。結果的にコストが下がることはあるかもしれませんけど。 まず、それぞれの実現方法とその目的やメリットデメリットについてご自分で調べてみて、可能であれば実際に作ってみてください。 この質問ではさすがに内容が曖昧すぎますし、丸投げに等しいです。
guest

回答1

0

よくあるのは CloudFront や S3 などを使う方法です。

下記に構成パターンが載ってます。
https://dev.classmethod.jp/articles/static-contents-delivery-patterns/

ちなみにオンプレの事例ですが、そこそこの規模の EC サイトで画像・js を CDN 経由にしたところ、負荷が減りサーバ台数を削減でき、NW 帯域も削減できて月数十万のコスト削減になりました。一方 CDN 費用は月1万円台でした。

Web サーバ側の構成は一切変えず、CDN → Web サーバの設定をし、画像の <img src="...."> を CDN 経由にしただけですので、上記には載っていないパターンです。なお効果があったのはサイズの大きい商品画像がたくさんあったためです。そうでないなら効果は薄いでしょう。

また、キャッシュに載ってしまい画像がいつまでも更新されないということにならないよう、画像更新時はファイル名を変えるとか、xxxx.jpg?20211218233900 などと更新時の時刻を付けるなどの対応が必要になるかもしれません。

なお SPA/MPA は関係ないと思います (たぶん)。

投稿2021/12/18 14:49

68user

総合スコア2022

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問