NestJsを利用したWebAPIの作成

こんにちは

今回はNestJsを利用して簡単なWebAPIを作成したのでその方法をまとめておきます。

まずはnpmを利用して、nestjs/cliをグローバルインストールします。

$ npm i -g @nestjs/cli

このようにコマンドプロンプトに打つとnestコマンドが使用できるようになります。

次にnestコマンドでプロジェクトを作成したいディレクトリにcdをして、

$ nest new sample-app

と打つと、sample-appという名前でプロジェクトが作成されます。

NestJsではModule,Controller,Serviceの3つの要素で成り立っています。

Moduleは他のモジュールのインポートやControllerの設定、Serviceの設定などができます。

たとえばhellow.module.tsをnestコマンドで作成します。

$ nest g module hellow

このコマンドをプロジェクト直下で入力するとhellowというフォルダの中にhellow.module.tsというファイルが作成されます。

// hellow.module.ts
import { Module } from '@nestjs/common';
import { HellowController } from './hellow.controller';
import { HellowService } from './hellow.service';

@Module({
  controllers: [HellowController],
  providers: [HellowService]
})
export class HellowModule {}

このようにmoduleを作成します。

具体的にControllerはルーティングをします。このURLが来たときは、このレスポンスをするみたいなことができます。Serviceはコントローラー部分に処理を書くとコードが分厚くなるのでそれを防ぐために処理の部分を切り離す役割を持ちます。

次にServiceを作成していきます。先ほどと同様にNestコマンドを実行して

$ nest g service hellow

hellowフォルダに自動的にhellow.service.tsが作成されます。

// hellow.module.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class HellowService {
  async hellow() {
    return 'hellow';
  }
}

ここでは簡単にするためにhellowメソッドを呼び出したら文字列としてhellowを呼び出すだけのメソッドを書きました。これをControllerで呼び出していきます。

次にControllerを作成しましょう。Nestコマンドで

$ nest g controller hellow

これでhellow.controller.tsが作成されルーティングをすることができます。NestJsはAngularに構成をにせているためデコレーターを利用してHTTPリクエストを作成することになります。たとえばGetリクエストを受け取ったらレスポンスを返すメソッドをControllerに作成します。

// hellow.module.ts
import { Controller, Get } from '@nestjs/common';
import { HellowService } from './hellow.service';

@Controller('hellow')
export class HellowController {
  constructor(private readonly hellowService: HellowService) {}
  @Get()
  hellow() {
    return this.hellowService.hellow();
  }
}

これで特定のURLを受け取ったときにHellowService内のhellowメソッドを呼び出すことができます。NestJsはサーバーを立ち上げた際デフォルトでhttp://localhost:3000のURLでリクエストを受け取れます。そして今回は@Controller(‘hellow’)と記述したことでhttp://localhost:3000/hellowというルーティングが設定できましたので、このURLをサーバーを立ち上げた状態でブラウザに入力すると、hellowという文字列を返すWebAPIが作成されたことになります。サーバーの起動はコマンドで

$ npm run start

このようにプロジェクト直下で入力すれば、ローカル内でサーバーを立ち上げることができます。

試しにhttp://localhost:3000/hellowというURLをGoogleChromeに入力してみましょう。

hellowという文字列が出たら成功です。

このようにURLをたたくとそれに対応する文字列やJSONオブジェクトが返ってくるなど、アプリケーション開発には欠かせないものになっています。

このほかにもデータベースと連携するためにMongooseというライブラリを利用したり、暗号化するためのライブラリであるbcrypt、APIに認証をかけるために使用するミドルウェアがNestJsには初期搭載されていたりと、何かと便利なものですので機会があればほかの機能も紹介しようと思います。

補足説明

ローカルで開発しているときにAPIをたたきたい時があると思います。

しかしURLを入力してアプリケーション側からリクエストを送ってもCROSエラーが出てしまいます。

そんな時はmain.tsが作ったプロジェクト直下にあるので、そこのファイルを

// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: '*',
    allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept',
  });
  await app.listen(3000);
}
bootstrap();

このように書き直しましょう。

そうすることでCROSエラーを回避することができます。