Angular v17 の SSR 機能を試してみた
こんにちは、SPA フレームワークの中では Angular が一番大好き、mkrydik です。
今回は Angular v17 系から対応が強化された SSR 機能を確認してみます。
環境準備
まずは以下のように Angular CLI v17 系をインストールしました。Node.js・npm のバージョンも確認してください。
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 17.0.1
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin x64
ココで先に、一つ注意点です。
Angular が esbuild を使用するようになった関係で、~/.npmrc に次のような Optional の記載があると、npm パッケージのインストールが正常に行かず Angular がうまく動作しません。記載があったら外しておいて、OS ごとの依存パッケージをインストールできるようにしておきましょう。
# .npmrc に以下のような記載があったらコメントアウトなどしておくこと
omit=optional
プロジェクトを作成する
それでは $ ng new でプロジェクトを作ってみます。3つ目の質問に SSR を有効化するかどうか、という質問が追加されています。
# プロジェクト作成で SSR を選択できる
$ ng new
? What name would you like to use for the new workspace and initial project? example
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes
CREATE example/README.md (1061 bytes)
CREATE example/.editorconfig (274 bytes)
CREATE example/.gitignore (548 bytes)
CREATE example/angular.json (2743 bytes)
CREATE example/package.json (1266 bytes)
CREATE example/tsconfig.json (877 bytes)
CREATE example/tsconfig.app.json (324 bytes)
CREATE example/tsconfig.spec.json (273 bytes)
CREATE example/server.ts (1703 bytes)
CREATE example/.vscode/extensions.json (130 bytes)
CREATE example/.vscode/launch.json (470 bytes)
CREATE example/.vscode/tasks.json (938 bytes)
CREATE example/src/main.ts (250 bytes)
CREATE example/src/favicon.ico (15086 bytes)
CREATE example/src/index.html (293 bytes)
CREATE example/src/styles.css (80 bytes)
CREATE example/src/main.server.ts (264 bytes)
CREATE example/src/app/app.component.css (0 bytes)
CREATE example/src/app/app.component.html (20884 bytes)
CREATE example/src/app/app.component.spec.ts (919 bytes)
CREATE example/src/app/app.component.ts (365 bytes)
CREATE example/src/app/app.config.ts (321 bytes)
CREATE example/src/app/app.routes.ts (77 bytes)
CREATE example/src/app/app.config.server.ts (350 bytes)
CREATE example/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
Successfully initialized git.
✔ Packages installed successfully.
生成されるファイルを見ると、いくつか SSR に関係するファイルが見つかります。
src/app/app.routes.ts… Angular 内部のルーティング定義ファイルですが、ファイル名がこれまでと少し違いますねsrc/app/app.config.server.ts…app.config.tsに設定をマージするようですsrc/main.server.ts…bootstrapApplication()がexportされていますserver.ts… Express によるサーバ定義が書かれています
この時点で $ npm start や $ npm run build をしてみて、次のようなエラーが出る場合は、前述の Optional 定義の問題で esbuild のインストールに失敗していると思われます。
$ npm start
> example@0.0.0 start
> ng serve
An unhandled exception occurred: Cannot find module 'esbuild'
MacOS だと @esbuild/darwin-x64 の解決に失敗しているので、単に $ npm i -S esbuild としたとしてもうまく問題が解消しません。ご注意ください。
SSR を確認してみる
それでは、SSR 機能を試してみます。$ npm run build でソースコードをビルドしたら、$ npm run serve:ssr:example でサーバを起動してみます。
$ npm run build
$ npm run serve:ssr:example
# もしくは以下のファイルを直接実行する
$ node ./dist/example/server/server.mjs
Node Express server listening on http://localhost:4000
デフォルトではポート 4000 番でサーバが起動します。
Angular SSR の面白いところは、SSR に必要なコードが全て dist/ 配下にまとめられているため、ビルド後の SSR 動作では node_modules/ が必要ない、という点です。
# なんと node_modules/ がなくても動く
$ rm -rf ./node_modules/
$ node ./dist/example/server/server.mjs
Node Express server listening on http://localhost:4000
これはつまり、Docker イメージを作ったりする時に、ビルド後の dist/ だけ COPY してやれば良いというわけで、可搬性がとても高くなっています。
また、Vite と esbuild のおかげで体感できるくらいビルドが速くなっています。
Angular の新しい可能性を皆さんもぜひお試しください。
- 参考 : Introducing Angular v17. Last month marked the 13th anniversary… | by Minko Gechev | Nov, 2023 | Angular Blog
- 参考 : Angular SSR on Docker | Marginalia