Nx-WorkspaceでAngular+NestJSのプロジェクトを構築する

2023年2月12日

Nx Workspaceを使ってAngular+NestJSのプロジェクトを作成します。

Nx Workspaceとは？

Nx Workspaceとは、Angular CLIを使用して開発する際に、複数のアプリケーションやライブラリを一元管理するツールです。Nx WorkspaceはAngular CLIだけでなく、ReactやNestJSなども管理することができます。

今回はフロントエンドとしてAngularを使用し、バックエンドとしてNestJSを使用してみます。

Angular CLIをインストールする

まずはAngular CLIをインストールします。

Node.jsは執筆時点のLTS版を使用しています。

$ node -v
v18.14.0
$ npm -v
9.4.2

通常の手順どおりにAngular CLIをインストールします。すでにインストール済みの場合はこの手順はスキップしてください。

$ npm install -g @angular/cli
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.1.5
Node: 18.14.0
Package Manager: npm 9.4.2
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1501.5 (cli-only)
@angular-devkit/core         15.1.5 (cli-only)
@angular-devkit/schematics   15.1.5 (cli-only)
@schematics/angular          15.1.5 (cli-only)

次に@nwrl/schematicsをインストールします。@nwrl/schematicsは新しいアプリケーションやライブラリを生成するためのツールです。

$ npm install -g @nrwl/schematics

警告がかなり表示されるかもしれませんが、気にせずインストールしてください。

プロジェクトを作成する

create-nx-workspaceを使ってプロジェクトを作成します。後からアプリケーションを追加するので、--preset=emptyを指定して空のプロジェクトを作成します。

執筆時点では1回だけ質問されますが、ここではNoで回答します。

$ npx create-nx-workspace@latest demo-app --preset=empty
$ cd demo-app

以降の操作は作成したプロジェクト内で行います。

フロントエンドの作成

Angularをインストールし、フロントエンドアプリケーションを作成します。

まずは、@nrwl/angularパッケージをインストールします。

$ npm install -D @nrwl/angular

次にAngularのアプリケーションを作成します。nx generate @nrwl/angular:appコマンドを使うことでAngularのアプリケーションを作成できます。

$ npx nx generate @nrwl/angular:app frontend --routing

インストールが完了したら、サーバーを起動して動作確認してみましょう。

$ npx nx serve frontend

Angularの標準的な画面とは異なりますが、http://localhost:4200/にアクセスし、下記のような画面が表示されればサーバーが問題なく起動しています。

バックエンドの作成

次にバックエンドを作成します。基本的な流れは先ほどと同じです。

まずは@nrwl/nestパッケージをインストールします。

$ npm install -D @nrwl/nest

nx generate @nrwl/nest:appコマンドでバックエンドアプリケーションを作成します。

$ npx nx generate @nrwl/nest:app backend --frontendProject frontend

>  NX  Generating @nrwl/nest:application

UPDATE package.json
CREATE apps/backend/src/app/.gitkeep
CREATE apps/backend/src/assets/.gitkeep
CREATE apps/backend/src/main.ts
CREATE apps/backend/tsconfig.app.json
CREATE apps/backend/tsconfig.json
CREATE apps/backend/webpack.config.js
CREATE apps/backend/project.json
CREATE apps/backend/.eslintrc.json
CREATE apps/backend/jest.config.ts
CREATE apps/backend/tsconfig.spec.json
CREATE apps/backend-e2e/project.json
CREATE apps/backend-e2e/jest.config.ts
CREATE apps/backend-e2e/src/backend/backend.spec.ts
CREATE apps/backend-e2e/src/support/global-setup.ts
CREATE apps/backend-e2e/src/support/global-teardown.ts
CREATE apps/backend-e2e/src/support/test-setup.ts
CREATE apps/backend-e2e/tsconfig.json
CREATE apps/backend-e2e/tsconfig.spec.json
CREATE apps/backend-e2e/.eslintrc.json
CREATE apps/frontend/proxy.conf.json
UPDATE apps/frontend/project.json
CREATE apps/backend/src/app/app.controller.spec.ts
CREATE apps/backend/src/app/app.controller.ts
CREATE apps/backend/src/app/app.module.ts
CREATE apps/backend/src/app/app.service.spec.ts
CREATE apps/backend/src/app/app.service.ts

added 27 packages, changed 1 package, and audited 1462 packages in 13s

180 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

こちらもサーバーを起動し、動作確認をしてみます。

$ npx nx serve backend

http://localhost:3333/apiにアクセスし、以下のようにメッセージが返ってくれば正常にサーバーが起動しています。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！