NestJS a progressive web framework

Transcript

1. NestJS A progressive web framework #kng9 @jiko_21 (a.k.a Daiki Kojima)

2. Grad Student @ Kyoto univ Frontend / Serverside Engineer Android

   DeveloperͩͬͨΓ΋͢Δ Love: Vue.js, TypeScript, Kotlin, Golang… @jiko_21 (a.k.a Daiki Kojima) @jiko_21 @jiko21

3. Agenda • NestJSͬͯԿ? • ͔ΜͨΜͳ֓ཁ • ҰൠతͳApplicationΛॻ͘ͷʹඞཁͳ஌ࣝ • NestJSͷಛ௃ •

   ·ͱΊ

4. 2018೥ Warsaw @ PorlandͰ
 ͜Μͳηογϣϯ͕͋ͬͨ

5. JavaScript Conference’18 @Warsaw https://youtu.be/f0qzBkAQ3mk

6. NestJSͱ͸ • Progressive Node.js framework • TypeScriptͰهड़Մೳ • ༷ʑͳπʔϧ͕ఏڙ͞Ε͍ͯΔ

7. ࣮ࡍʹத਎ΛݟͯΈΔ

8. NestJSͷجૅ • module • ίʔυΛ·ͱΊͯػೳΛ࿦ཧతͳ୯Ґʹ෼ׂ
 ˠ ࠶ར༻Մೳʹ! • શͯͷNestͷΞϓϦέʔγϣϯʹ͸root module͕ଘࡏ͠


   ΞϓϦέʔγϣϯΛىಈͤ͞Δ
 (Angularͱಉ༷)

9. NestJSͷجૅ 3PPU
   NPEVMF 4VC
   NPEVMF
 جຊతʹ͍ΖΜͳ΋ͷΛ͜Εʹ
 ٧ΊࠐΊ͍ͯ͘
   

10. moduleΛߏ੒͢Δ΋ͷ

11. moduleΛߏ੒͢Δ΋ͷ $POUSPMMFST

12. moduleΛߏ੒͢Δ΋ͷ 1SPWJEFST $POUSPMMFST

13. moduleΛߏ੒͢Δ΋ͷ 1SPWJEFST $POUSPMMFST *NQPSUT

14. moduleΛߏ੒͢Δ΋ͷ 1SPWJEFST $POUSPMMFST *NQPSUT &YQPSUT

15. moduleΛߏ੒͢Δ΋ͷ @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [],

    }) export class TodosModule {}

16. moduleΛߏ੒͢Δ΋ͷ @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [],

    }) export class TodosModule {} !.PEVMF಺ʹ
    ͦΕͧΕΛهೖ͍ͯ͘͠

17. Controllers

18. Controllers • ϧʔςΟϯάΛ୲͏ • pathͱmethod͕
 ରԠ @Controller('todos') export class TodosController

    { constructor(private readonly todosService: TodosService) {} @Get() getTodos(): Promise<ITodo[]> { return this.todosService.findAll(); } @Get(':id') getTodo(@Param('id', new ParseIntPipe()) id: number): Promise<ITodo> { return this.todosService.findById(id); } @Post('') createTodo(@Body() todoDao: TodoDao): Promise<ITodo> { return this.todosService.create(todoDao) } … }

19. Controllers • ϧʔςΟϯάΛ୲͏ • pathͱmethod͕
 ରԠ @Controller('todos') export class TodosController

    { constructor(private readonly todosService: TodosService) {} @Get() getTodos(): Promise<ITodo[]> { return this.todosService.findAll(); } @Get(':id') getTodo(@Param('id', new ParseIntPipe()) id: number): Promise<ITodo> { return this.todosService.findById(id); } @Post('') createTodo(@Body() todoDao: TodoDao): Promise<ITodo> { return this.todosService.create(todoDao) } … } ! Ξϊςʔγϣϯ Ͱ
 NFUIPEͱQBSBNɺQBUIΛઃఆ
    

20. • ϧʔςΟϯάΛ୲͏ • pathͱmethod͕
 ରԠ Controllers @Controller('todos') export class TodosController

    { constructor(private readonly todosService: TodosService) {} @Get() getTodos(): Promise<ITodo[]> { return this.todosService.findAll(); } @Get(':id') getTodo(@Param('id', new ParseIntPipe()) id: number): Promise<ITodo> { return this.todosService.findById(id); } @Post('') createTodo(@Body() todoDao: TodoDao): Promise<ITodo> { return this.todosService.create(todoDao) } … }

