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

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
October 17, 2020

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

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

October 17, 2020
Tweet

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