【ITニュース解説】10 Minutes from First Line of Code to Live Deployment: A Super Fast Nest.js Blog Course

この記事は、Nest.jsというフレームワークを利用して、わずか10分程度でブログアプリケーションを作成し、さらにそれをインターネット上に公開するまでの具体的な手順を解説している。このチュートリアルは、詳細な理論の説明よりも、実際に手を動かして完成品を作り上げることで、Nest.jsフレームワークを迅速に習得することを目指している。構築されるブログは、バックエンドにNest.js、データ管理にPostgreSQLデータベース、そしてページの表示にはEJSというテンプレートエンジンを使用する。

開発は、まずプロジェクトの初期設定から始まる。Nest.jsプロジェクトの管理には、コマンドラインインターフェース（CLI）ツールが不可欠だ。このCLIツールをグローバルにインストールした後、「nest new personal-blog」というコマンドを実行すると、ブログアプリケーションのひな形が生成され、必要な依存関係も自動でインストールされる。これにより、すぐに開発環境が整い、コードの編集に取りかかれる。

次に、ブログ記事を保存するためのデータベースをアプリケーションに統合する。このチュートリアルでは、PostgreSQLデータベースを採用し、Nest.jsとの連携には「TypeORM」というライブラリを使用する。TypeORMは「ORM（Object-Relational Mapping）」という技術で、データベースのテーブルをプログラムの「オブジェクト」として扱えるようにすることで、直接SQL文を書かなくても、より直感的にデータを操作できるようにする。必要なライブラリ（@nestjs/typeorm、typeorm、pg）をインストールした後、データベース接続の設定を行う。ここでは、ローカルでのデータベース構築を省略するため、Leapcellというオンラインサービスを利用して、無料でPostgreSQLデータベースを簡単に作成する。Leapcellで取得したデータベースの接続情報を、Nest.jsアプリケーションの主要な設定ファイルであるsrc/app.module.tsに記述する。特に、オンラインサービスとの接続ではセキュリティ上の理由からssl: trueの設定が必須となる。

データベース接続が確立されたら、ブログ記事を管理するための「Postsモジュール」を作成する。Nest.jsでは、アプリケーションの機能を論理的な単位で「モジュール」として分割するのが推奨されている。CLIツールを使って、Postsモジュール、それを制御するPostsコントローラー、そしてビジネスロジックを担うPostsサービスというファイルをまとめて生成する。さらに、データベースに保存するブログ記事の構造を定義する「Postエンティティ」を作成する。これは、記事のID、タイトル、内容、作成日時といった情報がデータベースのテーブルでどのように表現されるかをコードで示すものだ。@Entity、@Columnなどのデコレーターを使って、これらのプロパティがデータベースの列に対応することを指定する。このPostエンティティをPostsモジュールに登録することで、TypeORMがデータベースとの連携を管理できるようになる。同時に、LeapcellのWebエディタ上で、このエンティティ定義に基づいたPostテーブルを実際にデータベースに作成するSQLコマンドを実行する。最後に、Postsサービスに、すべての記事を取得するfindAll、特定の記事を取得するfindOne、新しい記事を作成するcreateといった、具体的なデータベース操作のロジックを実装する。

続いて、ユーザーがブラウザで閲覧するための動的なHTMLページを生成する設定を行う。これには「EJS」というテンプレートエンジンが用いられる。EJSは、サーバー側でデータとHTMLのテンプレートを組み合わせて最終的なHTMLを生成する技術だ。EJSをプロジェクトにインストールした後、Nest.jsアプリケーションの起動ファイルであるsrc/main.tsを修正し、EJSをビューエンジンとして設定する。また、HTMLテンプレートファイルが置かれるviewsディレクトリと、CSSなどの静的なアセットファイルが置かれるpublicディレクトリのパスもここで指定する。

フロントエンドのページ実装として、viewsディレクトリ内に、_header.ejs（共通ヘッダー）、_footer.ejs（共通フッター）、index.ejs（ブログ記事一覧）、post.ejs（個別記事詳細）、new-post.ejs（新規記事投稿フォーム）というEJSテンプレートファイルを作成する。これらのファイルには、HTMLの骨組みと、EJSの構文で動的なデータを表示するためのプレースホルダーが含まれる。また、public/css/style.cssファイルには、これらのページの視覚的なスタイルを定義するCSSコードを追加し、見栄えを整える。

最後に、バックエンドの機能とフロントエンドのページを連携させる。src/posts/posts.controller.tsファイルを更新し、HTTPリクエストに応じて適切なデータベース操作を行い、その結果をEJSテンプレートに渡してHTMLページとしてレンダリングするロジックを実装する。例えば、ルートパス/postsへのGETリクエストに対しては、Postsサービスから記事一覧を取得し、index.ejsテンプレートで表示する。また、新規記事作成フォームの表示や、フォームから送信されたデータを処理して新しい記事をデータベースに保存する処理もこのコントローラーに記述する。アプリケーションの初期ルートパスである/にアクセスがあった場合に、ブログのトップページ/postsにリダイレクトさせるために、src/app.controller.tsファイルも修正する。

これらの開発ステップが完了したら、「npm run start:dev」コマンドを実行することで、開発サーバーが起動する。ウェブブラウザでhttp://localhost:3000にアクセスすると、ローカル環境で動作するブログアプリケーションを確認し、新しい記事の投稿などを試すことができる。

開発したブログを一般公開するには、「デプロイ」という作業が必要だ。データベースで利用したLeapcellは、ウェブアプリケーションのホスティング（公開）も可能だ。まず、作成したプロジェクトのコードをGitHubにコミット（保存）する。次に、Leapcellのウェブサイトで「Create Service」を選び、GitHubのリポジトリを連携させる。Leapcellは自動的にNest.jsプロジェクトの設定を検出し、デプロイに必要な構成を準備してくれる。最後に「Submit」をクリックしてデプロイを開始すると、Leapcellがアプリケーションをビルドし、インターネット上に公開してくれる。デプロイが成功すると、Leapcellからブログにアクセスするための公開URLが提供される。このURLを共有することで、世界中のどこからでも自分のブログにアクセスできるようになる。この一連のプロセスを通じて、Nest.jsを用いたWebアプリケーション開発の全工程を実践的に学ぶことができる。