👋

Angular+Nest.js の環境構築

2022/03/17に公開

Angular

NestJS

tech

Angular と Nest.js での環境構築を進めます。

Angular + Nest.js の環境構築

以下の構成での環境構築を進めていくための手順書です。

lerna
Angular
Nest.js
tailwind
Heroku

リポジトリ

Heroku
https://dry-reef-54728.herokuapp.com/

前提

各種ツールを利用するために、以下のようなコマンドが必要です。

ng : Angular のプロジェクト作成用の CLI ツール
nest : Nest.js のプロジェクト作成の CLI ツール
heroku : Heroku を立ち上げるための CLI ツール

各種セットアップは以下の資料を参考にしてください。

https://angular.jp/cli

環境構築

Angular と Nest.js を利用するために、今回は lerna でプロジェクト構築をします。
まずは、空ディレクトリを作成後 lerna init で packages ディレクトリなどの必要ファイルを生成します。

mkdir my-app
cd my-app
npx lerna init

生成された package.json に scripts のセクションを追加します。

{
  "scripts": {
    "bootstrap" : "lerna bootstrap",
    "postinstall" : "npm run bootstrap",
    "start": "lerna run start --stream",
    "build": "lerna run build --stream"
  }
}

メンバーが lerna コマンドを実行できるように、 npm i lerna をルートで実行しておきます。
プロジェクトルートに.gitignore を追加して、 node_modules を追加するのを忘れないようにしてください。

node_modules
.env

npm run bootstrap は packages フォルダ内で一括で npm i を発行する機能です。
チーム開発の際にはセットアップ用のコマンドとして、参画メンバーに共有してください。

$ touch README.md

次に packages に移動して、server client 環境を構築します。

cd packages
nest new server --skip-git
ng new client --style=scss --routing=true

nest コマンドの --skip-git は git の初期化を無効にするものです。
（今回はひとつ上の lerna がルートになるため）

これで packages に Angular と Nest.js のテンプレートが生成されました。

Angular 側のセットアップ

開発環境は、 ng serve を主体として構築していきます。
ng serve 経由で nest.js にアクセスできるよう angular 側に proxy 設定をかけましょう。

Nest.js への Proxy 設定を通すために、client/src/proxy.conf.json を作成します。

# on packages/client
$ touch src/proxy.conf.json

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:3000"
  }
}

npm start 実行時に、この PROXY 設定が有効になるよう、client/package.json を以下のように書き換えます。

{
  "scripts": {
    // ...
    "start": "ng serve --proxy-config src/proxy.conf.json",
    // ...
  }
}

Nest.js 側のセットアップ

続いて Nest.js 側の設定を進めます。

server/package.json を編集して npm start で --debug を有効に

{
  "scripts": {
    // ...
    "start": "nest start --debug --watch",
    // ...
  },
}

server/src/main.ts でポートとプレフィックスの指定を行います。

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api');
  await app.listen(process.env.PORT || 3000);
}
bootstrap();

server/src/app.module.ts では静的コンテンツ配信を有効にします。

# on packages/server
$ npm i @nestjs/serve-static

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '../../client/', 'dist/client'),
      exclude: ['/api'],
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

ここまでできれば、プロジェクトルートから npm start で開発サーバを起動できます。

http://localhost:4200 で Angular のルートが、
http://localhost:4200/api で Nest の hello world メッセージが表示できれば OK です。

Heroku へのデプロイ

一旦デプロイするので、Git のコミットを入れておいてください。

Heroku のアプリケーションを heroku コマンド経由で作成します。

$ heroku apps:create

アプリケーションを作成したら環境変数を調整します。
ビルドフェーズで ng コマンドなどを利用するために、NPM_CONFIG_PRODUCTION を false にセットします。

$ heroku config:set NPM_CONFIG_PRODUCTION=false

これで、push してデプロイが可能です。

$ git push heroku master

このままでは、ng serve でホスティングが走ってしまうので、ビルド成果物を配信できるように調整をしていきます。
Procfile を以下の内容で作成します。

$ touch Procfile

web: node packages/server/dist/main

ここまでの内容を Heroku に再度 push して deploy できれば成功です。
heroku open でアプリケーションを開いて Angular と Nest の動作を確認してください。

Tailwind の導入

Tailwind の導入は以下の手順で実施します。

tailwind.config.js には、加えて purge の設定も追加しておきましょう。

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  purge: [
    "./src/**/*.{html,ts}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

ローカルで動作確認が取れたら、heroku に push してビルド結果を確認します。
ビルドログの中で、以下のように style.xxxxx.css の容量が小さくなっていて、かつ画面に装飾が正しく反映されていればOKです。

remote: client: ✔ Index html generation complete.
remote:        client: Initial Chunk Files               | Names         |       Size
remote:        client: main.8781df05f2f2f80ae88e.js      | main          |  184.73 kB
remote:        client: polyfills.e9c16e5e1913541cc638.js | polyfills     |   32.72 kB
remote:        client: styles.4808e529956a5e43d388.css   | styles        |    3.04 kB
remote:        client: runtime.7d2e27576b419591df3b.js   | runtime       | 1019 bytes
remote:        client: | Initial Total |  221.49 kB

Tailwind Form の導入

インストール時にエラーが出る場合は、以下のような形でバージョンを指定すると良いでしょう。

npm install -D @tailwindcss/forms@0.3