Angularの静的サイトジェネレーター「Scully」の最新情報

Transcript

1. Angularの静的サイトジェネレーター 「Scully」の最新情報 GDG DevFest 2020 @puku0x Noriyuki Shinpuku
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は...? 4
5. @puku0x Scully • Angular用のSSG（静的サイトジェネレータ） 5 https://scully.io/ 9月にv1.0.0 リリース
6. @puku0x 仕組み • Angularアプリケーションを Puppeteer で実行 ◦ HttpClient等の通信完了を確認して出力 ◦ PLATFORM_IDが常にブラウザー • 実行時はプリレンダされたHTML → 読み込み完了で Angularアプリケーションに置き換わる 6
7. $ ng new my-app --routing $ cd my-app $ ng add @scullyio/init インストール 7
8. $ ng g @scullyio/init:blog $ ng g @scullyio/init:post --name="New Post" ブログ作成 8
9. import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { projectRoot: './src', projectName: my-app, outDir: './dist/static', routes: { … }, defaultPostRenderers: [], }; 設定ファイル 9
10. export const config: ScullyConfig = { routes: { '/users/:userId': { type: 'json', userId: { url: 'https://jsonplaceholder.typicode.com/users', property: 'id', }, }, }, }; 動的コンテンツのプリレンダ 10
11. export const config: ScullyConfig = { routes: { '/blog/:slug': { type: 'contentFolder', slug: { folder: './blog, }, }, }, }; ファイルからページ生成 11
12. constructor(private srs: ScullyRoutesService) {} post$ = this.srs.getCurrent().pipe( map((route: ScullyRoute) => ({ title: route.title || route.route, description: route.description, slug: route.slug, })), shareReplay(1) ); ScullyRoutesService 12
13. $ ng build --prod $ npx scully --RSD --scan --prod $ npm run scully:serve Angular distribution server started on “http://localhost:1864/” Scully static server started on “http://localhost:1668/” 実行 13
14. $ ng build --watch 開発 14 $ npx scully --watch
15. import { setPluginConfig } from '@scullyio/scully'; import { MarkedConfig } from '@scullyio/scully/lib/fileHanderPlugins/markdown'; setPluginConfig<MarkedConfig>('md', { enableSyntaxHighlighting: true, }); シンタックスハイライト 15
16. import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { … defaultPostRenderers: ['seoHrefOptimise'], }; リンクに末尾スラッシュ追加 16
17. $ npm i -D @scullyio/plugins-scully-plugin-remove-scripts $ ng build --prod <script>タグ削除 17 import { ScullyConfig, setPluginConfig } from '@scullyio/scully'; import { removeScripts, RemoveScriptsConfig } from '@scullyio/plugins-scully-plugin-remove-scripts'; setPluginConfig<RemoveScriptsConfig>(removeScripts, { keepTransferstate: false }); export const config: ScullyConfig = { defaultPostRenderers: [removeScripts], };
18. $ npm i -D @scullyio/scully-plugin-critical-css 不要なCSS削除 18 import { ScullyConfig } from '@scullyio/scully'; import { criticalCSS } from '@scullyio/scully-plugin-critical-css'; export const config: ScullyConfig = { defaultPostRenderers: [criticalCSS], };
19. @puku0x PWA化 • @angular/service-workerとの組み合わせに課題 ◦ https://github.com/scullyio/scully/issues/529 ◦ https://github.com/angular/angular/issues/16051 • Workbox等の利用を推奨 19
20. import { registerPlugin } from '@scullyio/scully'; export const customPlugin = 'customPlugin'; const plugin = async (html: string): Promise<string> => { // レンダリングする文字列（HTML）を返す return html; }; registerPlugin('render', customPlugin, plugin); カスタムプラグイン 20
21. const plugin = async (html: string): Promise<string> => { const workboxScript = ` <script defer scullyKeep> (function() { if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register(service-worker.js'); }); } })(); </script>`; return html.replace(/<\/head/i, `${workboxScript}</head`); }; registerPlugin('render', workboxPlugin, plugin); 21
22. @puku0x 22 https://github.com/puku0x/puku0x.net
23. @puku0x 23
24. @puku0x Scullyの今後 • ドキュメント拡充 • プラグイン追加 ◦ https://github.com/scullyio/scully/tree/main/libs/plugins • Angular以外も対応予定？ 24
25. @puku0x まとめ • Scullyを使うと簡単にSSGを導入できる ◦ 既存の資産が活かせる ◦ エコシステム拡充中 ◦ https://scully.io/ 25
26. @puku0x 26 https://www.vega-c.com/recruit/
27. Thank you! @puku0x Noriyuki Shinpuku