2021年05月21日

React・Vueのフロントエンドで利用できるバックエンドサービスを整理する

カテゴリー:システム開発, テクノロジー

Knowledge_seci_model

ReactやVue.js、Angularなどフロントエンド開発フレームワークが注目を集めています。SPA(Single Page Application)なんて呼ばれていますね。Next.jsやNuxt.jsなど、必要となる機能を統合したライブラリも充実してきました。

ですが、やはりバックエンドも必要です。

そこで、フロントエンド開発で利用できるバックエンドクラウドサービスを、個人で利用できるものからエンタープライズ領域まで、ざっくり整理してみました。

関連するコラム

【2022年版】 フロントエンドフレームワーク×9選

バックエンドのローコード開発は何が違うのか

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などのホスティングサービスを利用して、データベースサービスを組み合わせます。

Webアプリケーションフレームワーク

とくに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

Hexabaseは、Kubernetes上の独自のマイクロサービス基盤で稼働しており、認証やデータベース・アクセス制御・ワークフローなど、業務アプリケーションで必要になる機能を備えています。スケラービリティの高いNo-SQLデータベースを持ち、何よりSPA向けバックエンドWeb APIを提供しています。

これなら、毎回システムを構築したり、APIをテストする手間をぐっとおさえて、フロントエンドとバックエンドのアプリケーション開発に注力できます。

というわけで、フロントエンド開発で利用できるバックエンドクラウドサービスを、ざっくり整理してみました。ぜひ、Hexabaseを活用してください。

いますぐ無料で使ってみる

役に立ったら、記事をシェアしてください