Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
167
Help us understand the problem. What is going on with this article?
@y_catch

ざっくり、フロントエンド開発のためのバックエンドサービスを整理する

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

こうしたフロントエンド開発について調べていると、ググって最初のほうで見つかったチュートリアルや実現例に引っ張られて、他の実現方法に目がいかないことが多々あります(私の場合)。

とくにバックエンドの構成です。

そこで、いろいろ調べる中で見つかったフロントエンド開発で利用できそうなバックエンドを整理しています。個人で利用できるものからエンタープライズ領域まで、ざっくり5つのカテゴリに整理してみました。ただし、全部を試している訳でありませんし、複数のカテゴリで登場するサービスなんかもありますので、ご注意ください。

1.静的サイトホスティングサービス

一番シンプルな方法ですね。ビルドしたアプリケーションをデプロイして、ユーザーにアクセスしてもらう場所。WordPressのように動的にページを生成するのでなく、事前にページを生成しておくので、利用者にとってアクセススピードの改善が期待できます。個人で作ってみたサービスを気軽に置いておくには便利ですね。

静的サイトホスティングサービス

静的サイトホスティングサービスで、QiitaやZennなどでよく見かけるものに、次のサービスがあります(筆者調べ)。どれも無料プランがあるので、規模が小さいうちや、短期間のテストには便利です。

多くの人がGithubを使っているので、そのままGithub Pagesにデプロイできれば楽チンでしょう。ただ、ディレクトリやブランチの指定などに工夫が必要です1

その点、Netlifyが使いやすくて人気を集めているわけですが、最近ではNext.jsの開発元であるVercelも注目されています。

2.サーバーレス構成

静的サイトホスティングサービスだけで機能が不足する場合、ほかのサービスと組み合わせる必要が出てきます。でも、そのためにバックエンド用サーバーを構築して運用するのは面倒ですよね。そこで、図のように、フロントエンドから各種サービスのAPIを直接呼び出しています。フロントエンド開発者の人たちは、このようなシステム構成を「サーバーレス」と呼んでいるような気がします2

サーバーレス構成

このようなシステム構成で利用できるサービスに、次のものがあります。

なお、最近では、前述の静的サイトホスティングサービスの機能が充実してきて、サーバーレス構成との境界があいまいになってきているような感じです。たとえば、静的サイトホスティングサービスでも、Github Pages以外は、FaaS的な機能を持っていますし、SSR(サーバーサイドレンダリング)にも対応してきています。

3.WebアプリケーションフレームワークのAPI利用

一方で、RubyやPython・PHPなどに慣れているシステム開発者であれば、バックエンドの構築もお手の物ですよね。じつは、Ruby on RailsやDjango・LaravelといったWebアプリケーションフレームワークでも、バックエンドWeb APIが利用可能です。これを使うことで、フロントエンド開発フレームワークと連携できます。

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

とくにLaravelは、標準でVue.jsやReactをサポートしており、手軽にフロントエンドアプリケーションと連携できます。

この場合、Webアプリケーションフレームワークをホスティングには、クラウドサービスのホスティングサービス/PaaSを利用します。たとえば、Heroku・Google App Engine・AWS App Runner・Azure App Serviceといったサービスが利用できます。これらのサービスでは、コンテナ上にバックエンドアプリケーションを構築することで、柔軟な運用を可能にします。

4.バックエンドトータルサービス

さらに、本格的なWebシステムの場合は、クラウドサービスが提供しているトータルサービスが利用できます。これは、Webアプリケーション開発に必要なサービスやツールをセットにしたものです。

バックエンドトータルサービス

このようなサービスでは、データベースや認証・許可サービスやデプロイツールが、柔軟に組み合わせできる状態で提供されています。

AWS Amplifyは、じつはオープンソースソフトウェアになっていますが、自力でホスティングするのは大変そうなので、やっぱりAWSを使ってしまうと思います。

Azure App Serviceは、AzureのPaaSとして以前から提供されています。

Firebaseは、このようなトータルサービスの皮切りとなったサービスです。静的サイトホスティングサービスから、認証やデータベースなど、必要となる機能が充実しているので、機能に合わせて使っていくことができます。

AmplifyとFirebaseは、モバイルやコンシューマ向けサービスを開発するための機能が充実している感じです。

なお、個別サービスやOSやミドルウェア・ランタイムによっては、パッチ適用やバージョンアップが随時おこなわれる場合があります。システム開発者はそれに追従できるようにアプリケーションの改修などを実施していく必要がありそうです。これは、Webアプリケーションフレームワークを利用する場合にも当てはまります。

5.エンタープライズ向けバックエンドクラウドサービス

でも、頻繁にアプリケーションの改修が必要になったらちょっと困ります。そういうのは、どこかのレイヤーで吸収してくれるとアプリケーションを開発・運営する側は助かりますよね。

また、同じようなアプリケーションを作るのに、毎回バックエンドを構築するのも面倒です。

そこでお勧めしたいのが、エンタープライズ向けバックエンドクラウドサービスである「Hexabase」です(宣伝)。

エンタープライズ向けバックエンドクラウドサービス

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

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

次の記事で、Hexabase 代表の岩崎がHexabaseの開発の経緯を紹介しているので、興味があればぜひ読んでみてください。

おまけ. ヘッドレスCMS

リクエストがあったので、もうひとつカテゴリを追加しました。

Headless CMSは、CMS(Content Manegement System)のフロントエンド部分を分離して、バックエンドに特化したCMSです。Webサイト以外でもCMSを利用できるよう、APIベースでコンテンツを配信します。このとき、ReactやVue.jsなどでフロントエンドを開発して、Webサービスやアプリケーションに記事を埋め込みできます。また、モバイルアプリやゲームなど、用途に合わせてコンテンツを表示できます。

ヘッドレスCMS

オープンソースソフトウェアから日本製のものまで、けっこういろいろありますね。多くのWebサイトで使われているWordPressも、APIモードで利用できます。


というわけで、フロントエンド開発で利用できるバックエンドクラウドサービスを、ざっくり整理してみました。ぜひ、自分の目的にあったバックエンドクラウドサービスを選ぶ、参考にしてください。

関連ページ


  1. Vue.jsのいろいろをGithub Pagesへデプロイする方法を、Zennに書きました。 https://zenn.dev/catch 

  2. もちろん本来のサーバレスコンピューティングとは意味が違っています。 

167
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
y_catch
hexabase
企業システム向けバックエンドクラウドサービスHexabaseを開発・提供しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
167
Help us understand the problem. What is going on with this article?