ScullyでSSG試してみた #Angular

この記事はDMMグループ Advent Calendar 2020の20日目の記事です。

概要

プライベートに作っていた超静的なAngularアプリケーションがあったので、
Angular用のSSGであるScullyを導入してみた話です

環境

Angular CLI: 11.0.5
Angular: 11.0.5

ドキュメントにはAngular v9.x.x or v10.x.xの指定がありましたがv11のアプリケーションに導入を行いました
私のアプリケーションがとても小さなものだったこともあり、特に問題は起きませんでした

導入

AngularプロジェクトにScullyのスキマティックスを入れるだけで基本的な設定が完了します

ng add @scullyio/init

scully.log, /scully が自動で追加されましたが、git管理不要そうなものだったので .gitignore に退避させました
（似たようなissueがあった）

開発

npx ng build --prod // Angular build
yarn scully // Scully start
yarn scully:serve // Scully serve

Angularのプロジェクトをbuildして、Scullyを走らせると ./dist/static にプレレンダリングされたファイルが生成されます

また、ローカル環境を立ち上げると、AngularとScully両方のビルド結果をそれぞれホスティングした、２つのサーバを立ち上げます
プレレンダリングされたアプリケーションとSPA同時に動作検証ができます

本番環境へデプロイするときは、 ./dist/static をホスティングするように変更します
私のアプリケーションは @angular/fire でfirebaseにホスティングしていたので firebase.json の設定変更を行いました

firebase.json

"hosting": [
    {
      "target": "xxx",
      "public": "dist/static",
    　....
    }
]

ScullyはPuppeteerを使用してレンダリングしているためブラウザ環境以外のことを気にすることがないです
またスキマティクスが用意されているので、既存SPAアプリケーションを超超簡単にプレレンダリングできました！

動的ルーティング

自分のアプリケーションがとても小さなものだったので、よくありそうな動的ルーティングのプレレンダリングも試してみました

以下のような動的なルーティングがあるとします（商品の詳細ページのイメージ）

app-routing.module.ts

const routes: Routes = [
  { path: 'book/:id', component: BookComponent },
];

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

動的ルーティングをプレレンダリングしたい場合、Scullyのconfigファイルに設定追加をする必要があります。
（設定がない場合はプレレンダリングの対象から外されます）

Scullyが用意しているjsonプラグインを使い、scully.<projectName>.config.ts を修正しました

ScullyはAngularのルート設定を見てプレレンダリングの対象を検出しています、そのためルートの数だけ静的ファイルも増えていきます
jsonプラグインは、ルートを精査中に指定したAPIからデータをフェッチして、ルートパラメータを含むルートのリストを作成してくれます
これにより、動的ルーティングのページのプレレンダリングが可能となります

scully.projectName.config.ts

export const config: ScullyConfig = {
  ....
  routes: {
    '/book/:id': {
      type: 'json',
      id: {
        url: "https://some-endpoint",
        property: "id",
        resultsHandler: () => [{ id: 1 }, { id: 2 }, { id: 3 }], // テスト用にダミーデータを返した
      }
    }
  }
}

設定後に再度AngularとScullyのビルドを行うと ./dist/static/book にディレクトリ1,2,3とそれそれぞれの静的ファイルが生成されました
また、Scullyのルーティングファイルも更新されてました

src/assets/scully-routes.json

[{"route":"/"},{"route":"/book/1"},{"route":"/book/2"},{"route":"/book/3"}]

ScullyRoutesServiceをDIすることでコンポネント側でルート情報の取得も可能です

動的パラメータはパターン数が多いケースが多々あるので、API経由で取得したデータを元に自動的にプレレンダリングの対象にしてくれるのは楽でいいなと思いました

他にもScullyが用意しているプラグインがあったりカスタムプラグインも作成できるようで、各アプリケーションの仕様にそって色々試せそうです

まとめ

とにかく簡単にSSG導入ができました
Scullyは9月頃にbeta版からv1になったばかりなこともあり今後もアップデートがありそうなので、引き続きwatchしていきたいです！