これはNest.jsの速習コースです。このチュートリアルでは、わずか数ステップで、10分未満で最初のコード行からデプロイまでのブログを構築します。
これほど速い理由は、このチュートリアルではプロセスの詳細な説明には踏み込まず、代わりに完成品を構築するように直接案内するからです。フレームワークの学習は、既存のプロジェクトを自分のニーズに合わせて変更する方が速いと信じています。
このブログは、純粋なNode.jsバックエンドプロジェクトで一般的なテクノロジースタックを表す3つの機能モジュールで構成されています。
- Nest.js
- データベースとしてPostgreSQL
- ページレンダリングのためにejs
早速始めましょう。
1. プロジェクトの初期化
Nest.jsプロジェクトは、プロジェクト管理のためにCLIツールに大きく依存しています。まず、Nest.js CLIをインストールしましょう。
CLIを使用して新しいプロジェクトを作成します。
これにより、personal-blogという名前の新しいフォルダが作成され、必要なすべての依存関係がインストールされます。お好みのエディタでこのディレクトリを開いて、正式に編集を開始してください。
2. PostgreSQLデータベースへの接続
次に、PostgreSQLデータベースを統合します。公式の推奨事項に従って、ORMとしてTypeORMを使用します。ORMの役割は、データベースをコードに統合することです。
依存関係のインストール
@nestjs/typeorm: TypeORMの公式Nest.jsモジュールで、TypeORMをNest.jsに適応させます。typeorm: TypeORMライブラリ自体。pg: PostgreSQL用のNode.jsドライバーで、Node.jsがPostgreSQLの読み書きを可能にします。
データベースの設定
チュートリアルを高速化するために、ローカルでのデータベースのインストールとセットアップの手順はスキップします。代わりに、オンラインデータベースを直接プロビジョニングします。
Leapcellでワンクリックで無料データベースを作成できます。
ウェブサイトでアカウントを登録した後、「Create Database」をクリックします。
データベース名を入力し、デプロイメントリージョンを選択すると、PostgreSQLデータベースを作成できます。
表示される新しいページで、データベースに接続するために必要な情報が見つかります。下部にはコントロールパネルが用意されており、ウェブページ上で直接データベースを読み取ったり変更したりできます。
データベース接続の設定
src/app.module.tsファイルを開き、TypeOrmModuleをインポートします。
Leapcellからのデータベース設定を使用して接続情報に記入します。sslはtrueに設定する必要があることに注意してください。そうしないと、接続が失敗します。
Postsモジュールの作成
次に、ブログ投稿を管理するモジュールを作成します。
Nest CLIを使用して、必要なファイルを迅速に生成できます。
その後、データベースに接続するためにPostエンティティファイルを作成する必要があります。src/postsディレクトリで、post.entity.tsという名前のファイルを作成します。
次に、データベースに接続する必要があります。
PostsModuleでTypeOrmModuleを登録します。src/posts/posts.module.tsを開き、TypeOrmModule.forFeature([Post])をインポートします。
Leapcellのデータベース詳細ページに移動し、Webエディタで次のコマンドを実行して、対応するテーブルを生成します。
最後に、PostsServiceを作成する必要があります。PostsServiceは、投稿に関連するすべてのビジネスロジックを処理する責任があります。src/posts/posts.service.tsを開き、次のコードを追加します。
EJSによるページレンダリングの設定
次に、動的なHTMLページをレンダリングできるようにEJSを設定します。
依存関係のインストール
ビューエンジンの統合
src/main.tsファイルを開き、次のように変更します。
プロジェクトのルートディレクトリ（srcと同じレベル）に、viewsとpublicフォルダを作成します。
フロントエンドページの実装
viewsフォルダに次のファイルを作成します。
-
_header.ejs(再利用可能なヘッダー) -
_footer.ejs(再利用可能なフッター) -
index.ejs(ブログホームページ) -
post.ejs(投稿詳細ページ) -
new-post.ejs(新規投稿ページ)
2. CSSスタイルの追加
public/css/style.cssに簡単なスタイルを追加します。
バックエンドとフロントエンドページの接続
HTTPリクエストを処理し、EJSテンプレートをレンダリングするために、src/posts/posts.controller.tsを更新します。
次に、ルートパス/がブログホームページにリダイレクトされるようにsrc/app.controller.tsを更新します。
ブログの実行
ブログを開始するには、ターミナルで次のコマンドを実行します。
ブラウザでhttp://localhost:3000を開いてブログページを表示します。新しい投稿を書いてみてください！
これで、ウェブサイトとAPIを自由にカスタマイズして、Nest.jsの理解を深めることができます。
ブログのオンラインデプロイ
さて、自分で作ったウェブサイトを他の人に見せて、誰でもアクセスできるようにするにはどうすればよいか考えているかもしれません。
以前データベースを作成するために使用したLeapcellを覚えていますか？Leapcellはデータベースを作成するだけでなく、Nest.jsを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリケーションホスティングプラットフォームでもあります。
以下の手順に従ってください。
-
プロジェクトをGitHubにコミットします。GitHubの公式ドキュメントを参照して手順を確認してください。Leapcellは後でGitHubリポジトリからコードをプルします。
-
Leapcellページで「Create Service」をクリックします。
-
Nest.jsリポジトリを選択すると、Leapcellが必要な構成を自動的に入力します。
-
下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイメントホームページに戻ります。ここで、Leapcellがドメインを提供していることがわかります。これがブログのオンラインアドレスです。
これで、このリンクを友人と共有すれば、誰もがオンラインであなたのブログを見ることができます！
Xでフォローする：@LeapcellJP
関連記事：
