2020/06/06
Express Typescript Boilerplate入門
概要
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機能などが含まれているのが結構便利だなと思いますし、プロジェクトの構成にあまり悩まなくても良いっていうのもとても良いかなと思います。
とても生産性の高いフレームワークの一つになると思います。
今回は以上になります。
関連する記事
【1行】JavascriptでCookieの全削除
たまにやるCookie全削除のJavascriptです
Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。
[NextJs]Google Mapでマーカーをセンターに表示するコンポーネントの作成
NextJsアプリ内で、Google Mapを表示して、中心にマーカーを配置するコンポーネントを作成しました。
[Next.js]client側のみで読み込むcomponent(SSRのエラーを回避)
組織図を描画するreactライブラリ`react-organizational-chart`をサーバー側で呼び込む際にエラーになる方法に対処しました