Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JAMstackは眠らない

1,620 views

Published on

パフォーマンス・保守性・セキュリティ・稼働率など様々な要素を最適化しなければならないサイト構築と運用。旧態依然のAMPアーキテクチャでは限界です。そこで登場したのがSSG(Static Site Generator)であり、さらにそれをリファインしたJAMstackです。
まさに旧来のアーキテクチャからのパラダイムシフトとも言えます。
各種デプロイサービスやバックエンド用のAPIベースのCMSも合わせてご紹介します。

Published in: Internet
  • ReactやVueでbuildしたサイトも基本的には静的サイトになりますが必ずしもここでいうJAMstackという構造にはなりません。 JAMstackはDB Serverとの連携が必要な従来のCMSに対する改善案として「テンプレートをベースにサイトをコンパイルする」という発想です。 コンテンツまで完全に静的に展開するか、あるいはコンテンツは動的にHeadless CMSからAPIで取り込むかは実装に依存します。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

JAMstackは眠らない

  1. 1. JAMstackは眠らない (まだAMPスタックで消耗してますか?) 2018-07-19 at 三木会 刀祢邦芳(Tone, Kuniyoshi)
  2. 2. DB補完計画 (DBの死と新生) あるいは 脆弱性虐殺器官 CMSをDBの呪縛から解放する というタイトルも考えていました
  3. 3. 自己紹介(1) var me = { “Name”: “刀祢 邦芳(Tone, Kuniyoshi)”, “Facebook”: “https://www.facebook.com/kunichan2010”, “GitHub”: “kunichan2013”, “BirthYear”: 1950, “Born In”: “Osaka”, “Work History”: [“製造業IT部門”, “商社系SI”, “外資系ベンダー”,”銀行系IT”] } 3
  4. 4. 自己紹介(2) ● 仕事で使うもの・使いたいもの ○ Tableau ○ Power BI ○ Pentaho (Spoon) ○ サーバー/NW/Log/DB モニタリング ■ Elasticsearch + Kibana, Veeam ONE, Zabbix, Splunk, Redgate SQL Monitor ○ PHPRunner ○ WinAutomation, RPA Express ○ SQL Server / SSAS, SSRS ○ Moodle 4
  5. 5. 遍歴 CMS ● HTML editor + FTP ● Zope (Plone) ● Nucleus ● Xoops ● WordPress ● Drupal ● Pulse CMS Static Site Generator ● Hugo ● Gatsby 5 言語/フレームワーク ● Powershell ● JavaScript(Node.js) ● Meteor, React, Nuxt, Gatsby ● COBOL, FORTRAN, PL/1 ● マクロアセンブラ (6502, System/370) DBMS ● TOTAL ● IMS DB ● Sybase ● SQL Server ● MySQL
  6. 6. アジェンダ ● 予備知識 ● AMPスタックで苦労していませんか? ● SSGを使おう! ● JAMstackの登場 ● コンテンツはどこに置く? ○ GraphCMS ● 公開サーバーはどうする? ○ Netlify ● 開発環境は? ○ Gatsby, Nuxt.js ● デモ ● まとめ 6
  7. 7. 予備知識 ● Web技術のトレンド ● 最近のJavascriptの書き方 など 7
  8. 8. Web技術のトレンドキーワード ● ES6 ● React ● Vue.js ● GraphQL ● SPA ● SSR ● PWA ● JAMstack ● HTML5.3 ● Web Assembly ● Universal/Isomorphic JavaScript ● Web Components ● Webpack4 8 Qiita内検索 ヒット 件数 タグ 件数 ES6 4108 694 React 5657 1553 Vue.js 2410 1587 GraphQL 296 146 SPA 1442 154 SSR 345 20 PWA 291 114 JAMstack 10 5
  9. 9. ES6(ECMAScript2015)の予備知識 ● 概要(チートシート) ○ https://qiita.com/soarflat/items/b251caf9cb59b72beb9b ● 目新しい表現 ○ アロー関数:const fn = (a, b) => a + b; ■ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions ○ テンプレート文字列: `Hello {$n}` // バッククオート(Shift+@)で囲む ■ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings ○ タグ付きテンプレートリテラル:sql`select * from table1` // sqlは関数名 ■ https://qiita.com/kura07/items/c9fa858870ad56dfec12 ○ スプレッド構文: ...a ■ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_synt ax ● 現在多くのJavaScriptツールやフレームワークはES6ベースで記述され、ES5でも 実行できるようにトランスパイルされ、さらに不足する機能はpolyfillライブラリが補 完して実行される 9 European Computer Manufacturers Association ES 6th edition // 文字列は引数
  10. 10. SPA(Single Page Application)とは ● 以下のサイトを参考に概要説明します http://www.atmarkit.co.jp/ait/articles/1702/22/news012.html ● RIA(Rich Internet Application)をFlashやSilverlightなどのベンダー依存・ブラウザ依存の技術を 使わずに実装 ○ WebpackなどのJSモジュールバンドラの進歩によりサーバーとクライアントで同じ JSコードが 実行できるようになり実現可能になった 10 ● 最初にWebサーバーの特定URLからダウンロード された単一のページ (Single Page)からの画面遷移 はすべてページの一部の DOMの書き換えによって 実現する ○ これによりサーバーとの通信量が削減され遷 移が速くなる ○ 遷移対象のDOMデータをプリロードやバック エンドロードすることでさらに遷移時間が短縮 される ● Webサーバーでの画面生成不要 ○ 別サーバーでコンテンツ管理が可能 =>クライアントにWeb APIを提供 ○ 高速で冗長性の高い CDNをWebサーバーと して利用できる
  11. 11. SPAの拡大図 11 昔のAJAXはXMLを渡していた
  12. 12. SSR(Server Side Rendering)とは ● SPAはその実装によってはHTMLファイルはJSの読み込みのみで、コンテンツ本 文やSEO用のキーワードが存在しない場合がある ○ サーチエンジンのクローラーはWebサーバーからGETするページしか検索対 象としないのでSEOが実現されない(GooglebotはJSも実行するがブラウザ で表示されるページを100%再現できる保証はない) ○ JSがクライアント側でレンダリングすることによる弊害だが、SEO不要な社内 システムのような場合は問題にはならない ● したがって現在のSPAの実装ではmetaタグや静的なコンテンツなどの初期データ をサーバー側で事前にレンダリングした状態でHTMLファイルを保存しておくもの が増えている。=>後述のSSGにつながる ○ Next.js:React.jsのサイトをSSR ○ Nuxt.js:Vue.jsのサイトをSSR ○ Gatsby:CMS内の動的コンテンツまで含めてすべてをSSRする ● 当然、AMPスタックはSSRなのでSEOについては合格だが、SSRのより狭義の定 義「クライアントとサーバーで同じロジックでHTMLをレンダリングする」というものに は当てはまらない。 ● 参考:https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html 12
  13. 13. PWA(Progressive Web App)とは ● 参考 ○ https://service.plan-b.co.jp/blog/seo/2890/ ○ https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20 ● 要するに殆どネイティブなアプリがモバイル端末で実行できる ○ カメラ、位置情報、センサーにもアクセス可能 ● ChromeブラウザがあればPC, Macでもデスクトップアプリのように動 作。さらにオフライン実行とオンライン後の同期なども ● 開発環境はNode.js + 開発用フレームワーク(React NativeやElectron) でOK ● JAMStackでの実装 ○ https://medium.com/@UnicornAgency/jamstack-pwa-lets-build-a-pollin g-app-with-gatsby-js-firebase-and-styled-components-pt-1-78a03a633 092 13
  14. 14. さて本題です 14
  15. 15. ● Apache (or Nginx or IIS) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ SSL証明書管理 ● MySQL(or PostgreSQL) ○ バックアップ、変更履歴、チューニング、バージョンアップ ● PHP(or Ruby on Rails) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ サーバー側アプリ管理 ● インフラ(クラウド使えば少し楽だが) ○ 開発環境=>ステージング=>本番環境 ○ 障害監視 ○ スケーリング&キャパシティプランニング 楽して トラブルなく 運用できない か? AMPスタックで苦労していませんか? 15
  16. 16. SSG(Static Site Generator) を使おう! そもそも昔は静的サイトしかなかったが・・・・ 歴史は繰り返す 16
  17. 17. SSG概念図 17 https://medium.com/dailyjs/how-to-choose-the-best-static-site-generator-in-2018-98bff61c8184 より引用
  18. 18. SSGとは ● SSGはコンテンツの種類に応じたレイアウトを適用して公開用の静的なHTMLファイル を生成する(オープンソースのDreamweaver?) ● 代表的なものは ○ Hugo ○ Jekyll ○ Gatsby  その他:https://www.staticgen.com/ 参照 ● 上記の内Gatsby以外はURLと同じフォルダ構造を展開してその中の静的HTMLをWeb サーバーがその都度読み込んで表示する =>昔風の手作りのサイトと同じ => SPAではない! ● 公開サイトはWebサーバーだけあればよい ○ CMSやDBの脆弱性からの解放 ○ サーバー側プログラムが不要なのでCPU負荷低減 ○ CDNが利用できるので効率・稼働率・スケーラビリティが向上 ● 開発環境はクラウドでもローカルPCでも可能 ● 欠点 ○ 全文検索、動的フォームやDB連携が難しい =>最近はこれらのAPIを提供するサービスが拡充しつつある ○ 静的HTMLなのでSSRではあるがSPAとは限らない(GatsbyはOK) 18
  19. 19. Dreamweaverでもよいのでは? ● テンプレート機能が非効率 ○ サーバーサイドで動くSSGの方が効率的 ● SPAやPWAは生成できない ○ 従って実行時も非効率(これはGatsby以外のSSGも同 じ) ● Adobe CCに囲い込まれる ○ 2180円/月額 ○ 機能拡張はAdobeにお任せ ● でも、レスポンシブでかっこいいサイトが簡単にデザインでき るのは捨てがたいが・・・ 19
  20. 20. WordPressでもSSGできるのでは? ● はい、WPでもSSGはできます。しかし、これはWPの脆弱性 を補うための後付けの発想なので大規模サイトには向かな いなど種々の制約があります。 ● 老舗のMovable Typeは基本設計がSSGです。ただし、最 新版は商用製品(旧バージョンはGithub公開)なので自力 でカスタマイズできません。 ● 今ブームなのは最初からSSGとして開発されたオープン ソースのSSGです。 20
  21. 21. キャッシュサーバーやCDNで十分では? ● ブラウザとサーバーの中間に入るリバースプロキシ型のキャッシュサー バー ○ 各ページの初回ロードは遅い ○ ページ更新後のキャッシュの即時完全無効化が難しい? ○ INDEXページ内の静的リンクから芋づる式にリンクをたどり関連ページ を事前キャッシュする方式もあるが完全にはできない ● CDN(Contents Delivery Network) ○ 分散したエッジザーバーに静的ファイルを配置するのが基本 ○ 動的サイト内からの画像・動画コンテンツの参照などには有効 ○ もっとも効果的なのは静的サイトを配置した場合 21
  22. 22. そこでJAMstackの登場です 一言で言えば SSG by JS + API ↓ Gatsby + Netlify + GraphCMS でお悩み解消 です 22
  23. 23. https://jamstack.org/ 23 和訳  https://qiita.com/nori-k/items/1e789651ec154fdd8bd8
  24. 24. What is JAM? JAM stands for Javascript API & Markup. The term JAMstack was popularised by Mathias Biilmann (CEO & Co-founder of Netlify) to describe “a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”. (https://medium.com/netlify/jamstack-with-gatsby-netlify-and-netlify-cms-a300735e2c 5d から引用) すなわち、 24 No Yes J Java or PHP in AP server JS+HTML+CSS in Browser A Apache in Web Server API for Server Process M MySQL in DB Server Markup prebuilt
  25. 25. JAMstack のアーキテクチャ 25 ● JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework / library (e.g. React, Angular, Vue) ● APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services. ● Markup: Templated markup should be prebuilt at deploy time, usually using a site generator for content sites (e.g. Jekyll, Hugo) or a build tool (e.g. Gulp, Grunt) for web apps. https://www.lifeintech.com/2017/12/20/jamstack/ から引用
  26. 26. What is not JAMstack? 26 ● AMPアーキテクチャ ○ WordPress ○ Drupal ● Ruby on Rails ● Node.js サーバーによるレンダリングやルーティング ○ Vulcan(http://vulcanjs.org ) Meteor + React+GraphQL のフルスタックフレーム ワーク! ● Java + Tomcat ● ASP.NET ★すべてはMonolithic Architecture
  27. 27. Best Practice of JAMstack ● Entire Project on a CDN ○ プロジェクト全体をCDNに公開し圧倒的なスピードを実現する ● Everything Lives in Git ○ Gitを使ってプロジェクトを共有・開発・公開する ● Modern Build Tools ○ Babel, PostCSS, Webpackなどのモダンなビルドツールを用いて最新のWeb標準に対応 した機能を既存のブラウザで実現する ● Automated Builds ○ GitやCMSの更新をトリガーに公開コンテンツを自動的にビルドする ● Atomic Deploys ○ ビルドされたコンテンツは全ての更新後のファイルのデプロイが完了するまで公開されない ようにし、どの時点でサイトを閲覧しても不整合がないようにする ● Instant Cache Invalidation ○ サイト更新のデプロイ完了と同時に古いサイトのキャッシュを即座に無効にする機能が CDNには必要 (参照:https://jamstack.org/best-practices/ ) 27
  28. 28. JAMstackのまとめ・利点 28 ● 自前のWebサーバー、APサーバー(PHP, RoR, Nodejsな ど)、DBサーバーが不要なためこれらの運用、チューニン グ、スケーリングなどの費用工数が不要 ● 構成要素は ● SSG anywhere (PC or Cloud) ● Amazon LambdaなどでServerlessも可能 ● CMS API ● CDN as HTTPSサーバー ● JS on Browser ● PWAが開発できる ● Lighthouse スコアの向上(TTFBの短縮などで)
  29. 29. Lighthouseとは ● Google 謹製 https://github.com/GoogleChrome/lighthouse ● Made by WordPress? ○ https://www.insight-tec.com/ 301 point ● Made by Gatsby ○ https://reactjs.org/ 394 point ○ https://www.quantumblack.com/ 447 point ● 参考 https://qiita.com/kzbandai/items/ebc2bd2071acc1c36800 29
  30. 30. JAMstackの改善効果 ● $5000/Month⇒$5/Monに ○ https://www.gatsbyjs.org/blog/2018-06-14-escalade-sports-from-5000- to-5-in-hosting/ ● パフォーマンスが3.76倍 https://twitter.com/Ironcove/status/1015389488187469825 ● 小規模なWebならほぼ無償で公開可能 ○ しかもBeautiful & Fast & Safe ○ Netlify:「10MB以上のダウンロード可能なファイルの公開や単なるファイル ストレージとしての利用」以外であればFreeプランでも容量や転送量制限 なし=>常識的なサイトなら何万ページでも公開無料(ただし商用・企業用 サイトは有償) ○ GraphCMS ■ (API使用1万回 or データ転送量1GB)/月無料 ■ (API使用10万回 or データ転送量10GB)/月 $29/月 30
  31. 31. さて、コンテンツはどこに置く? 31
  32. 32. CMSはどこで動かす? ● 既存のCMSサーバー ○ WordPress, Drupal などはAPIを提供 ● ファイルシステム ○ Gatsbyなどはフォルダー、ファイルアクセスのAPI提供 ● CMS APIサービス(別名:Headless CMS) ○ Netlify CMS(https://www.netlifycms.org ) ○ GraphCMS <=わかりやすいので今回はこれを説明 ○ Contentfull(https://www.contentful.com ) ○ Forestry(https://forestry.io ) for Jekyll, Hugo ○ DatoCMS(https://www.datocms.com ) ○ 参照: https://headlesscms.org/ 32
  33. 33. GraphCMSとは ● 本家: https://graphcms.com/ ● Web UIまたはAPIを用いてProjectを定義しその中で以下を 実現 ○ Schema定義(Content Model定義) ■ ArrayやRelationshipを定義可能 ■ スキーマ付きのMongoDBに相当 ○ CRUD操作 ○ 静的Assetの保存・参照 ● APIはGraphQL ● 本日のデモ用コンテンツを閲覧 33
  34. 34. GraphQLとは ● SQL(Structured Query Langage)よりも構造化されたクエ リー言語 by Facebook since 2012 ● GQL by Google とは別物 ● Graph Database in MS SQLとも別物 ● Graph DB by Neo4jとも別物 ● 詳しくは ○ https://www.howtographql.com/ ○ http://graphql.org/learn/ 34
  35. 35. JSONを用いたRESTとの違い ● https://www.slideshare.net/atsu666/rest-graphql-75297436 参照 ● RESTの欠点 ○ パフォーマンスが悪い ○ 必要なデータだけ取得しにくい ○ 処理内容を1行のURIに埋め込むのでわかりにくい (例)https://localhost/event/?keyword="日本"&embed=comments&count=5 ● GraphQLによる解決 ○ 固定のURIをPOSTしJSのObject風のschemaを渡す ○ Schemaではqueryまたはmutationの処理を記述 ○ 検索条件やフォーマット変換もschemaの中で記述 35 query GatsbyImageSampleQuery { file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) { childImageSharp { resolutions(width: 125, height: 125) { GatsbyImageSharpResolutions } } } }
  36. 36. 公開サーバーはどうする? 36
  37. 37. Deployサービス ● Netlify:https://www.netlify.com/ ● Surge:https://surge.sh/ ● Now : https://zeit.co/ ● WeDeploy:https://wedeploy.com/ ● 以上はいずれも従来からのGoogle FirebaseやHerokuより もデプロイは簡単 37
  38. 38. Deployサービスのメリット ● 恐らくAkamaiとかFastlyを使っているのでこういうことは避けられる。 (もちろんAWSやAzure使ってても大丈夫) 38
  39. 39. Netlifyとは ● 自動build & deployが可能 ○ Guthubリポジトリに開発環境をpushしそのリポジトリをNetlifyにリンクする と以降はpushするたびに自動的にbuild & deployされる ○ Webhooksをトリガーにすることも可能なので他のCMSがwebhooksをサ ポートしていれば連動可能 ● AWSのLambda関数を使用するServerless処理が可能 ○ https://www.netlify.com/blog/2018/03/20/netlifys-aws-lambda-functions -bring-the-backend-to-your-frontend-workflow/ ○ https://blog.craftz.dog/aws-lambdaで静的サイトにメール送信フォームを 作る簡単な方法-de8cba5e50a5 ● httpsも無料で簡単 ● しかも小規模であれば無料(でも数万ページのサイトは公開可能) ● メンバー制サイトのためのLogin機能もサポート(無料で1000ユーザー) ● フォーム入力もサポート(無料で月間100件まで受付) 39
  40. 40. 開発環境は? Gatsbyを使ってクラウドまたはローカルPCで開発 デプロイサービスにデプロイ 40
  41. 41. What is Gatsby?(1) ● 今注目のSSG+SPA+PWAツール ○ Reactベースだが複雑な設定なしでJSだけでこれらを実現 ● 本家:https://www.gatsbyjs.com ○ Author: Kyle Mathews in San Francisco ○ 2018/7/15 現在 ■ Github Stars: 23382 ■ npm total downloads: 351万件 ● News:https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-co mpany/ ○ 「We were lucky to find some great investors ....... to back us with $3.8M in seed funding.」 ○ https://thenewstack.io/gatsbyjs-the-open-source-react-based-ssg-crea tes-company-to-evolve-cloud-native-website-builds/ 41
  42. 42. What is Gatsby?(2) ● メリット:https://www.raygesualdo.com/posts/six-reasons-i-chose-gatsby/ ● GraphQLでデータソースにアクセス ● HTML, CSSをJS構文の中で記述 ○ Reactのコンセプト:最近はjsx拡張子使わないのが主流? ○ BabelがHTML要素をReact.createElement(HTMLのタグ名,要素の属性,要 素の内容)に変換する ○ CSS-in-JS(CSSをUIと一体化する) ■ https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 ■ 「CSS Modules」がReactには標準装備、JSの中で <div style="maxWidth: 600; maxHeights: 400 "></div> でなく <div style={{ maxWidth: 600, maxHeights: 400 }}></div>と記述する ● 参考 ○ https://medium.com/eureka-engineering/how-gatsby-works-bec4349caa12 ○ https://www.infoq.com/jp/news/2017/07/gatsby-kyle-mathews-interview ○ https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/ 42
  43. 43. GatsbyのカバーするWeb技術 ● React ● GraphQL ● SPA ● SSR ● PWA ● Webpack4 43
  44. 44. Gatsbyのインストレーション ● 前提はNode.jsとgit ● npm install --global gatsby-cli で完了 ● gatsby new フォルダ名 StarterのURL でStarterのテンプレートに従った開発用フォルダが作成さ れる 例) gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-world ● Windowsでの環境設定の注意 ○ https://www.gatsbyjs.org/docs/gatsby-on-windows/ 44
  45. 45. Gatsbyのフォルダ構成 ● src/pages ○ ページコンテンツ ● src/layouts ○ ページレイアウト(ただし、V2ではcomponentsに吸収さ れる) ● src/templates ○ 表示ブロックのテンプレート ● src/components ○ 表示データやUI部品のクラス定義 ● public ○ 生成された静的コンテンツ ● static ○ 静的なファイル(画像、動画など) 45
  46. 46. Gatsbyのアーキテクチャ 46 <= https://www.gatsbyjs.org/ より PRPLパターン ● Push critical resources for the initial URL route ● Render initial route. ● Pre-cache remaining routes. ● Lazy-load and create remaining routes on 参照 https://developers.google.com/web/fundamentals/pe rformance/prpl-pattern/
  47. 47. GatsbyのGraphQL API 47 import React from "react"; export default ({ data }) => ( <div> <h1>About {data.site.siteMetadata.title}</h1> <p>We're a very cool website you should return to often.</p> </div> ); export const query = graphql` query AboutQuery { site { siteMetadata { title } } } `; GraphQLのクエリーの結果が Reactのdataプロパティにバイ ンドされる
  48. 48. Gatsbyのプラグイン ● Sourceプラグイン ○ 表示すべきデータソースにアクセスする ■ filesystem, wordpress, drupal, contentful, graphcms etc. ● Transformationプラグイン ○ データソースを必要な形式に変換する ■ markdown, json, csv, excel, pdf etc. 48
  49. 49. Gatsby デモサイト 49 https://www.gatsbyjs.org/docs/gatsby-starters/ に多くのStarterとデモが紹介されて いる ● Blog with Grid & Pagination & 全文検索 & メール送信フォーム ソース:https://github.com/wonism/gatsby-advanced-blog デモ:https://wonism.github.io/categories/JavaScript/1 ● マニュアル閲覧(目次と本文の2カラム) ソース:https://github.com/ericwindmill/gatsby-starter-docs デモ:https://gatsby-docs-starter.netlify.com/ ● 企業サイト ソース:https://github.com/v4iv/gatsby-starter-business デモ:https://gatsby-starter-business.netlify.com/ ● WordPressでコンテンツ管理 ソース:https://github.com/ericwindmill/gatsby-starter-wordpress ● ログインして編集 ソース:https://github.com/danielmahon/gatsby-starter-procyon デモ:https://gatsby-starter-procyon.netlify.com/
  50. 50. eコマースも実装可能 ● APIベースのECサービス ○ Snipcart https://snipcart.com/blog/snipcart-reactjs-static-ecommerce-gatsby ○ Moltin https://moltin.com/ ○ ● 実装サンプル ○ Nuxt.js and Snipcart https://www.sanity.io/blog/e-commerce-vue-nuxt-snipcart ○ Gatsby and Moltin ■ https://parmsang.github.io/gatsby-starter-ecommerce/ ■ https://github.com/parmsang/gatsby-starter-ecommerce Source ● Gatsby E-Commerce Tutorial https://www.gatsbyjs.org/docs/ecommerce-tutorial/ ● Creating a static e-commerce website with Snipcart, GatsbyJS and DatoCMS https://www.datocms.com/blog/static-ecommerce-website-snipcart-gatsbyjs-datocms/?utm_sour ce=DatoCMS+Subscribers&utm_campaign=6ef6b472b0-EMAIL_CAMPAIGN_2018_06_14_02_ 43_COPY_01&utm_medium=email&utm_term=0_89c6a6a92b-6ef6b472b0-147714614 50
  51. 51. ようやくデモの始まりです 51
  52. 52. デモ環境 ● AWS Cloud9でCloud to Cloud開発 ○ インスタンスの停止忘れなし ○ Elastic IP不要(インスタンス停止時での課金なし) ○ ngrokでトンネリングすればlocalhostの任意のポートに リモートアクセス可能(小規模なら無料) ● Netlifyでデプロイ ● CMSはGraphCMS 52
  53. 53. AWS Cloud9とは ● 以前はhttps://c9.io/login と言うサービスだったがAWSに吸収 され https://aws.amazon.com/jp/cloud9/ となった。 ● 料金は稼働に必要なEC2インスタンス関連料金のみでCloud9 としての追加料金は不要 ● モダンブラウザで使えるIDE(デバッガ付き) ○ sshやhttpdのセットアップ不要 ○ sudo使用可 ● PHP,Python,Node.js,C/C++,Perl,Java,Ruby,Go,git,docker, mysqld,Apacheインストール済(バージョンは少し古い?) ● AWS Lambda開発用のSDKなどもインストール済 ● 公開ポートが8080のみなのが若干不便=>ngrokで解決 ● 紹介記事:https://www.sejuku.net/blog/385/ 53
  54. 54. ngrokとは ● 本家:https://ngrok.com/ ● ホスト内の任意のhttpのポートをngrok.io経由でインターネットにトン ネリング(ポートフォワーディング) ○ 同時にhttpsでも公開される ○ 4040ポートでhttpリクエストのトレースがブラウザで可能 ● 任意のTCPポートもトンネリング可能 ● 無料版:1つのトンネルを4ユーザまでアクセス可能 ● Pro版($10/月):2つのトンネルを1つあたり12ユーザまでアクセス可 能=>この場合上記の4040ポートを別途トンネリングしてアクセスでき るのでCloud9でもトレース機能が使える (この費用の方がAWSよりも高くつくかも・・・) 54
  55. 55. デモ(1):GatsbyでPCからデプロイ ● LocalのPCでデフォルトの新規プロジェクト作成 gatsby new tth-demo cd tth-demo gatsby develop ● Live Reloadのデモ ○ ページ編集が即座にhttp://localhost:8000 に反映 ● ビルドして静的サイト作成 gatsby build gatsby serve ● Netlifyへデプロイ cd public netlify deploy 55
  56. 56. デモ(2):Markdownでブログ作成 ● Cloud9でgatsby-starter-blogから新規プロジェクト作成 gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog cd gatsby-blog gatsby develop ngrok http 8080 ngrok http 4040 (HTTPトレース) ● src/pagesのブログのmdファイルを修正 ○ ページリフレッシュして内容を確認 ● Ctrl-Cでサイトを停止 ○ SPA+SSGなのでサイト内の遷移はエラーにならない ○ 外部サイトから戻るとエラー 56
  57. 57. デモ(3):GraphCMS + Nuxt.js ● Nuxt.js (https://ja.nuxtjs.org/ ) + GraphCMSのサンプルを https://github.com/GraphCMS/graphcms-examples にあるサンプル集からク ローン git clone https://github.com/GraphCMS/graphcms-examples.git cd graphcms-examples/legacy/nuxt-apollo-blog yarn  でインストール ● 静的サイト生成 yarn build ● Netlifyの特定ドメインにデプロイ cd dist netlify deploy -s lucid-jones-b217f7 => https://www.jamstack.work 57
  58. 58. 最後に・・ 58
  59. 59. Gatsbyを中心とするソリューションの比較 ● 参照:https://www.gatsbyjs.org/features/#introduction 59
  60. 60. JAMstackでは難しい? ● ユーザーのロールに応じた権限とビューの実装は困難 ○ ロールに応じたビューをすべて生成? ○ APIにロールを含める? ● 複数ユーザがWeb画面で管理するサイト(Drupalなど) ○ JAMstackでもコンテンツ管理だけなら共同作業可能だが画面レイアウトやテー マなどを複数人で管理するのは難しい ● LMS(Moodleなど) ○ 多数の一般ユーザが複雑なDBを更新する ● ブラウザ以外とのリアルタイム通信&画面更新 ○ IoTにおける多数の機器からの大量データはクライアントからのAPI呼び出しで は処理しきれない => パワフルなサーバーが必要 ● Banking Onlineなどの厳密なトランザクション管理は難しそうに見えるが、入出金・振 替などのAPIを提供するサービスがあればそちらに任せられるのでJAMstackでの実 装は可能 60
  61. 61. もっと簡単にJAMstack開発? ● K5 Playground ○ http://jp.fujitsu.com/solutions/cloud/k5/playground/de veloper/ ○ 基本は法人向けサービス ● ただしデプロイは富士通の有料のPaaSサービス (CF:Cloud Foundryベースのサービス)にのみに可能 ● SPAではあるが実行時のロジックがクライアント側とサー バー側に分離されているので「Entire Project on a CDN」と いうJAMstackの概念からは外れている 61
  62. 62. 発展系はDecentralized!? ● https://essentia.one/ ● 62
  63. 63. ● SSG人気番付 ○ https://www.staticgen.com  ● Stay Static ○ http://staystatic.github.io ● 主要SSG比較 ○ http://qiita.com/tamano/items/d3be25027c9b80bbfb7a ● Back to static with JAMStack ○ https://blog.dareboost.com/en/2018/02/static-website-web-performance/ ● Making a Static Website with Gatsby, Contentful, and Netlify ○ https://medium.com/@erkkapynnonen/c7372798fda ● WordPress Source Plugin Tutorial ○ https://www.gatsbyjs.org/docs/wordpress-source-plugin-tutorial/ ● Get a Progressive Web App Running in Just 20 Minutes! ○ https://rollout.io/blog/progressive-web-app-running-20-minutes/ 関連・参考リンク 63
  64. 64. END 64

×