JAMstackは眠らない

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

● 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

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

JAMstackは眠らない

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JAMstackは眠らない

Similaire à JAMstackは眠らない (20)

JAMstackは眠らない