COLUMN
コラム
2021年05月21日
React・Vueのフロントエンドで利用できるバックエンドサービスを整理する
カテゴリー:システム開発, テクノロジー
タグ:バックエンド, システム開発
ReactやVue.js、Angularなどフロントエンド開発フレームワークが注目を集めています。SPA(Single Page Application)なんて呼ばれていますね。Next.jsやNuxt.jsなど、必要となる機能を統合したライブラリも充実してきました。
ですが、やはりバックエンドも必要です。
そこで、フロントエンド開発で利用できるバックエンドクラウドサービスを、個人で利用できるものからエンタープライズ領域まで、ざっくり整理してみました。
関連するコラム
React・Vue.jsなどのSPAが業務システムに必要となる条件
業務のデジタル化・業務DXでローコード開発が効果的な3つの理由
ざっくり、業務システムを開発できるローコード開発プラットフォームを整理する
静的サイトホスティングサービス
一番シンプルな方法ですね。ビルドしたアプリケーションをデプロイして、ユーザーにアクセスしてもらう場所。WordPressのように動的にページを生成するのでなく、事前にページを生成しておくので、利用者にとってアクセススピードの改善が期待できます。個人で作ってみたサービスを気軽に置いておくには便利ですね。
QiitaやZennなどで、よく見かける静的サイトホスティングサービスに次のものがあります(筆者調べ)。どれも無料プランがあるので、規模が小さいうちや、短期間のテストには便利です。
- Github Pages
- Netlify
- Vercel
- Firebase Hosting
…
多くの人がGithubを使っているので、そのままGithub Pagesにデプロイできれば楽チンです。ただ、ディレクトリやブランチの指定などに工夫が必要です。その点、Netlifyが使いやすくて人気を集めているわけですが、最近ではNext.jsの開発元であるVercelも注目されています。
サーバーレス構成
静的サイトホスティングサービスだけで機能が不足する場合、ほかのサービスと組み合わせる必要が出てきます。でも、そのためにバックエンド用サーバーを構築して運用するのは面倒ですよね。そこで、図のように、フロントエンドから各種サービスのAPIを直接呼び出しています。フロントエンド開発者の人たちは、このようなシステム構成を「サーバーレス」と呼んでいます(たぶん)。
このようなシステム構成で利用できるサービスに、次のものがあります。
- 認証・認可サービス
- Auth0
- Amazon Cognito
- Firebase Authentication
- FaaS:関数単位で配備・実行
- AWS Lambda
- Azure Functions
- Google Cloud Functions
- データベースサービス
- AWS DynamoDB
- Firebase: Cloud Firestore
- Azure Cosmos DB
- その他
- Stripe 決済
- SendGrid メール配信
Webアプリケーションフレームワーク
一方で、RubyやPython・PHPなどに慣れているシステム開発者であれば、バックエンドの構築もお手の物ですよね。じつは、Ruby on RailsやDjango・LaravelといったWebアプリケーションフレームワークにも、バックエンドWeb APIが利用可能です。これを使うことで、フロントエンド開発フレームワークと連携できます。
この場合、Webアプリケーションフレームワークのデプロイ先に、AWS S3などのホスティングサービスを利用して、データベースサービスを組み合わせます。
とくにLaravelは、標準でVue.jsやReactをサポートしており、手軽にフロントエンドアプリケーションと連携できます。
- Ruby on Rails API mode
- Django REST framework
- Laravel
バックエンドトータルサービス
さらに、本格的なWebシステムの場合は、クラウドサービスが提供しているトータルサービスが利用できます。これは、Webアプリケーション開発に必要なサービスやツールをセットにしたものです。
このようなサービスでは、データベースや認証・許可サービスやデプロイツールが、柔軟に組み合わせできる状態で提供されています。
- AWS Amplify
- Azure App Service
- Firebase
…
どのサービスも、モバイルやコンシューマ向けサービスを開発するための機能が充実している感じです。
また、個別サービスやOSやミドルウェア・ランタイムによっては、パッチ適用やバージョンアップが随時おこなわれる場合があります。システム開発者はそれに追従できるようにアプリケーションの改修などを実施していく必要がありそうです。これは、Webアプリケーションフレームワークを利用する場合にも当てはまります。
エンタープライズ向けバックエンドクラウドサービス
でも、頻繁にアプリケーションの改修が必要になったらちょっと困ります。そういうのは、どこかのレイヤーで吸収してくれるとアプリケーションを開発・運営する側は助かりますよね。
また、同じようなアプリケーションを作るのに、毎回バックエンドを構築するのも面倒です。
そこでお勧めしたいのが、エンタープライズ向けバックエンドクラウドサービスである「Hexabase」です。
Hexabaseは、Kubernetes上の独自のマイクロサービス基盤で稼働しており、認証やデータベース・アクセス制御・ワークフローなど、業務アプリケーションで必要になる機能を備えています。スケラービリティの高いNo-SQLデータベースを持ち、何よりSPA向けバックエンドWeb APIを提供しています。
…
これなら、毎回システムを構築したり、APIをテストする手間をぐっとおさえて、フロントエンドとバックエンドのアプリケーション開発に注力できます。
というわけで、フロントエンド開発で利用できるバックエンドクラウドサービスを、ざっくり整理してみました。ぜひ、Hexabaseを活用してください。
- カテゴリー
- タグ
- システム運用 (16)
- TypeScript (1)
- WebAssembly (2)
- ウォーターフォール開発 (2)
- 業務システム (28)
- CSS (2)
- GraphQL (1)
- プログラミング (31)
- スタートアップ (11)
- Nexaweb (1)
- BaaS (10)
- データベース (5)
- SPA (2)
- 基本用語 (26)
- Case study (5)
- Keyword (10)
- FaaS (1)
- システム開発 (69)
- スクラム (1)
- フロントエンド (38)
- AI (26)
- アジャイル開発 (18)
- Supabase (1)
- イノベーション (5)
- Database (2)
- 月額制 (1)
- PaaS (3)
- ACF (1)
- BookReview (3)
- サービス開発 (5)
- React (3)
- Firebase (1)
- クラウドサービス (12)
- low-code (2)
- バックエンド (8)
- ナレッジマネジメント (1)
- ChatGPT (1)
- Vue.js (2)
- Tailwind CSS (1)
- DBaas (2)
- プロジェクト管理 (13)
- セミナー (2)
- Web (21)
- 失敗事例 (2)
- Hexabase_health (1)
- 生成AI (7)
- 受託開発 (1)
- Kubernetes (3)
- WebComponents (1)
- 通知 (1)
- API (6)
- Next.js (1)
- フレームワーク (3)
- ローコード開発 (4)
- ノーコード開発 (1)
- JavaScript (2)
- Hexabase (12)
- LLM (3)
- 画像生成 (1)
- DX (34)