Firebaseでgraphqlサーバーを構築する(NestJS) / ionicを使用したhybridなアプリを開発する忘備録01

これから何回に分けて ionic というアプリケーションフレームワークを使用して、Web/iOS/Android アプリ全てを同時に開発するチュートリアルを作成していきたいと思います。

チュートリアルと言っていますが備忘録的な側面もあるので、何かおかしい点などがありましたら是非ご指摘ください。

第 1 回目は、バックエンド側で Firebase Functions を使用して Graphql サーバーを構築していきたいと思います。

作業工程動画

作業工程

1. Firebase プロジェクトを作成・ローカルディレクトリと接続する
2. Nestjs で Graphql サーバーを構築する
3. Graphql サーバーと Firebase Functions を接続
4. Code

1. Firebase プロジェクトを作成・ローカルディレクトリと接続する

Firebase コンソールから、任意のプロジェクトを作成します。 firebase のコマンドラインを global にインストールします。

npm install -g firebase-tools

インストールが確認出来たら、ターミナルから firebase にログインします。

firebase login

メールアドレスとパスワードを入力してログインします。

ログインが確認出来たら、ローカルのディレクトリを Firebase と接続します。

firebase init

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choice s. (Press to selec…

使用する Firebase のサービスをスペースキーで選択します。今回は Firestore Functions Hosting Storageを選択して Enter キーで進みます。

? Please select an option: (Use arrow keys)

Use an existing project を選択して最初にFirebase コンソールで作成したプロジェクトを選択します。

この後の設定は全て yes または、Enter キーで進みます。(細かい設定は必要があれば後で設定します)
※今回のチュートリアルは Typescript を使うので同じように進めたければ、Typescript を選択してください。

2. Nestjs で Graphql サーバーを構築する

Nestjs のコマンドラインをドキュメントサイトを参考にインストールします。

npm i -g @nestjs/cli

一度、現状の /functions ディレクトリを削除して Nestjs のコマンドラインでプロジェクトを作成します。

rm -rf functions
nest new functions

Nestjs で Graphql 使用するために必要なパッケージをインストールします。

cd functions
npm i --save @nestjs/graphql graphql-tools graphql apollo-server-express type-graphql

Graphql を使用するためにメインモジュールを初期化します.

Module 作成します　Code

nest generate module users

Model を作成します　Code

nest generate class users/user

Service を作成します　Code

nest generate service users

resolver を作成します　Code

nest generate resolver users

3. Graphql サーバーと Firebase Functions を接続

接続に必要なパッケージをインストールします。

npm i --save firebase-admin firebase-functions

エントリーポイントを変更する必要があるので、いくつかファイル作成・修正します。

functions/src/server.ts

functions/src/main.ts

functions/src/index.ts

Firebase のエントリーポイントを Package.json に作成します。

コードをコンパイルして動作を確認します。

npm run build

firebase serve --only functions

localhost で Play graoud で表示・動作確認します。

あとは、デプロイするだけです。

firebase deploy --only functions

4. Code

今回作成したコードはこちらにありますのでご参考ください Github リポジトリ