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

Scully: Angular SSG

puku0x
August 19, 2020

Scully: Angular SSG

puku0x

August 19, 2020
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Scully: Angular SSG
    ng-japan OnAir #23

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. @puku0x 5
    https://scully.io/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. import { ScullyConfig } from '@scullyio/scully';
    export const config: ScullyConfig = {

    defaultPostRenderers: ['seoHrefOptimise'],
    };
    リンクに末尾スラッシュ追加
    13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. @puku0x 19
    https://www.vega-c.com/recruit/
    採用のお知らせ

    View full-size slide

  20. @puku0x
    Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide