【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築


2021/08/07
蛸壺の技術ブログ|【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築

Angular Universalの登場から既に6年以上も立ち、Angularデベロッパーの弛まない努力の甲斐もあって、通常のAngularアプリケーション開発もシンプルかつ洗練されたものになって来ています。

10年前のマシーンスペックではブラウザからウェブサイトにアクセスした際に初回描画されるまでの速度(ファーストページ速度)がユーザーには耐えきれないほど低速であったため、ページが表示されないまま離脱される恐れがありました。

そのようなクライアント-サーバー間の通信速度の向上を考慮し、SSR等々の仕組みが当時から盛んに開発されてきたわけですが、最近では高速なブロードバンドインターネットの普及と高性能なパソコンやスマホなどが市場に浸透したおかげで、SSRなしでもさほどユーザーのストレスにならない時代にもなりました。

またSSRによってメタタグにOGP情報を動的に仕込ませることで、各ブロバイダーが提供するSNSサービス用のクローラーが読み取ることが可能になり、SNSに対応したSEO対策に優位性であったのも今は昔で、既にAWSやAzureのマイクロサービスを駆使すると、静的なリソースへのアクセスであってもメタタグを自由に処理できるようにもなっています。

今現在で、ユーザー体感速度が気にならなくなってきたからSSRのような仕組みはお役御免になり、そのまま消えていくような技術になってしまうのか、とはいえばそうとも言えません。

むしろその逆で、ネットワークインフラとして今や欠かせないものになったクラウドサービスにおいて、スループット転送量がそのまま従量制の利用料金として利用者に課されるので、クライアントに必要最低限の処理結果だけを送信でき、通信のリソース容量を細かくコントロールできるSSRの存在感が実のところ増してきているように思います。

如何せん、SSRは高度なフロント・バックエンドの両方の知識の必要です。

以前、SSR/プリレンダリングをする際の注意をまとめた記事をポストしましたので、興味があればご覧ください。

さて、今回は最近のAngular12で試した際のSSRアプリケーションのもっとも簡単な開発方法について解説しました。


Angular CLIのインストール

今回はまっさらなところからスタートしましょう。

node.jsはv12以降をインストールしている環境で手始めに適当な作業フォルダ内に移動し、
npm initをしてもらうか、以下のpackage.jsonを作っておきます。

            
            {
    "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コマンドが使いにくいのでpackage.jsonにスクリプトを設けます。

            
            {
...
    "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にアクセスすると、いつものプロジェクトがSSR化されて表示されているはずです。

合同会社タコスキングダム|蛸壺の技術ブログ

見た目こそ通常の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の中でSSRWebAppというアプリケーション本体があり、さらにbrowserserverの2つのフォルダがあることが分かります。

このSSRアプリケーションが正常に起動をするかを判断するためには、

            
            $ yarn serve:ssr
...
Node Express server listening on http://localhost:4000
        
とすることで内部のExpressサーバーが起動する状態になり、http://localhost:4000にアクセスするようにします。

ブラウザから覗くと、クライアントサイドへ
browserフォルダ内のリソースが読み込まれていることが確認できます。

合同会社タコスキングダム|蛸壺の技術ブログ

そして
serverフォルダ内にあるmain.jsがサーバーで稼働しているバックエンドからレンダリング処理を担当しています。

クライアント側から再描画のリクエストがある度に、サーバー側はレンダリング処理を行い、リクエストに応じた結果をレスポンスするというがSSRになります。


開発後にSSRウェブサイトを公開するには

以上で説明した手順でAngular SSRアプリは完成しているので、その後ウェブサイトとして公開する手順はnode.js Expressフレームワークで作成したアプリケーションをWebページとしてどう扱うかという話になります。

ということは、何処かのNode.js対応のレンタルサーバーを借りてWebサーバーを立てるか、AWSやAzureのようなPaaSで公開する作業が必要になってきます。

ExpressアプリのWebサーバーの公開方法はネット検索すると多数の方が説明されているのでここでは具体的な解説いたしません。

AWSを始めとするクラウドサービスでは運用費用が安く出来る分、サーバレスなネットワーク構築の知識が必要になり設定はかなり高難度です。

クラウドサービスの勉強なしにサクッと公開したい方は、例えば
さくらのレンタルサーバーを利用するとスムーズかと思います。

参考サイト|さくらのVPSではじめるnode.js


まとめ

以上、Angular12を使ってAngular Universalアプリケーションを開発する際の事始め的な方法を解説しました。

Angular Universalの登場初期から使っている方からすると、ゴチャゴチャしたライブラリを呼び込んで、クライアントサイドとサーバーサイドの切り分けを注意しながらでないとビルドエラーを吐きまくっていた頃と比較しても、「こんなにスッキリ使えるようになっている」と思えるかも知れません。

Angularに比べるとやや後発気味でスタートしたVuejsやReactでも大分マシなSSR対応プロジェクトが作成できるようになっていますが、個人的にはまだAngularに一日の長があるように思います。

一概にどれが優れているとは言えませんが、自身の感覚に合ったフレームワークを比較しながら模索してみてください。

参考サイト

Angular Universal を使ったサーバーサイドレンダリング (SSR)


Angularの学び方

主要なJavascriptのフレームワークの一角であるAngularは、現在Google主導で開発が進められている玄人フロントエンジニア向けのフレームワークです。

Angularを使えばかなり高度なWebアプリも自由に作成できるのですが、やはり初心者が独学で勉強しようとおもうとかなりの知識が必要でAngularは挫折しやすいと言われています。

特にAngularを使う上で注意が必要なのは半年に一回のペースでプログラムのメジャーバージョンが繰り上がるので、他のフレームワークと比べても格段に技術を追っかけるスピードが早いことも躓く人が多い一因になっているとも思います。

本ブログでは結構Angularの応用的な話を躊躇なく唐突にぶっこんで参りますので、初学者の方からするといきなり出現するテクニックに戸惑われるかも知れません。

Angular&Typescriptの学習を書籍から初めても良いのですが、フレームワークで使われる“旬”のテクニックの移り変わりが激しいので、勉強している書籍の内容が古いと最悪アプリのビルドに失敗してしまうことにもなりかねません。

それでいうと、Udemyの動画講座では、十分に最新といえるAngularバージョンに対応しているため、“旬”のテクニックをベースにした基礎からじっくり学べるためより実践的なスキルを身につけることが可能です。

以下の講座ではAngular初心者向けに簡単なプロジェクトの作成まで学ぶことができます。

より実践的にフロントエンジニアとして重宝されるためにはSPA(シングルページアプリケーション)をある程度作成できるスキルが必要になりますので、さらに学びたい方は以下のような講座も用意されています。

他にもAngularプログラミングの習得度に応じた講座も多数用意されているので、必要に応じて試されてはいかがでしょうか。