【Day 13】BFF 環境構築 - NestJS GraphQL

はじめに

---

2023年アドベントカレンダー13日目です。

今回はBFFの開発を始めるために環境構築をしていきます

BFF

BFFとは

From ChatGPT
BFF（Backend For Frontend）は、ソフトウェア開発のアーキテクチャパターンの一つです。このパターンでは、フロントエンド（例えば、ウェブアプリケーションやモバイルアプリ）専用のバックエンドを提供します。これにより、フロントエンドのニーズに特化したAPIを実現し、フロントエンドの開発とメンテナンスが容易になります。

フロントエンドのために存在し、バックエンドとの仲介をするものと理解しています。

今回はBFFをGraphQLを利用して構築していきたいと思います。

GraphQLを採用した理由

主な採用した理由は２つです

1. クライアントがリクエストしたデータのみを返す
2. 少ないリクエストで複数のリソースにアクセスできる

1. クライアントがリクエストしたデータのみを返す

GraphQLはクライアントが要求したデータだけを取得できるように設計されていて、過剰なデータ取得を防止できます

2. 少ないリクエストで複数のリソースにアクセスできる

クエリライクで複数リクエストなしに情報を取得できます。
これによりRESTful APIにありがちな問題である「情報にアクセスするために必要なエンドポイント多くなる」問題を防ぐことができます。

参考) https://qiita.com/hirac/items/d4b470afa14e1741ab99

ではNestJS上にGraphQLのサーバーを作成していきます

NestJS

NestJSとは

NestJSは、Node.js上で動作するバックエンド開発のフレームワークです。

環境構築！

実は公式のリファレンスにGraphQL + TypeScriptの構築方法が乗っているので、それに則って進めていきます

まずはNestJS環境をinstallしていきます

npm i -g @nestjs/cli
nest new bff

? Which package manager would you ❤️  to use? npm
CREATE bff/.eslintrc.js
...

✔ Installation in progress... ☕

🚀  Successfully created project bff
👉  Get started with the following commands:

$ cd bff
$ npm run start
                                         
                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                                         
               🍷  Donate: https://opencollective.com/nest

次にNestJSでGraphQLサーバーを立てるために必要なものをそろえていきます

cd bff
npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql

これで準備は整いました

次回はテストで使うWireMockのセットアップをしていきます！