Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

puku0x
October 17, 2020

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

puku0x

October 17, 2020
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. @puku0x 仕組み • Angularアプリケーションを Puppeteer で実行 ◦ HttpClient等の通信完了を確認して出力 ◦ PLATFORM_IDが常にブラウザー

    • 実行時はプリレンダされたHTML → 読み込み完了で Angularアプリケーションに置き換わる 6
  2. $ ng new my-app --routing $ cd my-app $ ng

    add @scullyio/init インストール 7
  3. import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig

    = { projectRoot: './src', projectName: my-app, outDir: './dist/static', routes: { … }, defaultPostRenderers: [], }; 設定ファイル 9
  4. export const config: ScullyConfig = { routes: { '/users/:userId': {

    type: 'json', userId: { url: 'https://jsonplaceholder.typicode.com/users', property: 'id', }, }, }, }; 動的コンテンツのプリレンダ 10
  5. export const config: ScullyConfig = { routes: { '/blog/:slug': {

    type: 'contentFolder', slug: { folder: './blog, }, }, }, }; ファイルからページ生成 11
  6. 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
  7. $ 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
  8. import { setPluginConfig } from '@scullyio/scully'; import { MarkedConfig }

    from '@scullyio/scully/lib/fileHanderPlugins/markdown'; setPluginConfig<MarkedConfig>('md', { enableSyntaxHighlighting: true, }); シンタックスハイライト 15
  9. import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig

    = { … defaultPostRenderers: ['seoHrefOptimise'], }; リンクに末尾スラッシュ追加 16
  10. $ 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], };
  11. $ 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], };
  12. import { registerPlugin } from '@scullyio/scully'; export const customPlugin =

    'customPlugin'; const plugin = async (html: string): Promise<string> => { // レンダリングする文字列(HTML)を返す return html; }; registerPlugin('render', customPlugin, plugin); カスタムプラグイン 20
  13. 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