2020/06/06

Express Typescript Boilerplate入門

javascripttypescriptexpress

概要

Express + Typescriptで構築されているAPIサーバーのソースコードをメンテナンスする必要性が生じてきたので
概要を掴むために(w3tecch/express-typescript-boilerplate: A delightful way to building a RESTful API with NodeJs & TypeScript by @w3tecch)のgithubリポジトリを使ってAPIサーバーのLocal環境での構築と理解を行いました。

実施事項

プロジェクトの初期設定

まずはリポジトリをcloneします。

git clone https://github.com/w3tecch/express-typescript-boilerplate.git
  • nodeおよびyarnのversionを固定します。
    • (v13.12などを使うとエラーでうまくsetupできないので注意が必要です。)
% nodenv local 10.19.0
% node -v
v10.19.0
% yarn -v
1.22.4

本家のReadmeの指示に従って作業します。

  • .envを作成します。
cp .env.example .env
  • docker-composeを使ってpostgresql dbを起動します
    • 注意点として、postgres:12を使うとエラーでうまくいきません。(ここが詳しいです。)
version: "3"
services:
  db:
    image: postgres:11.8-alpine
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_USER=express
      - POSTGRES_PASSWORD=typescript
      - POSTGRES_DB=express_typescript
      - PGDATA=/var/lib/postgresql/data/pgdata
    volumes:
      - ./.docker-data/db:/var/lib/postgresql/data # .docker-data/はgitignoreに登録しておきます
  • .envの内容を修正します。(docker-composeの内容に合わせます。)
TYPEORM_CONNECTION=postgres
TYPEORM_HOST=localhost
TYPEORM_PORT=5432
TYPEORM_USERNAME=express
TYPEORM_PASSWORD=typescript
TYPEORM_DATABASE=express_typescript
TYPEORM_SYNCHRONIZE=false
TYPEORM_LOGGING=error
TYPEORM_LOGGER=advanced-console
  • setup scriptを実行します
% yarn run setup
...(中略)
executing seed:   CreateUsers

👍  finished seeding
✨  Done in 10.85s.
  • データの確認(docker composeのプロセスにログインしてpsqlを実行します)
% docker exec -it express-typescript-boilerplate_db_1 psql -U express express_typescript
psql (11.8)
Type "help" for help.

express_typescript=# \dt
           List of relations
 Schema |    Name    | Type  |  Owner  
--------+------------+-------+---------
 public | migrations | table | express
 public | pet        | table | express
 public | user       | table | express
(3 rows)

express_typescript=# select * from pet;
                  id                  |   name   |  age  |               user_id                
--------------------------------------+----------+-------+--------------------------------------
 11251680-a7f9-11ea-a66d-a9ff4e2510a9 | Ernest   | 84589 | 1127ae90-a7f9-11ea-a66d-a9ff4e2510a9
 11328400-a7f9-11ea-a66d-a9ff4e2510a9 | Gideon   | 55977 | 1133bc80-a7f9-11ea-a66d-a9ff4e2510a9
 113dcea0-a7f9-11ea-a66d-a9ff4e2510a9 | Mckenzie | 42871 | 113ee010-a7f9-11ea-a66d-a9ff4e2510a9
 1148f230-a7f9-11ea-a66d-a9ff4e2510a9 | Kimberly | 97713 | 1149dc90-a7f9-11ea-a66d-a9ff4e2510a9
 1153c7a0-a7f9-11ea-a66d-a9ff4e2510a9 | Kiana    | 44705 | 11550020-a7f9-11ea-a66d-a9ff4e2510a9
 115eeb30-a7f9-11ea-a66d-a9ff4e2510a9 | Blaise   | 20159 | 116023b0-a7f9-11ea-a66d-a9ff4e2510a9
 1169e7b0-a7f9-11ea-a66d-a9ff4e2510a9 | Joesph   | 61107 | 116af920-a7f9-11ea-a66d-a9ff4e2510a9
 1174e430-a7f9-11ea-a66d-a9ff4e2510a9 | Marta    | 89076 | 1175f5a0-a7f9-11ea-a66d-a9ff4e2510a9
 117fe0b0-a7f9-11ea-a66d-a9ff4e2510a9 | Tristian | 94719 | 1180f220-a7f9-11ea-a66d-a9ff4e2510a9
 118ab620-a7f9-11ea-a66d-a9ff4e2510a9 | Adolph   | 59106 | 118c63d0-a7f9-11ea-a66d-a9ff4e2510a9
(10 rows)

動作確認

  • dev serverを起動して、動作を確認します
% yarn start serve

swaggerがあるので、アクセスしてみます。

基本認証がかかっていて、認証情報は .env に記載があります。(defaultだと admin/1234 でした。)

また、APIを実行するユーザーにも基本認証がかかっていて、以下で、認証エラーを起こさずに、userやpet系のAPIを実行できました。

  • username: bruce
  • password: 1234

w3tecch/express-typescript-boilerplate: A delightful way to building a RESTful API with NodeJs & TypeScript by @w3tecch
を利用すると、PHPのlaravelフレームワークのようなテンプレートで、express + typescriptのプロジェクトが簡単に作成できることが確認できました。

自動で、swagger、graphql、monitor機能などが含まれているのが結構便利だなと思いますし、プロジェクトの構成にあまり悩まなくても良いっていうのもとても良いかなと思います。
とても生産性の高いフレームワークの一つになると思います。

今回は以上になります。