21. • ϧʔςΟϯάΛ୲͏ • pathͱmethod͕
 ରԠ Controllers @Controller('todos') export class TodosController

    { constructor(private readonly todosService: TodosService) {} @Get() getTodos(): Promise<ITodo[]> { return this.todosService.findAll(); } @Get(':id') getTodo(@Param('id', new ParseIntPipe()) id: number): Promise<ITodo> { return this.todosService.findById(id); } @Post('') createTodo(@Body() todoDao: TodoDao): Promise<ITodo> { return this.todosService.create(todoDao) } … } DPOTUSVDUPSʹґଘ͢Δ0CKFDUΛ
    ॻ͍͓ͯ͘ͱ.PEVMF͕ґଘΛղܾ %*ɺޙड़ 


22. Providers • providers಺ͷίʔυ͸
 NestJSʹΑͬͯΠϯελϯεԽ
 ͞ΕͯModule಺Ͱڞ༗ (DI) @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers:

    [TodosService], controllers: [TodosController], exports: [], }) export class TodosModule {}

23. Providers @Injectable() export class TodosService { constructor(@InjectRepository(Todo) todoRepo: Repository<Todo>) {}

    } @Controller('todos') export class TodosController { constructor(private readonly todosService: TodosService) {} } @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [], }) export class TodosModule {}

24. Providers @Injectable() export class TodosService { constructor(@InjectRepository(Todo) todoRepo: Repository<Todo>) {}

    } @Controller('todos') export class TodosController { constructor(private readonly todosService: TodosService) {} } @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [], }) export class TodosModule {} *OKFDUBCMFΛ
 ࢦఆ

25. Providers @Injectable() export class TodosService { constructor(@InjectRepository(Todo) todoRepo: Repository<Todo>) {}

    } @Controller('todos') export class TodosController { constructor(private readonly todosService: TodosService) {} } @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [], }) export class TodosModule {} *OKFDUBCMFΛ
 ࢦఆ DPOUSPMMFSʹ
 ྲྀ͠ࠐΈ *OKFDU

26. Imports • ͜ͷModule಺Ͱproviderͱ͔͕ඞཁͱ͍ͯ͠ΔModuleΛ
 ͜͜Ͱॻ͍ͯ͋͛Δ • TypeORMΈ͍ͨͳthird party module • ࣗ෼Ͱॻ͍ͨΧελϜmodule

27. Imports @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [],

    }) export class TodosModule {} @Module({ imports: [ TodosModule ], controllers: [AppController], providers: [AppService], }) export class AppModule {}

28. Imports @Module({ imports: [TypeOrmModule.forFeature([Todo]),], providers: [TodosService], controllers: [TodosController], exports: [],

    }) export class TodosModule {} @Module({ imports: [ TodosModule ], controllers: [AppController], providers: [AppService], }) export class AppModule {} JNQPSU͍ͯ͘͜͠ͱͰ
 .PEVMF͕࢖͑Δ

29. ෼ׂ͞ΕͨModuleΛ࢖͓͏!

30. ͱ͸͍͑…

31. Service૚ͱ͔ͬͯɺ
 ผͷModuleͰݺͼͨ͘ͳΔΑͶ…

32. exports • providerͷαϒηοτ • ͜͜ʹॻ͔Ε͍ͯΔ΋ͷ͸ɺ͜ͷmoduleΛimport͍ͯ͠Δ
 ଞͷmodule͔Β௚઀ར༻͕Ͱ͖Δ!

33. JestͰςετ͕ॻ͚Δ

34. Jestͱ͸ • Facebook੡ͷJavaScript༻Testing Framework • ଞͷTesting Libraryͱҧ͍ɺAll in one •

    ϑϩϯτΤϯυͩͱ… • React, Vue.js౳ͰΑ͘࢖ΘΕΔ…

35. ॻ͖ํͷҰྫ describe('TodosService', () => { let service: TodosService; let repository:

    Repository<Todo>; beforeEach(async () => { ... }); afterEach(async () => { ... }); it('findAll success', async () => { expect(await service.findAll()).toEqual(TODOS_ARAY); }); });

