最近、Nextjs + TypeORM + TypeScriptを使ったシンプルなブログシステムを完成させました。機能は、ログインと登録、ブログの追加と削除、自動デプロイ、Dockerコンテナ化、Nginx gzip設定です。コードアドレス： .Preview: SSRは本当にいい香りが 。白い画面がほとんどなく、読み込みもとても速いです。さて、ここまで説明してきましたが、TypeORMをプロジェクトに導入する方法を見てみましょう。

オブジェクト・リレーショナル・マッピングは、オブジェクト指向プログラミング言語において、異なるタイプのシステム間でデータを変換するために使用されるプログラミング技法です。事実上、プログラミング言語で使用できる「仮想オブジェクトデータベース」を作成します。

- ウィキペディア - オブジェクトリレーショナルマッピング ORM

ORMとは？

バックエンドを知らない学生はこの概念を知らないかもしれないので、簡単に説明します。

データベースを操作するときには、このようなSQL文をたくさん使うことになります：

SELECT * FROM users where WHERE email ='test@test.com';

そして、ORMライブラリを使用する場合のコードは次のようになります：

var orm = require('one-orm-libarry');
var user = orm("users").where({ email: 'test@test.com' });

上の2つのコードは全く同じクエリを実行しますが、より馴染みのあるjsを使ってデータベースを操作することができます。

ORMはまた、複雑な操作の一部をカプセル化し、データベースの操作を容易にするのに役立ちます。

TypeORM

現在のバージョンは0.2.25で、v1.0.0の公式リリースはありませんが、Node.jsコミュニティでは非常に人気があります。

最も重要なのは、デフォルトでTypeScriptをサポートしていることです。

TypeORMを理解したら、実際にコードを書いてみましょう。まず、データベースを作成します。

データベースの作成

dockerでPostgreSQLを作成

最終的には、Dockerコンテナ内にPostgreSQLデータベース・ブログを作成し、コンテナのポート5432をホストに公開することにしました。

mkdir blog-data
docker run -v "$PWD/blog-data":/var/lib/postgresql/data -p 5432:5432 -e POSTGRES_USER=blog -e POSTGRES_HOST_AUTH_METHOD=trust -d postgres:12.2

SQL

成熟したORMフレームワークは、データベースを作成するためのAPIを提供すべきですが、TypeORMは提供していません。=.

正式な開発プロセスでは、開発、テスト、本番の3つのデータベースを作成する必要があります。

今回は、開発データベース blog_development を作成します。

docker exec --it コンテナID bashまずドッカー・コンテナに行き、.次にpgにアクセスして、psql -U blog -W。

CREATE DATABASE blog_development ENCODING 'UTF8' LC_COLLATE 'en_US.utf8' LC_CTYPE 'en_US.utf8';

\l 現在のデータベースを表示

問題ありません！次にTypeORMをインストールします。

TypeORMのインストール

次のコード、まず依存関係をインストールします。

yarn add typeorm reflect-metadata @types/node pg

次にtsconfigを変更します。

"compilerOptions": {
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
}

npx typeorm init --database postgresTypeorm を初期化します。

.gitignore/package.json/tsconfig.json このコマンドはファイルを修正することに注意してください。

このコマンドは、いくつかのファイルの作成にも役立ちました：

src
│   ├── entity // 实体
│   │   └── User.ts
│   ├── index.ts
│   └── migration // 迁移

公式の例を見る代わりに、User.tsを削除し、index.tsから関連するUser.tsをすべて削除します。

ormconfig.jsonで最後に設定されたデータベース情報：

"username": "blog",
"password": "",
"database": "blog_development",

重要: 同期の無効化

ハイライト: ormconfig.jsonに設定を追加: "synchronize": false.

syncは同期を意味し、trueの場合、データベースに接続するたびに、typeormは現在のエンティティがデータベースに対応するテーブルを持っているかどうかをチェックします。

エンティティの中にUserが存在すると仮定すると、Userテーブルが自動的に作成されます。

無効にする理由

経験の浅い学生は、「便利そうなのに、なぜ使えないの？

ユーザが外部で変更された場合、シンク機能が直接データを削除する可能性があるためです。

例えば、Userの名前をnickNameに変更した場合、TypeORMはその名前を削除し、新しいnickNameを追加したとみなします。 この場合、全ての名前を削除し、空のカラムnickNameを作成します。

本番環境ではこのような動作は決して起こらないはずなので、最初から同期を無効にしてください。

TypeScriptの実行方法

TypeScriptコミュニティでは、TSをJSにコンパイルするためにbabelを使う方法と、TSを直接実行するためにts-nodeを使う方法があります。

2つのランタイムは全く同じ方法でTSをサポートしているわけではなく、一緒に使うと多くの非互換性があります。

TypeORMはts-nodeを使ってコンパイルすることを推奨していますが、私が使っている別のフレームワークNext.jsにはTSを実行するためのbabelが組み込まれています。

だからこそ、すべてのバベルを標準化し、使用することが重要なのです。

ステップ

babelのインストール

Node.jsをv14にアップグレードし、@babel/cliをインストールします。

その後、babelを使ってsrcのファイルをJavaScriptにコンパイルします。

npx babel ./src --out-dir dist --extensions ".ts,.tsx"

しかし、正常に実行されず、多くのエラーが報告されました。

plugin-proposal-decoratorsのインストール

エラーのヒントを見て、ヒントをもとに答えを探してください：

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

この投稿は、エラーを報告した投稿と同じです。

I had the same problem, but I was able to get it working by running npm install --save-dev @babel/plugin-proposal-decorators and adding ["@babel/plugin-proposal-decorators", { "legacy": true }] to the plugins section in my .babelrc.

まずはプラグインをインストールしてください：

yarn add --dev @babel/plugin-proposal-decorators

Next.jsのウェブサイトで.babelrcのデフォルト設定を確認したところ、カスタマイズ.babelrc サポートされていることがわかりました。

.babelrcを作成し、まずNext.jsのデフォルト設定を追加します。

{
 "presets": ["next/babel"],
 "plugins": []
}

["@babel/plugin-proposal-decorators", { "legacy": true }]次に、プラグインを追加します。

先ほど失敗したコマンドを再実行すると、うまくいきました。

dist
│   ├── entity
│   │   └── User.js
│   └── index.js

ormconfigの修正.json

ormconfig を変更します：

"entities": [
 "dist/entity/**/*.js"
],
"migrations": [
 "dist/migration/**/*.js"
],
"subscribers": [
 "dist/subscriber/**/*.js"
]

node dist/index.jsを再実行するとうまくいきます！

ワークフローの概要

これまでの成果をご覧ください：

• タイプORM
  • srcのTSコードを修正するたびに、それをJSファイルに変換し、distディレクトリに格納する必要があります。
  • nodeを使ってdistにあるJSファイルを実行し、TypeORMタスクを実行します。
• Next.js
  • pagesディレクトリのTSファイルを修正した後、Next.jsはリクエストのブラウジング時にTSを.nextフォルダのJSファイルに変換します。
    • nodeでdist内のJSを実行

プロジェクトにTypeORMを導入する方法と、基本的な設定を紹介した後、次回はTypeORMを使ってデータベースを操作する方法を紹介します。