Scully: Angular SSG

Transcript

1. Scully: Angular SSG ng-japan OnAir #23
2. Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2
3. @puku0x SSG流行ってる 3 Gridsome VuePress Nuxt.js Next.js Gatsby
4. @puku0x （Angularで）SSGやりたみ... 4 Gridsome VuePress Nuxt.js Next.js Gatsby
5. @puku0x 5 https://scully.io/
6. @puku0x Scully • Angular用のSSG（静的サイトジェネレータ） • ところで何て発音するの？ ◦ スクーリー、スクリー、スカリー （聞く限りではいろいろ） 6
7. @puku0x 仕組み • Angularアプリケーションを Puppeteer で実行 ◦ HttpClientなどの通信の完了を確認して出力 ◦ PLATFORM_IDは常にブラウザー • 実行時はプリレンダされたHTML → 読み込み完了で Angularアプリケーションに置き換わる 7
8. $ ng new my-app --routing $ cd my-app $ ng add @scullyio/init インストール 8
9. $ ng generate @scullyio/init:blog ブログ追加 9
10. $ ng build --prod $ npm run scully $ npm run scully:serve Angular distribution server started on “http://localhost:1864/” Scully static server started on “http://localhost:1668/” 実行 10
11. $ npm run build -- --watch 開発 11 $ npm run scully -- --watch
12. import { setPluginConfig } from '@scullyio/scully'; setPluginConfig('md', { enableSyntaxHighlighting: true }); シンタックスハイライト 12
13. import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { … defaultPostRenderers: ['seoHrefOptimise'], }; リンクに末尾スラッシュ追加 13
14. $ npm i -D scully-plugin-disable-angular $ ng build --prod --statsJson Angular無効化 14 import { ScullyConfig, setPluginConfig } from '@scullyio/scully'; import { DisableAngular } from 'scully-plugin-disable-angular'; setPluginConfig(DisableAngular, 'render', { removeState: true }); export const config: ScullyConfig = { defaultPostRenderers: [DisableAngular], };
15. @puku0x PWA化 • @angular/service-workerとの組み合わせに課題 ◦ https://github.com/scullyio/scully/issues/529 ◦ https://github.com/angular/angular/issues/16051 • 他の方法（Workbox等）での実装を推奨 15
16. @puku0x 16 https://github.com/puku0x/puku0x.net
17. @puku0x Scullyの今後 • ドキュメント更新 • 公式プラグイン拡充 ◦ Google Analytics、LogRocket、Sentry ◦ scully-plugin-disable-angularと似たプラグインも？ • Angular以外も対応予定 17
18. @puku0x まとめ • Scullyを使うと簡単にSSG導入できる ◦ Angular対応なので既存の資産が活かせる ◦ エコシステムはまだ改善の余地あり ◦ ベータ版なので貢献のチャンス！ ◦ https://scully.io/ 18
19. @puku0x 19 https://www.vega-c.com/recruit/ 採用のお知らせ
20. @puku0x Thank you! @puku0x Noriyuki Shinpuku