36. ॻ͖ํͷҰྫ describe('TodosService', () => { let service: TodosService; let repository:

    Repository<Todo>; beforeEach(async () => { ... }); afterEach(async () => { ... }); it('findAll success', async () => { expect(await service.findAll()).toEqual(TODOS_ARAY); }); }); ֤ςετέʔε௚લʹ࣮ߦ
    

37. ॻ͖ํͷҰྫ describe('TodosService', () => { let service: TodosService; let repository:

    Repository<Todo>; beforeEach(async () => { ... }); afterEach(async () => { ... }); it('findAll success', async () => { expect(await service.findAll()).toEqual(TODOS_ARAY); }); }); ֤ςετέʔε௚લʹ࣮ߦ
    ֤ςετέʔε௚ޙʹ࣮ߦ
    

38. JestͰ͸Α͋͘Γ͕ͪͳ͜ͱ… • ୯ମςετͰɺ֎෦ϞδϡʔϧͷڍಈΛϞοΫ͍ͨ͠ • jest.spyOnͰϞοΫ it('getProducts', async () => {

    jest.spyOn(service, ‘findAll') .mockResolvedValue(PRODUCTS_ARRAY); expect(await controller.getProducts()) .toBe(PRODUCTS_ARRAY); }); @Get() getProducts(): Promise<IProducts[]> { return this.productsService.findAll(); } ςετର৅ ςετίʔυ

39. JestͰ͸Α͋͘Γ͕ͪͳ͜ͱ… • ୯ମςετͰɺ֎෦ϞδϡʔϧͷڍಈΛϞοΫ͍ͨ͠ • jest.spyOnͰϞοΫ it('getProducts', async () => {

    jest.spyOn(service, ‘findAll') .mockResolvedValue(PRODUCTS_ARRAY); expect(await controller.getProducts()) .toBe(PRODUCTS_ARRAY); }); @Get() getProducts(): Promise<IProducts[]> { return this.productsService.findAll(); } ςετର৅ ςετίʔυ ͍ͭ͜ͷڍಈΛNPDL͍ͨ͠
    

40. JestͰ͸Α͋͘Γ͕ͪͳ͜ͱ… • ୯ମςετͰɺ֎෦ϞδϡʔϧͷڍಈΛϞοΫ͍ͨ͠ • jest.spyOnͰϞοΫ it('getProducts', async () => {

    jest.spyOn(service, ‘findAll') .mockResolvedValue(PRODUCTS_ARRAY); expect(await controller.getProducts()) .toBe(PRODUCTS_ARRAY); }); @Get() getProducts(): Promise<IProducts[]> { return this.productsService.findAll(); } ςετର৅ ςετίʔυ ͍ͭ͜ͷڍಈΛNPDL͍ͨ͠
    ͍ͭ͜ͷڍಈΛNPDL͢Δ
    

41. NestJSͩͱ • moduleʹΑͬͯґଘղܾΛߦ͏ͷͰɺͦ͜ͰmockΛ
 ྲྀ͠ࠐΜͰ͠·͑͹OK describe('Todos Controller', () => { let

    controller: TodosController; let service: TodosService; beforeEach(async () => { const module: TestingModule = await Test.createTestingModule({ providers: [{ provide: TodosService, useValue: todoServiceMock, }], controllers: [TodosController], }).compile(); controller = module.get<TodosController>(TodosController); service = module.get<TodosService>(TodosService); }); }); export const todoServiceMock = { findAll: () => TODOS_ARAY, findById: (id: number) => TODOS_ARAY[0], create: (todoDao: TodoDao) => todoDao, }; mockؔ਺ ςετίʔυ

42. Ұ୴ɺجૅతͳͱ͜Ζ͸ݟͨ!

43. NestJSͰ։ൃ͢Δ
 ͏·Έ੒෼ͬͯԿ?

44. ओͳಛ௃ 1. TypeScriptͰͷهड़͕default 2. πʔϧ܈͕๛෋ 3. όοΫΤϯυ (http provider) Λબ୒Մೳ

45. TypeScriptͰͷهड़͕default • cliʹΑͬͯੜ੒͞Εͨίʔυ͸શͯTypeScriptͰॻ͔Ε͍ͯΔ • ଞͷFrameworkͩͱ(Express…) • ࣗલͰTypeScriptԽ͕ඞཁ • ͱ͸͍͑JavaScriptͰ΋ॻ͚Δ

46. πʔϧ܈͕๛෋ • ৭ʑͳ΋ͷ͕ఏڙ͞Ε͍ͯΔ • DI, test util, microservice support, WebSockets,

    RxJS • ʮNestJS͸ϓϥοτϑΥʔϜͰ͋Δʯɺͱ͍͏ࢥ૝͔Β
 ͜ͷΑ͏ʹͳ͍ͬͯΔ

47. όοΫΤϯυ (http provider) Λબ୒Մೳ • package.jsonͱpackage-lock.jsonΛݟͯΈΔ { "name": "todo-app", "dependencies":

    { "express": { "version": "4.17.1", "resolved": “...”, "integrity": “...“, "requires": { ... }, "dependencies": { ... } }, } } { "name": "todo-app", "version": "0.0.1", "scripts": {}, "dependencies": { "@nestjs/common": "^6.7.2", "@nestjs/core": "^6.7.2", "@nestjs/platform-express": "^6.7.2", ... }, "devDependencies": { "@nestjs/cli": "^6.9.0", "@nestjs/schematics": "^6.7.0", "@nestjs/testing": "^6.7.1", "@types/express": "^4.17.1", ... }, }

48. όοΫΤϯυ (http provider) Λબ୒Մೳ • package.jsonͱpackage-lock.jsonΛݟͯΈΔ { "name": "todo-app", "dependencies":

    { "express": { "version": "4.17.1", "resolved": “...”, "integrity": “...“, "requires": { ... }, "dependencies": { ... } }, } } { "name": "todo-app", "version": "0.0.1", "scripts": {}, "dependencies": { "@nestjs/common": "^6.7.2", "@nestjs/core": "^6.7.2", "@nestjs/platform-express": "^6.7.2", ... }, "devDependencies": { "@nestjs/cli": "^6.9.0", "@nestjs/schematics": "^6.7.0", "@nestjs/testing": "^6.7.1", "@types/express": "^4.17.1", ... }, }

49. όοΫΤϯυ (http provider) Λબ୒Մೳ • ࣮͸NestJSͷhttp provider͸ࣗલͷ΋ͷͰ͸ͳ͍ • σϑΥϧτ͸Express •

    ଞͷhttp provider΋ར༻͢Δ͜ͱ͕Մೳ • Fastifyͱ͔
 → expressͷ2ഒ΄ͲϕϯνϚʔΫͰྑ͍ੑೳ • ͜ΕʹΑΓ༷ʑͳthird-party plugin͕ར༻Մೳʹ

50. fastifyʹมߋ • ҎԼͷίϚϯυͰಋೖ
 • main.tsΛҎԼͷΑ͏ʹ͢Δ $ npm i @nestjs/platform-fastify import

    { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import { FastifyAdapter } from '@nestjs/platform-fastify'; async function bootstrap() { const app = await NestFactory.create(AppModule, new FastifyAdapter()); await app.listen(3000); } bootstrap();

51. ͡Ό͋ͳΜͰ

52. σϑΥϧτ͕expressͳͷ͔…

53. ৭ʑཧ༝͋Γ • express͕޿͘࢖ΘΕ͍ͯͯmiddleware͕ଟ͍ • Nested routerʹରԠ͍ͯ͠ͳ͍ͨΊɺSub-Domain routing
 ʹରԠ͍ͯ͠ͳ͍ • sub-domain

    routingΛ༗ޮʹ͢Δͱexpressʹ੾ΓସΘΔ

54. ·ͱΊ • NestJS͸module୯ҐͰͷϩδοΫ෼ׂΛجຊͱ͓ͯ͠Γɺ
 ࠶ར༻ੑͷߴ͍ίʔυ͕ॻ͚Δ • TypeScriptͷσϑΥϧταϙʔτɺDIͷඪ४ఏڙͳͲɺ
 αϙʔτ͕ڧ͍
 (TypeScript൛Spring Bootͱݴͬͯ΋աݴͰ͸ͳ͍)

55. Reference • Building a platform: NestJS from the ground up

    | Kamil Myśliwiec | jsPoland 2018
 https://youtu.be/f0qzBkAQ3mk • Document of NestJS: https://docs.nestjs.com/

56. ऴ ੍࡞ɾஶ࡞ ᴸᴸᴸᴸᴸ @jiko_21