📐

NestJS+Angular+Scullyを試してみる

2021/01/20に公開

Angular

NestJS

scully

tech

概要

Next.jsが流行っている今日この頃。
AngularでもScullyやnxを使えば簡単にSSG+APIの構成が作れるのでは？と思ったので試してみる。

セットアップ

NestJS+Angularの準備

nxを使ってNestJS+Angularまでやる。

$ npx create-nx-workspace
npx: installed 190 in 24.11s
? Workspace name (e.g., org name)     nx-scully-sample
? What to create in the new workspace angular-nest      [a workspace with a full stack application (Angular + Nest)]
? Application name                    nx-scully-sample
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
? Default linter                      ESLint [ Modern linting tool ]
? Use Nx Cloud? (It's free and doesn't require registration.) No

Scully追加

公式サイトを参考にしながら追加する。

$ npm run ng add @scullyio/init -- --nx-scully-sample

RouterModule追加

ScullyがAngular Routerを必要としている。
nxで作成したやつはそのままだと入っていないので追加する。

これがないとビルドしたものにアクセスするときにNullInjectorで落ちる。
※気づかないで数時間溶かした。

RouterModuleを追加するために雑にコンポーネントを作って対応する。

top.component作成

nxが生成したapp.componentに記載されてる内容を切り出す。
htmlとtsについては下記の通り。
※cssについては割愛

<div style="text-align: center">
  <h1>Welcome to nx-scully-sample!</h1>
  <img
    width="450"
    src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png"
  />
</div>
<div>Message: {{ hello$ | async | json }}</div>

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Message } from '@nx-scully-sample/api-interfaces';

@Component({
  selector: 'nx-scully-sample-root',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss'],
})
export class TopComponent {
  hello$ = this.http.get<Message>('/api/hello');
  constructor(private http: HttpClient) {}
}

app-router.module.tsを追加

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TopComponent } from './components/top/top.component';

const routes: Routes = [
  { path: '', component: TopComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts修正

作ったcomponentとapp-router.module.tsを読み込む。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { ScullyLibModule } from '@scullyio/ng-lib';
import { AppRoutingModule } from './app-router.module';
import { TopComponent } from './components/top/top.component';

@NgModule({
  declarations: [AppComponent, TopComponent],
  imports: [BrowserModule, HttpClientModule, ScullyLibModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html修正

routingに対応するように修正する。
ここまで修正したら準備は完了。

<router-outlet></router-outlet>

動かしてみる

まずはビルド。
AngularのビルドをしたあとにScullyのビルドをする。

# Angularのビルド
$ npm run build --  --prod
# scullyのビルド
$ npm run scully -- --scanRoutes

公式の通りにscullyのserveを実行すればOK。

$ npm run scully:serve

Firebaseにデプロイしてみる

ここまででビルドして動作確認できるようになった。
せっかくなのでFirebaseにあげて動くところまでやってみる。

準備

Firebase周りの設定

Firebase周りの設定をやる。
CLIで選択していけばOK。

$ npx firebase init
> functionsとhostingを選択
> 適当にproject選択(今回はあるもの選んだ)
> 言語選択はお好みで(今回はビルドしたもの上げるのでjs)
> eslintの質問はNo
> npm installもNo
> spaじゃなくなっているので全URLを/index.htmlに飛ばすのはNo
> 404の上書きもNo
> index.htmlの上書きもNo

生成されたFirebase.jsonを↓の様に修正しておく。

{
  "hosting": {
    "public": "dist/static",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/v1/**/*",
        "function": "api"
      },
      {
        "source": "/*[!v1]*/**",
        "destination": "/"
      }
    ]
  },
  "functions": {
    "source": "dist/apps/api"
  }
}

app/api/main.ts修正

次にファイルを修正していく。
まずはNestJS側のコードであるapp/api/main.tsを修正。
デフォのままではFirebaseで起動できないので対応する。

import { Logger } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { ExpressAdapter } from '@nestjs/platform-express';

import { AppModule } from './app/app.module';
import * as express from 'express';
import * as functions from 'firebase-functions';

const server = express();

async function bootstrap(instance) {
  const app = await NestFactory.create(AppModule, new ExpressAdapter(instance));
  app.setGlobalPrefix('v1');
  return app.init();
}

bootstrap(server)
  .then(v => Logger.log(`Ready`))
  .catch(e => Logger.warn(e));
export const api = functions.https.onRequest(server);

top.component.ts修正

APIのパスを変えたので呼び出している箇所の修正。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Message } from '@nx-scully-sample/api-interfaces';

@Component({
  selector: 'nx-scully-sample-root',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss'],
})
export class TopComponent {
  hello$ = this.http.get<Message>('/v1/hello');
  constructor(private http: HttpClient) {}
}

ビルド結果のフォルダにpackage.jsonを追加

Firebase Functionsを使うのにJSのファイルと一緒に依存関係が示されているpackage.jsonを用意する必要がある。
手動でコピーしても良いが、不要な記載がある+面倒なので簡単なscriptを用意する。
/tools/generator配下にpackage-json-generator.jsを作成。

const path = require('path');
const fs = require('fs');

const original = require('../../package.json');
const ROOT_PATH = path.resolve(__dirname, '../../');
const OUTPUT_PATH = path.resolve(ROOT_PATH, 'dist/apps/api');

const functionsJson = {
  main: "main.js",
  engines: {
    node: "12"
  }
};
(function writeJson() {
  const dependencies = original.dependencies;
  const writeJson = {
    ...functionsJson,
    dependencies
  }
  fs.writeFileSync(`${OUTPUT_PATH}/package.json`, JSON.stringify(writeJson));
})();

package.json修正

ビルド & デプロイしやすいようにnpm scriptsを追加。
上2つがscullyのビルド用で残りがFirebase周りのため。

{
  "scriptis": {
    "scully": "scully",
    "scully:prod": "scully --scanRoutes --prod --RSD",
    "firebase": "firebase",
    "firebase:deploy": "firebase deploy",
    "generate:package": "node tools/generators/package-json-generator.js"
  },
}

デプロイする

実際にFirebaseにデプロイしてみる。
この辺うまく設定すればnx周りで吸収できそうだけどそれはまた今度。

# APIのビルド
# Angular側のビルドも同時に走っているけど、一旦気にしない
$ npm run affected:build

# Scully用にAngularのビルド
$ npm run build -- --prod

# Scullyのビルド
$ npm run scully:prod

# デプロイ
$ npm run firebase:deploy

画像の様に表示されればOK。
スクリーンショット 2021-01-20 20.55.42.png

まとめ

今回はNestJS+Angular+Scullyを試してみた。
API+SSGの組み合わせは思ってた通り簡単にできたので良かった。

ホントはSSRまで試したかったけど、AngularUniversalとScullyが両立できないっぽかったので一旦諦めている。
※Scullyの何かがwindow関数使っていてSSR時に落ちる。
頑張ればどうにかできるのかもだけど一筋縄では行かなそうだった。。。

試して思ったがNext.jsの使い勝手がだいぶ良いと思う。
今回でSSGのみには対応したがSSRには対応できておらず、SSRをやりたいなら(多分)SSGができなくなる。
＋FWを2つ使うことになるのでNext.jsよりは知らなきゃ行けないことが多いのかなという気持ち。

SSGは今のフロントエンドの流行りだと思うし、この構成は面白かったので機会があれば試したい。

参考リンク

Getting started - Scully