カテゴリー
【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築
※ 当ページには【広告/PR】を含む場合があります。
2021/08/07
2022/08/10
10年前のマシーンスペックではブラウザからウェブサイトにアクセスした際に初回描画されるまでの速度(ファーストページ速度)がユーザーには耐えきれないほど低速であったため、ページが表示されないまま離脱される恐れがありました。
そのようなクライアント-サーバー間の通信速度の向上を考慮し、SSR等々の仕組みが当時から盛んに開発されてきたわけですが、最近では高速なブロードバンドインターネットの普及と高性能なパソコンやスマホなどが市場に浸透したおかげで、SSRなしでもさほどユーザーのストレスにならない時代にもなりました。
またSSRによってメタタグにOGP情報を動的に仕込ませることで、各ブロバイダーが提供するSNSサービス用のクローラーが読み取ることが可能になり、SNSに対応したSEO対策に優位性であったのも今は昔で、既にAWSやAzureのマイクロサービスを駆使すると、静的なリソースへのアクセスであってもメタタグを自由に処理できるようにもなっています。
今現在で、ユーザー体感速度が気にならなくなってきたからSSRのような仕組みはお役御免になり、そのまま消えていくような技術になってしまうのか、とはいえばそうとも言えません。
むしろその逆で、ネットワークインフラとして今や欠かせないものになったクラウドサービスにおいて、スループット転送量がそのまま従量制の利用料金として利用者に課されるので、クライアントに必要最低限の処理結果だけを送信でき、通信のリソース容量を細かくコントロールできるSSRの存在感が実のところ増してきているように思います。
如何せん、SSRは高度なフロント・バックエンドの両方の知識の必要です。
以前、SSR/プリレンダリングをする際の注意をまとめた記事をポストしましたので、興味があればご覧ください。
さて、今回は最近のAngular12で試した際のSSRアプリケーションのもっとも簡単な開発方法について解説しました。
Angular CLIのインストール
今回はまっさらなところからスタートしましょう。
node.jsはv12以降をインストールしている環境で手始めに適当な作業フォルダ内に移動し、
npm init {
"name": "ng_ssr_test",
"version": "0.0.1",
"private": true,
"license": "UNLICENSED"
}
angular-cliを(グローバルインストールでも良いのですが)今回はローカルにインストールして使います。
$ yarn add @angular/cli -S
$./node_modules/.bin/ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.0
Node: 12.16.3
Package Manager: yarn 1.22.4
OS: linux x64
Angular: undefined
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1202.0
@angular-devkit/core 12.2.0
@angular-devkit/schematics 12.2.0
@angular/cli 12.2.0
@schematics/angular 12.2.0
現在の最新安定版は
angular cli v12.2いつものAngularプロジェクトを作成
ローカルにCLIを入れると
ng {
...
"scripts": {
"ng": "ng"
},
...
では空のプロジェクトを
ng new $ yarn ng new SSRWebApp
? Would you like to add Angular routing? > Yes
? Which stylesheet format would you like to use? > SCSS
$ cd SSRWebApp && tree -L 3 -I node_modules
.
├── README.md
├── angular.json
├── karma.conf.js
├── package.json
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.scss
│ └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── yarn.lock
しばらく待つと現在の作業ディレクトリ直下に
SSRWebApp以降はこのSSRWebAppフォルダの中で作業していきます。
Angular Universalのインストール
Angular Universalの意味するところはAngularアプリをExpressアプリケーションとしてコンパイルさせたHTMLページをサーバーからクライアントへ返すための仕組みを指すものです。
Angular Universalになったといっても、全く別物のAngularアプリケーションに生まれ変わるわけでなく、通常のAngularのほとんどの機能がそのまま利用できます。
Angular Universalのコアライブラリである
@nguniversal/express-engine main.server.ts
app.server.module.ts
tsconfig.server.json
server.ts
@nguniversal/express-engineのインストールは以下のコマンドで簡単に利用できます。
$ yarn ng add @nguniversal/express-engine
インストールし終えてから
package.json {
"name": "ssrweb-app",
"version": "0.0.0",
"scripts": {
...
"dev:ssr": "ng run SSRWebApp:serve-ssr",
"serve:ssr": "node dist/SSRWebApp/server/main.js",
"build:ssr": "ng build && ng run SSRWebApp:server",
"prerender": "ng run SSRWebApp:prerender"
},
...
というようにssrとprerender用のコマンドも自動で追加されています。
今回はプリレンダリング(prerender)は説明しませんが、Angular UniversalはSSRだけでなく、プリレンダリングの静的ホスティングウェブページ(例えば本ブログ)も対応しているので使い方を覚えると二度お得です。
Universalアプリケーションの開発方法
ではインストールも済んだので、Angular SSRアプリケーションを開発していく段階で使うコマンドを以下のように使います。
$ yarn dev:ssr
これでコンパイルが完了したら、ローカルのブラウザから
http://localhost:4200
見た目こそ通常のAngularSPAとなんら変わらないように見えますが、バックエンドで動作しているnode.jsによるSSRが動作しているということが通常のAngularアプリケーションと異なります。
プロダクションビルドとローカルテスト
開発が進み、やがてSPAウェブページとして公開するときになったら、
$ yarn build:ssr
とすることで
dist $ tree -I node_modules dist
dist
└── SSRWebApp
├── browser
│ ├── 3rdpartylicenses.txt
│ ├── favicon.ico
│ ├── index.html
│ ├── main.cedae7bdc85724a6aff2.js
│ ├── polyfills.63df66e961fda97a353b.js
│ ├── runtime.0da0be094e5c75c071d3.js
│ └── styles.31d6cfe0d16ae931b73c.css
└── server
├── 3rdpartylicenses.txt
└── main.js
このdistの中で
SSRWebAppbrowserserverこのSSRアプリケーションが正常に起動をするかを判断するためには、
$ yarn serve:ssr
...
Node Express server listening on http://localhost:4000
とすることで内部のExpressサーバーが起動する状態になり、
http://localhost:4000ブラウザから覗くと、クライアントサイドへ
browser
そして
servermain.jsクライアント側から再描画のリクエストがある度に、サーバー側はレンダリング処理を行い、リクエストに応じた結果をレスポンスするというがSSRになります。
開発後にSSRウェブサイトを公開するには
以上で説明した手順でAngular SSRアプリは完成しているので、その後ウェブサイトとして公開する手順はnode.js Expressフレームワークで作成したアプリケーションをWebページとしてどう扱うかという話になります。
ということは、何処かのNode.js対応のレンタルサーバーを借りてWebサーバーを立てるか、AWSやAzureのようなPaaSで公開する作業が必要になってきます。
ExpressアプリのWebサーバーの公開方法はネット検索すると多数の方が説明されているのでここでは具体的な解説いたしません。
AWSを始めとするクラウドサービスでは運用費用が安く出来る分、サーバレスなネットワーク構築の知識が必要になり設定はかなり高難度です。
クラウドサービスの勉強なしにサクッと公開したい方は、例えば
まとめ
以上、Angular12を使ってAngular Universalアプリケーションを開発する際の事始め的な方法を解説しました。
Angular Universalの登場初期から使っている方からすると、ゴチャゴチャしたライブラリを呼び込んで、クライアントサイドとサーバーサイドの切り分けを注意しながらでないとビルドエラーを吐きまくっていた頃と比較しても、「こんなにスッキリ使えるようになっている」と思えるかも知れません。
Angularに比べるとやや後発気味でスタートしたVuejsやReactでも大分マシなSSR対応プロジェクトが作成できるようになっていますが、個人的にはまだAngularに一日の長があるように思います。
一概にどれが優れているとは言えませんが、自身の感覚に合ったフレームワークを比較しながら模索してみてください。
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー