angular-cli@1.3.0-rc.0でSSRしたときのメモ

SSRを試してみた

参考にしたサイト→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5

SSRとは

チラシの裏程度に。間違ってるかも。

まず、今までの動的WebとSPAの違いに関して
今までの動的WebはPHP、Java(Servlet)、.net?などを利用して、サーバーでHTMLを動的に作成してクライアントに送信する形を取っている。
一方AngularのSPAではロジック部分のみをクライアントに渡し、データは非同期で通信することになっている。モダンWebとかも言うらしい。

wgetやcurlコマンドでサイトにアクセスした場合、今までの動的Webの場合、綺麗なHTMLコードが帰ってくるのに対しAngularのSPAサイトではロジック部分しか取れない。つまり記事の無い空ブログ(実際にはjsを読んでるだけのHTML)みたいな感じになってしまう。そのためSEOに不向きなためSSRを実現しSEOにも対応していこうと言う考えがあった。
angular-universalはSSRを実現するプロジェクトでありAngular4.0では統合された。
Angular2の時からSSRを適用したサイトもあるようだが、やり方は人それぞれで統一はされていない印象。

それで

angular-universalはAngular 4.0にて統合され環境が整ったと思ったけどangular-cli@1.2.3でははまだサポートされていないっぽい。
angular-cli@v1.3.0-rc.0ではplatformと言う項目ができserverが指定できるようになっている。おそらくSSR対応するのだろう。

1.2と1.3のスキーマを見ればなんとなく移行するのだろうなーと感じる。
https://github.com/angular/angular-cli/blob/1.2.x/packages/@angular/cli/lib/config/schema.json
https://github.com/angular/angular-cli/blob/1.3.x/packages/%40angular/cli/lib/config/schema.json

angular-cliのリリーススケジュールみたいなのがどこにあるのか分からない。そのうちrcが外れて正式版になるのだろうな。
Releases · angular/angular-cli

作ってみたけど

同じ事だけど→https://medium.com/@feloy/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5を参考にして作ってみた。

作成方法も全く同じにしたつもりだったが、「ng build -aot」がエラーで動かない。

angularのissueに乗ってたけど、まだだめっぽい??
aotは事前コンパイルなので、妥協しても良いかなと考えてる。ちなみに「ng build」は動く

build後、node index.jsを実行しdistディレクトリのindex.htmlを確認してみるときちんとSSRされたソースが出力されていた。apache上で動かしてみたが問題ないようだった。

ちょっと辞めておこうと

angular-cli標準ではng serveコマンドを実行しておけばソースの変更後、ビルド、再表示してくれる。便利。
しかしSSRの場合はソースの修正、build、WEBにアップ、確認と作業が増える。これを自動化しないと作業効率が悪い。
ちなみにbuild時間は約2秒。プログラムはng new した1ページのサイトだがコンポーネントが増えた場合、どうなるのかしら。

また、debugできない事が辛い。angularを使っていて楽だなと思った一つにdebugが容易。
SSRにしてしまうと開発環境の外で実行するためdebugができないのではないかと。
やり方が間違っているのか知識が足りないのか。とりあえず、まだSSRは適用しないかなーと思う今日このごろ。

rc版だしね

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告