Scully: Angular SSG - Speaker Deck

Slide 1

Slide 1 text

Scully: Angular SSG ng-japan OnAir #23

Slide 2

Slide 2 text

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

Slide 3

Slide 3 text

@puku0x SSG流行ってる 3 Gridsome VuePress Nuxt.js Next.js Gatsby

Slide 4

Slide 4 text

@puku0x （Angularで）SSGやりたみ... 4 Gridsome VuePress Nuxt.js Next.js Gatsby

Slide 5

Slide 5 text

@puku0x 5 https://scully.io/

Slide 6

Slide 6 text

@puku0x Scully ● Angular用のSSG（静的サイトジェネレータ） ● ところで何て発音するの？ ○ スクーリー、スクリー、スカリー（聞く限りではいろいろ） 6

Slide 7

Slide 7 text

@puku0x 仕組み ● Angularアプリケーションを Puppeteer で実行 ○ HttpClientなどの通信の完了を確認して出力 ○ PLATFORM_IDは常にブラウザー ● 実行時はプリレンダされたHTML → 読み込み完了で Angularアプリケーションに置き換わる 7

Slide 8

Slide 8 text

$ ng new my-app --routing $ cd my-app $ ng add @scullyio/init インストール 8

Slide 9

Slide 9 text

$ ng generate @scullyio/init:blog ブログ追加 9

Slide 10

Slide 10 text

$ 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

Slide 11

Slide 11 text

$ npm run build -- --watch 開発 11 $ npm run scully -- --watch

Slide 12

Slide 12 text

import { setPluginConﬁg } from '@scullyio/scully'; setPluginConﬁg('md', { enableSyntaxHighlighting: true }); シンタックスハイライト 12

Slide 13

Slide 13 text

import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { … defaultPostRenderers: ['seoHrefOptimise'], }; リンクに末尾スラッシュ追加 13

Slide 14

Slide 14 text

$ 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], };

Slide 15

Slide 15 text

@puku0x PWA化 ● @angular/service-workerとの組み合わせに課題 ○ https://github.com/scullyio/scully/issues/529 ○ https://github.com/angular/angular/issues/16051 ● 他の方法（Workbox等）での実装を推奨 15

Slide 16

Slide 16 text

@puku0x 16 https://github.com/puku0x/puku0x.net

Slide 17

Slide 17 text

@puku0x Scullyの今後 ● ドキュメント更新 ● 公式プラグイン拡充 ○ Google Analytics、LogRocket、Sentry ○ scully-plugin-disable-angularと似たプラグインも？ ● Angular以外も対応予定 17

Slide 18

Slide 18 text

@puku0x まとめ ● Scullyを使うと簡単にSSG導入できる ○ Angular対応なので既存の資産が活かせる ○ エコシステムはまだ改善の余地あり ○ ベータ版なので貢献のチャンス！ ○ https://scully.io/ 18