[kiworkshop#22] Succeeded to run but failed to render

package.json

@@ -17,16 +17,16 @@
     "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.24",
     "@material-ui/styles": "4.3.0",
-    "@types/express": "^4.17.0",
-    "@types/marked": "^0.6.5",
     "assert-plus": "^1.0.0",
     "axios": "^0.19.0",
     "clsx": "1.0.4",
     "express": "^4.17.1",
     "immer": "^3.2.0",
     "inversify": "^5.0.1",
+    "inversify-express-utils": "^6.3.2",
     "marked": "^0.7.0",
     "material-table": "^1.49.0",
+    "moment-timezone": "^0.5.27",
     "next": "9.0.3",
     "next-i18next": "^0.54.0",
     "next-redux-saga": "^4.0.2",
@@ -43,7 +43,8 @@
     "remove": "^0.1.5",
     "tsconfig-paths": "^3.8.0",
     "typesafe-actions": "^4.4.2",
-    "uuid": "^3.3.3"
+    "uuid": "^3.3.3",
+    "winston": "^3.2.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
@@ -52,7 +53,10 @@
     "@types/axios": "^0.14.0",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/express": "^4.17.0",
     "@types/jest": "^24.0.16",
+    "@types/marked": "^0.6.5",
+    "@types/moment-timezone": "^0.5.12",
     "@types/next-redux-saga": "^3.0.1",
     "@types/node": "^12.6.9",
     "@types/react": "16.8.24",
@@ -61,6 +65,7 @@
     "@types/redux-form": "^8.1.4",
     "@types/redux-logger": "^3.0.7",
     "@types/uuid": "^3.4.5",
+    "@types/winston": "^2.4.4",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "jest": "^24.8.0",

server/index.ts

@@ -1,25 +1 @@
-import express from 'express';
-import next from 'next';
-import nextI18NextMiddleware from 'next-i18next/middleware';
-import inversifyServices from '../src/inversifyServices';
-import registerControllers from './registerControllers';
-
-const nextI18next = inversifyServices.common.i18NService;
-
-export const PORT = process.env.PORT || 3000;
-export const APP = next({ dev: process.env.NODE_ENV !== 'production' });
-export const SERVER = express();
-export const handle = APP.getRequestHandler();
-
-APP.prepare().then(() => {
-  SERVER.use(nextI18NextMiddleware(nextI18next));
-
-  registerControllers(APP, SERVER);
-
-  SERVER.get('*', (req, res) => handle(req, res));
-
-  SERVER.listen(PORT);
-
-  // tslint:disable-next-line: no-console
-  console.log(`> Ready on http://localhost:${PORT}`);
-})
+import "./main"

server/main/common/error/ApiError.ts

@@ -0,0 +1,15 @@
+import moment from 'moment-timezone';
+import { logger } from "../utils";
+
+export class ApiError {
+  public timestamp: string;
+
+  public constructor(
+    public status: number,
+    public error: string,
+    public message: string,
+  ) {
+    this.timestamp = moment().tz("Asia/Seoul").toISOString(true);
+    logger.log('error', JSON.stringify(this));
+  }
+}

server/main/common/error/DefaultErrorHandler.ts

@@ -0,0 +1,17 @@
+import { AssertionError } from "assert-plus";
+import { ErrorRequestHandler } from "express-serve-static-core";
+import { logger } from "../utils";
+import { ApiError } from "./ApiError";
+
+export const defaultErrorHandler: ErrorRequestHandler = (err: Error, _, res, next) => {
+  if (res.headersSent) {
+    return next(err)
+  }
+
+  if (err instanceof AssertionError) {
+    res.status(400).send(new ApiError(400, "Bad Request", err.message));
+  }
+
+  res.status(500).send(err.stack);
+  logger.log('error', JSON.stringify(err.stack));
+}

server/main/common/inversify/createApp.ts

@@ -0,0 +1,30 @@
+import * as bodyParser from 'body-parser';
+import { ErrorRequestHandler } from 'express-serve-static-core';
+import { Container } from 'inversify';
+import { InversifyExpressServer } from 'inversify-express-utils';
+import nextI18NextMiddleware from 'next-i18next/middleware';
+import Optional from 'optional-js';
+import I18NService from 'src/common/service/I18NService';
+import "../../mother/notice/api/NoticeController";
+import { defaultErrorHandler } from "../error/DefaultErrorHandler";
+import { NextApp } from '../nextjs/NextApp';
+
+export const createApp = (container: Container, errorHandlers?: ErrorRequestHandler[]) => new InversifyExpressServer(container)
+  .setConfig((theApp) => {
+    theApp.use(bodyParser.urlencoded({ extended: true }));
+    theApp.use(bodyParser.json());
+
+    theApp.use(nextI18NextMiddleware(I18NService));
+
+  })
+  .setErrorConfig((theApp) => {
+    Optional.ofNullable(errorHandlers)
+      .map(handlers => handlers.forEach(h => theApp.use(h)));
+
+    const handle = new NextApp().get().getRequestHandler();
+
+    theApp.get("*", (req, res) => handle(req, res));
+
+    theApp.use(defaultErrorHandler);
+  })
+  .build();

server/main/common/inversify/createContainer.ts

@@ -0,0 +1,8 @@
+import { Container } from 'inversify';
+import { NextApp } from '../nextjs/NextApp';
+
+export const createContainer = () => {
+  const container = new Container();
+  container.bind<NextApp>('NextApp').to(NextApp);
+  return container;
+}

server/main/common/nextjs/NextApp.ts

@@ -0,0 +1,9 @@
+import { injectable } from 'inversify';
+import next from 'next';
+
+const APP = next({ dev: process.env.NODE_ENV !== 'production' });
+
+@injectable()
+export class NextApp {
+  public get() { return APP; }
+}

server/main/common/utils/__mocks__/logger.ts

@@ -0,0 +1,3 @@
+export const logger = {
+  log: jest.fn()
+}

server/main/common/utils/index.ts

@@ -0,0 +1 @@
+export * from './logger'

server/main/common/utils/logger.ts

@@ -0,0 +1,7 @@
+import winston from 'winston'
+
+export const logger = winston.createLogger({
+  transports: [
+    new winston.transports.Console()
+  ]
+});

server/main/errorHandlers.ts

@@ -0,0 +1 @@
+export const errorHandlers = [];

server/main/index.ts

@@ -0,0 +1,12 @@
+import "reflect-metadata";
+
+import { createApp } from "./common/inversify/createApp";
+import { createContainer } from "./common/inversify/createContainer";
+import { logger } from "./common/utils";
+import { errorHandlers } from "./errorHandlers";
+import "./mother/notice/api/NoticeController";
+
+const PORT = 3000;
+
+createApp(createContainer(), errorHandlers).listen(PORT);
+logger.log("info", `server is running on port:${PORT}`);

server/main/mother/api/MotherController.ts

@@ -0,0 +1,20 @@
+import { Request, Response } from "express";
+import { inject } from "inversify";
+import { controller, httpGet, interfaces, request, response } from "inversify-express-utils";
+import { NextApp } from "server/main/common/nextjs/NextApp";
+
+const PATH = "/mother"
+
+@controller(PATH)
+export class MotherController implements interfaces.Controller {
+
+  constructor(@inject("NextApp") private nextApp: NextApp) { }
+
+  @httpGet("/")
+  public get(
+    @request() req: Request,
+    @response() res: Response,
+  ) {
+    this.nextApp.get().render(req, res, PATH)
+  }
+}

server/main/mother/notice/api/NoticeController.ts

@@ -0,0 +1,46 @@
+import { Request, Response } from "express";
+import { inject } from "inversify";
+import { controller, httpGet, interfaces, request, requestParam, response } from "inversify-express-utils";
+import { NextApp } from "server/main/common/nextjs/NextApp";
+
+const PATH = "/mother/notice";
+
+@controller(PATH)
+export class ImageController implements interfaces.Controller {
+
+  constructor(@inject("NextApp") private nextApp: NextApp) { }
+
+  @httpGet("/add")
+  public add(
+    @request() req: Request,
+    @response() res: Response,
+  ) {
+    this.nextApp.get().render(req, res, `${PATH}/add`);
+  }
+
+  @httpGet("/edit/:id")
+  public edit(
+    @request() req: Request,
+    @response() res: Response,
+    @requestParam("id") id: string,
+  ) {
+    this.nextApp.get().render(req, res, `${PATH}/form`, { id });
+  }
+
+  @httpGet("/:id")
+  public detail(
+    @request() req: Request,
+    @response() res: Response,
+    @requestParam("id") id: string,
+  ) {
+    this.nextApp.get().render(req, res, `${PATH}/detail`, { id });
+  }
+
+  @httpGet("/")
+  public index(
+    @request() req: Request,
+    @response() res: Response,
+  ) {
+    this.nextApp.get().render(req, res, PATH);
+  }
+}