Kuniyoshi Tone, profile picture
Uploaded byKuniyoshi Tone
PDF, PPTX4,710 views

JAMstackは眠らない

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

Embed presentation

Download as PDF, PPTX
JAMstackは眠らない (まだAMPスタックで消耗してますか？) 2018-07-19 at 三木会 刀祢邦芳(Tone, Kuniyoshi)
DB補完計画 (DBの死と新生) あるいは 脆弱性虐殺器官 CMSをDBの呪縛から解放する というタイトルも考えていました
自己紹介(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
自己紹介(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
遍歴 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
アジェンダ ● 予備知識 ● AMPスタックで苦労していませんか？ ● SSGを使おう！ ● JAMstackの登場 ● コンテンツはどこに置く？ ○ GraphCMS ● 公開サーバーはどうする？ ○ Netlify ● 開発環境は？ ○ Gatsby, Nuxt.js ● デモ ● まとめ 6
予備知識 ● Web技術のトレンド ● 最近のJavascriptの書き方 など 7
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
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 // 文字列は引数
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サーバーと して利用できる
SPAの拡大図 11 昔のAJAXはXMLを渡していた
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
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
● Apache (or Nginx or IIS) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ SSL証明書管理 ● MySQL(or PostgreSQL) ○ バックアップ、変更履歴、チューニング、バージョンアップ ● PHP(or Ruby on Rails) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ サーバー側アプリ管理 ● インフラ（クラウド使えば少し楽だが） ○ 開発環境=>ステージング=>本番環境 ○ 障害監視 ○ スケーリング＆キャパシティプランニング 楽して トラブルなく 運用できない か？ AMPスタックで苦労していませんか？ 15
SSG(Static Site Generator) を使おう！ そもそも昔は静的サイトしかなかったが・・・・ 歴史は繰り返す 16
SSG概念図 17 https://medium.com/dailyjs/how-to-choose-the-best-static-site-generator-in-2018-98bff61c8184 より引用
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
Dreamweaverでもよいのでは？ ● テンプレート機能が非効率 ○ サーバーサイドで動くSSGの方が効率的 ● SPAやPWAは生成できない ○ 従って実行時も非効率（これはGatsby以外のSSGも同 じ） ● Adobe CCに囲い込まれる ○ 2180円/月額 ○ 機能拡張はAdobeにお任せ ● でも、レスポンシブでかっこいいサイトが簡単にデザインでき るのは捨てがたいが・・・ 19
WordPressでもSSGできるのでは？ ● はい、WPでもSSGはできます。しかし、これはWPの脆弱性 を補うための後付けの発想なので大規模サイトには向かな いなど種々の制約があります。 ● 老舗のMovable Typeは基本設計がSSGです。ただし、最 新版は商用製品（旧バージョンはGithub公開）なので自力 でカスタマイズできません。 ● 今ブームなのは最初からSSGとして開発されたオープン ソースのSSGです。 20
キャッシュサーバーやCDNで十分では？ ● ブラウザとサーバーの中間に入るリバースプロキシ型のキャッシュサー バー ○ 各ページの初回ロードは遅い ○ ページ更新後のキャッシュの即時完全無効化が難しい？ ○ INDEXページ内の静的リンクから芋づる式にリンクをたどり関連ページ を事前キャッシュする方式もあるが完全にはできない ● CDN(Contents Delivery Network) ○ 分散したエッジザーバーに静的ファイルを配置するのが基本 ○ 動的サイト内からの画像・動画コンテンツの参照などには有効 ○ もっとも効果的なのは静的サイトを配置した場合 21
そこでJAMstackの登場です 一言で言えば SSG by JS + API ↓ Gatsby + Netlify + GraphCMS でお悩み解消 です 22
https://jamstack.org/ 23 和訳　 https://qiita.com/nori-k/items/1e789651ec154fdd8bd8
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
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/ から引用
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
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
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の短縮などで)
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
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使用１万回 or データ転送量1GB)/月無料 ■ (API使用１0万回 or データ転送量10GB)/月 $29/月 30
さて、コンテンツはどこに置く？ 31
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
GraphCMSとは ● 本家： https://graphcms.com/ ● Web UIまたはAPIを用いてProjectを定義しその中で以下を 実現 ○ Schema定義(Content Model定義) ■ ArrayやRelationshipを定義可能 ■ スキーマ付きのMongoDBに相当 ○ CRUD操作 ○ 静的Assetの保存・参照 ● APIはGraphQL ● 本日のデモ用コンテンツを閲覧 33
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
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
Deployサービス ● Netlify：https://www.netlify.com/ ● Surge：https://surge.sh/ ● Now ： https://zeit.co/ ● WeDeploy：https://wedeploy.com/ ● 以上はいずれも従来からのGoogle FirebaseやHerokuより もデプロイは簡単 37
Deployサービスのメリット ● 恐らくAkamaiとかFastlyを使っているのでこういうことは避けられる。 （もちろんAWSやAzure使ってても大丈夫） 38
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
開発環境は？ Gatsbyを使ってクラウドまたはローカルPCで開発 デプロイサービスにデプロイ 40
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
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
GatsbyのカバーするWeb技術 ● React ● GraphQL ● SPA ● SSR ● PWA ● Webpack4 43
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
Gatsbyのフォルダ構成 ● src/pages ○ ページコンテンツ ● src/layouts ○ ページレイアウト(ただし、V2ではcomponentsに吸収さ れる) ● src/templates ○ 表示ブロックのテンプレート ● src/components ○ 表示データやUI部品のクラス定義 ● public ○ 生成された静的コンテンツ ● static ○ 静的なファイル（画像、動画など） 45
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/
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プロパティにバイ ンドされる
Gatsbyのプラグイン ● Sourceプラグイン ○ 表示すべきデータソースにアクセスする ■ filesystem, wordpress, drupal, contentful, graphcms etc. ● Transformationプラグイン ○ データソースを必要な形式に変換する ■ markdown, json, csv, excel, pdf etc. 48
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/
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
デモ環境 ● AWS Cloud9でCloud to Cloud開発 ○ インスタンスの停止忘れなし ○ Elastic IP不要（インスタンス停止時での課金なし） ○ ngrokでトンネリングすればlocalhostの任意のポートに リモートアクセス可能(小規模なら無料) ● Netlifyでデプロイ ● CMSはGraphCMS 52
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
ngrokとは ● 本家：https://ngrok.com/ ● ホスト内の任意のhttpのポートをngrok.io経由でインターネットにトン ネリング（ポートフォワーディング） ○ 同時にhttpsでも公開される ○ 4040ポートでhttpリクエストのトレースがブラウザで可能 ● 任意のTCPポートもトンネリング可能 ● 無料版：1つのトンネルを4ユーザまでアクセス可能 ● Pro版($10/月)：2つのトンネルを1つあたり12ユーザまでアクセス可 能=>この場合上記の4040ポートを別途トンネリングしてアクセスでき るのでCloud9でもトレース機能が使える （この費用の方がAWSよりも高くつくかも・・・） 54
デモ(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
デモ(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
デモ(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
Gatsbyを中心とするソリューションの比較 ● 参照：https://www.gatsbyjs.org/features/#introduction 59
JAMstackでは難しい？ ● ユーザーのロールに応じた権限とビューの実装は困難 ○ ロールに応じたビューをすべて生成？ ○ APIにロールを含める？ ● 複数ユーザがWeb画面で管理するサイト(Drupalなど) ○ JAMstackでもコンテンツ管理だけなら共同作業可能だが画面レイアウトやテー マなどを複数人で管理するのは難しい ● LMS(Moodleなど) ○ 多数の一般ユーザが複雑なDBを更新する ● ブラウザ以外とのリアルタイム通信＆画面更新 ○ IoTにおける多数の機器からの大量データはクライアントからのAPI呼び出しで は処理しきれない => パワフルなサーバーが必要 ● Banking Onlineなどの厳密なトランザクション管理は難しそうに見えるが、入出金・振 替などのAPIを提供するサービスがあればそちらに任せられるのでJAMstackでの実 装は可能 60
もっと簡単に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
発展系はDecentralized!? ● https://essentia.one/ ● 62
● 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
END 64

More Related Content

PDF
【Unity道場 2017】パーティクルエフェクト実践編 ~ヒットエフェクト制作プレイクダウン~
byUnity Technologies Japan K.K.
 
PDF
怖くないSpring Bootのオートコンフィグレーション
by土岐 孝平
 
PPTX
さくっと理解するSpring bootの仕組み
byTakeshi Ogawa
 
PDF
今さら聞けないDiとspring
by土岐 孝平
 
PDF
Spring 歴約１年初心者の Test 奮闘記
bychishizu naito
 
PDF
建築革命、更に進化！デジタルツイン基盤の真打ち登場【概要編 Unity Reflect ver 2.1 】
byUnity Technologies Japan K.K.
 
PPTX
最近のやられアプリを試してみた
byzaki4649
 
PPTX
はじめてのUniRx
bytorisoup
 
【Unity道場 2017】パーティクルエフェクト実践編 ~ヒットエフェクト制作プレイクダウン~
byUnity Technologies Japan K.K.
 
怖くないSpring Bootのオートコンフィグレーション
by土岐 孝平
 
さくっと理解するSpring bootの仕組み
byTakeshi Ogawa
 
今さら聞けないDiとspring
by土岐 孝平
 
Spring 歴約１年初心者の Test 奮闘記
bychishizu naito
 
建築革命、更に進化！デジタルツイン基盤の真打ち登場【概要編 Unity Reflect ver 2.1 】
byUnity Technologies Japan K.K.
 
最近のやられアプリを試してみた
byzaki4649
 
はじめてのUniRx
bytorisoup
 

What's hot

PDF
Google borg と コンテナベース分散システムデザインパターン
byktateish
 
PDF
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
byUnity Technologies Japan K.K.
 
PDF
Swaggerでのapi開発よもやま話
byKEISUKE KONISHI
 
PPTX
20160526 依存関係逆転の原則
bybonjin6770 Kurosawa
 
PDF
Cinemachineで見下ろし視点のカメラを作る
byUnity Technologies Japan K.K.
 
PPTX
SPAセキュリティ入門～PHP Conference Japan 2021
byHiroshi Tokumaru
 
PDF
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
byJustSystems Corporation
 
PDF
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
byUnityTechnologiesJapan002
 
PPTX
いまさら聞けないDockerコンテナ超入門
byVirtualTech Japan Inc./Begi.net Inc.
 
PPTX
WiredTigerを詳しく説明
byTetsutaro Watanabe
 
PPTX
Redisの特徴と活用方法について
byYuji Otani
 
PDF
Burp suite を使って iPhone アプリを診断した時に困ったことと、解決方法
bytobaru_yuta
 
PDF
君はyarn.lockをコミットしているか？
byTeppei Sato
 
PPTX
DeNA の AWS アカウント管理とセキュリティ監査自動化
byDeNA
 
PDF
JiraとConfluenceのTips集
byHiroshi Ohnuki
 
PDF
こんなに使える！今どきのAPIドキュメンテーションツール
bydcubeio
 
PDF
AWS Black Belt Techシリーズ Amazon CloudSearch
byAmazon Web Services Japan
 
PDF
Assembly Definition あれやこれ
byNakanoYosuke1
 
PDF
PHPで大規模ブラウザゲームを開発してわかったこと
byKentaro Matsui
 
PPTX
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
byShota Shinogi
 
Google borg と コンテナベース分散システムデザインパターン
byktateish
 
【Unity道場 2017】PlayMakerによる初めてのUnityプログラミング
byUnity Technologies Japan K.K.
 
Swaggerでのapi開発よもやま話
byKEISUKE KONISHI
 
20160526 依存関係逆転の原則
bybonjin6770 Kurosawa
 
Cinemachineで見下ろし視点のカメラを作る
byUnity Technologies Japan K.K.
 
SPAセキュリティ入門～PHP Conference Japan 2021
byHiroshi Tokumaru
 
ピュアJavaだと思った？残念androidでした～いつからAndroidをJavaだと錯覚していた？～
byJustSystems Corporation
 
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
byUnityTechnologiesJapan002
 
いまさら聞けないDockerコンテナ超入門
byVirtualTech Japan Inc./Begi.net Inc.
 
WiredTigerを詳しく説明
byTetsutaro Watanabe
 
Redisの特徴と活用方法について
byYuji Otani
 
Burp suite を使って iPhone アプリを診断した時に困ったことと、解決方法
bytobaru_yuta
 
君はyarn.lockをコミットしているか？
byTeppei Sato
 
DeNA の AWS アカウント管理とセキュリティ監査自動化
byDeNA
 
JiraとConfluenceのTips集
byHiroshi Ohnuki
 
こんなに使える！今どきのAPIドキュメンテーションツール
bydcubeio
 
AWS Black Belt Techシリーズ Amazon CloudSearch
byAmazon Web Services Japan
 
Assembly Definition あれやこれ
byNakanoYosuke1
 
PHPで大規模ブラウザゲームを開発してわかったこと
byKentaro Matsui
 
ネットストーカー御用達OSINTツールBlackBirdを触ってみた.pptx
byShota Shinogi
 

Similar to JAMstackは眠らない

PPTX
fluxflex meetup in Tokyo
byKyosuke Inoue
 
PPTX
Fluxflex meetup 2011 in Tokyo
byKyosuke Inoue
 
PDF
A 1-2 One ASP.NET - ASP.NET Web Stack
byGoAzure
 
PDF
CloudStack Ecosystem Day - OpenStack/Swift
byirix_jp
 
PDF
BPStudy20121221
byShinichiro Takezaki
 
PDF
おすすめインフラ！ for スタートアップ
byKoichiro Sumi
 
PDF
OpenStack概要
byAkira Yoshiyama
 
PDF
Openstack abstract2
byAyumi Oka
 
KEY
BEAR.Sunday Note
byAkihito Koriyama
 
PDF
Web is the OS (Firefox OS)
bydynamis
 
PDF
Railsの運用について
byYuuki Namikawa
 
PDF
Firefox OS - Blaze Your Own Path
bydynamis
 
PDF
Kilimanjaro Event
bydynamis
 
PDF
Dist 29 gcp_serverless_web_app_development
byShotaro Suzuki
 
PDF
ゆるべん Webアプリ開発概要 20130127
byY
 
PDF
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
byAkihiro Kuwano
 
PDF
Enterprise Redmine
byDai FUJIHARA
 
PDF
Cloud Foundry: Open Platform as a Service
byShunsuke Kurumatani
 
PDF
【17-E-2】Ruby PaaS「MOGOK」 ～ ソフトウェアエンジニアのためのクラウドサービス ～ 藤原秀一氏
byDevelopers Summit
 
KEY
AmazonElasticBeanstalk
byTaisuke Oe
 
fluxflex meetup in Tokyo
byKyosuke Inoue
 
Fluxflex meetup 2011 in Tokyo
byKyosuke Inoue
 
A 1-2 One ASP.NET - ASP.NET Web Stack
byGoAzure
 
CloudStack Ecosystem Day - OpenStack/Swift
byirix_jp
 
BPStudy20121221
byShinichiro Takezaki
 
おすすめインフラ！ for スタートアップ
byKoichiro Sumi
 
OpenStack概要
byAkira Yoshiyama
 
Openstack abstract2
byAyumi Oka
 
BEAR.Sunday Note
byAkihito Koriyama
 
Web is the OS (Firefox OS)
bydynamis
 
Railsの運用について
byYuuki Namikawa
 
Firefox OS - Blaze Your Own Path
bydynamis
 
Kilimanjaro Event
bydynamis
 
Dist 29 gcp_serverless_web_app_development
byShotaro Suzuki
 
ゆるべん Webアプリ開発概要 20130127
byY
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
byAkihiro Kuwano
 
Enterprise Redmine
byDai FUJIHARA
 
Cloud Foundry: Open Platform as a Service
byShunsuke Kurumatani
 
【17-E-2】Ruby PaaS「MOGOK」 ～ ソフトウェアエンジニアのためのクラウドサービス ～ 藤原秀一氏
byDevelopers Summit
 
AmazonElasticBeanstalk
byTaisuke Oe
 

JAMstackは眠らない

  • 1.
  • 2.
  • 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.
    自己紹介(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.
    遍歴 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.
    アジェンダ ● 予備知識 ● AMPスタックで苦労していませんか？ ●SSGを使おう！ ● JAMstackの登場 ● コンテンツはどこに置く？ ○ GraphCMS ● 公開サーバーはどうする？ ○ Netlify ● 開発環境は？ ○ Gatsby, Nuxt.js ● デモ ● まとめ 6
  • 7.
  • 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.
    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.
    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.
  • 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.
    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.
  • 15.
    ● Apache (orNginx or IIS) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ SSL証明書管理 ● MySQL(or PostgreSQL) ○ バックアップ、変更履歴、チューニング、バージョンアップ ● PHP(or Ruby on Rails) ○ チューニング、バージョンアップ ○ 拡張モジュール管理 ○ サーバー側アプリ管理 ● インフラ（クラウド使えば少し楽だが） ○ 開発環境=>ステージング=>本番環境 ○ 障害監視 ○ スケーリング＆キャパシティプランニング 楽して トラブルなく 運用できない か？ AMPスタックで苦労していませんか？ 15
  • 16.
  • 17.
  • 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.
    Dreamweaverでもよいのでは？ ● テンプレート機能が非効率 ○ サーバーサイドで動くSSGの方が効率的 ●SPAやPWAは生成できない ○ 従って実行時も非効率（これはGatsby以外のSSGも同 じ） ● Adobe CCに囲い込まれる ○ 2180円/月額 ○ 機能拡張はAdobeにお任せ ● でも、レスポンシブでかっこいいサイトが簡単にデザインでき るのは捨てがたいが・・・ 19
  • 20.
    WordPressでもSSGできるのでは？ ● はい、WPでもSSGはできます。しかし、これはWPの脆弱性 を補うための後付けの発想なので大規模サイトには向かな いなど種々の制約があります。 ● 老舗のMovableTypeは基本設計がSSGです。ただし、最 新版は商用製品（旧バージョンはGithub公開）なので自力 でカスタマイズできません。 ● 今ブームなのは最初からSSGとして開発されたオープン ソースのSSGです。 20
  • 21.
    キャッシュサーバーやCDNで十分では？ ● ブラウザとサーバーの中間に入るリバースプロキシ型のキャッシュサー バー ○ 各ページの初回ロードは遅い ○ページ更新後のキャッシュの即時完全無効化が難しい？ ○ INDEXページ内の静的リンクから芋づる式にリンクをたどり関連ページ を事前キャッシュする方式もあるが完全にはできない ● CDN(Contents Delivery Network) ○ 分散したエッジザーバーに静的ファイルを配置するのが基本 ○ 動的サイト内からの画像・動画コンテンツの参照などには有効 ○ もっとも効果的なのは静的サイトを配置した場合 21
  • 22.
    そこでJAMstackの登場です 一言で言えば SSG by JS+ API ↓ Gatsby + Netlify + GraphCMS でお悩み解消 です 22
  • 23.
  • 24.
    What is JAM? JAMstands 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.
    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.
    What is notJAMstack? 26 ● AMPアーキテクチャ ○ WordPress ○ Drupal ● Ruby on Rails ● Node.js サーバーによるレンダリングやルーティング ○ Vulcan(http://vulcanjs.org ) Meteor + React+GraphQL のフルスタックフレーム ワーク！ ● Java + Tomcat ● ASP.NET ★すべてはMonolithic Architecture
  • 27.
    Best Practice ofJAMstack ● 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.
    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.
    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.
    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使用１万回 or データ転送量1GB)/月無料 ■ (API使用１0万回 or データ転送量10GB)/月 $29/月 30
  • 31.
  • 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.
    GraphCMSとは ● 本家： https://graphcms.com/ ●Web UIまたはAPIを用いてProjectを定義しその中で以下を 実現 ○ Schema定義(Content Model定義) ■ ArrayやRelationshipを定義可能 ■ スキーマ付きのMongoDBに相当 ○ CRUD操作 ○ 静的Assetの保存・参照 ● APIはGraphQL ● 本日のデモ用コンテンツを閲覧 33
  • 34.
    GraphQLとは ● SQL(Structured QueryLangage)よりも構造化されたクエ リー言語 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.
    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.
  • 37.
    Deployサービス ● Netlify：https://www.netlify.com/ ● Surge：https://surge.sh/ ●Now ： https://zeit.co/ ● WeDeploy：https://wedeploy.com/ ● 以上はいずれも従来からのGoogle FirebaseやHerokuより もデプロイは簡単 37
  • 38.
  • 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.
  • 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.
    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.
  • 44.
    Gatsbyのインストレーション ● 前提はNode.jsとgit ● npminstall --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.
    Gatsbyのフォルダ構成 ● src/pages ○ ページコンテンツ ●src/layouts ○ ページレイアウト(ただし、V2ではcomponentsに吸収さ れる) ● src/templates ○ 表示ブロックのテンプレート ● src/components ○ 表示データやUI部品のクラス定義 ● public ○ 生成された静的コンテンツ ● static ○ 静的なファイル（画像、動画など） 45
  • 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.
    GatsbyのGraphQL API 47 import Reactfrom "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.
    Gatsbyのプラグイン ● Sourceプラグイン ○ 表示すべきデータソースにアクセスする ■filesystem, wordpress, drupal, contentful, graphcms etc. ● Transformationプラグイン ○ データソースを必要な形式に変換する ■ markdown, json, csv, excel, pdf etc. 48
  • 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.
    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.
  • 52.
    デモ環境 ● AWS Cloud9でCloudto Cloud開発 ○ インスタンスの停止忘れなし ○ Elastic IP不要（インスタンス停止時での課金なし） ○ ngrokでトンネリングすればlocalhostの任意のポートに リモートアクセス可能(小規模なら無料) ● Netlifyでデプロイ ● CMSはGraphCMS 52
  • 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.
    ngrokとは ● 本家：https://ngrok.com/ ● ホスト内の任意のhttpのポートをngrok.io経由でインターネットにトン ネリング（ポートフォワーディング） ○同時にhttpsでも公開される ○ 4040ポートでhttpリクエストのトレースがブラウザで可能 ● 任意のTCPポートもトンネリング可能 ● 無料版：1つのトンネルを4ユーザまでアクセス可能 ● Pro版($10/月)：2つのトンネルを1つあたり12ユーザまでアクセス可 能=>この場合上記の4040ポートを別途トンネリングしてアクセスでき るのでCloud9でもトレース機能が使える （この費用の方がAWSよりも高くつくかも・・・） 54
  • 55.
    デモ(1)：GatsbyでPCからデプロイ ● LocalのPCでデフォルトの新規プロジェクト作成 gatsby newtth-demo cd tth-demo gatsby develop ● Live Reloadのデモ ○ ページ編集が即座にhttp://localhost:8000 に反映 ● ビルドして静的サイト作成 gatsby build gatsby serve ● Netlifyへデプロイ cd public netlify deploy 55
  • 56.
    デモ(2)：Markdownでブログ作成 ● Cloud9でgatsby-starter-blogから新規プロジェクト作成 gatsby newgatsby-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.
    デモ(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.
  • 59.
  • 60.
    JAMstackでは難しい？ ● ユーザーのロールに応じた権限とビューの実装は困難 ○ ロールに応じたビューをすべて生成？ ○APIにロールを含める？ ● 複数ユーザがWeb画面で管理するサイト(Drupalなど) ○ JAMstackでもコンテンツ管理だけなら共同作業可能だが画面レイアウトやテー マなどを複数人で管理するのは難しい ● LMS(Moodleなど) ○ 多数の一般ユーザが複雑なDBを更新する ● ブラウザ以外とのリアルタイム通信＆画面更新 ○ IoTにおける多数の機器からの大量データはクライアントからのAPI呼び出しで は処理しきれない => パワフルなサーバーが必要 ● Banking Onlineなどの厳密なトランザクション管理は難しそうに見えるが、入出金・振 替などのAPIを提供するサービスがあればそちらに任せられるのでJAMstackでの実 装は可能 60
  • 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.
  • 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.