JAMStackMeetUPいってきた
JAMSTACK Meetup #1 with microCMS
所感
全体を通して
JAMSTACKについて
- というかはmicroCMSのサービス紹介（宣伝だった）
- microCMS（ヘッドレスCMS）はビューを外部で作れるから自由度高い
- サイト作る側は、記事作成だけに専念できる
- LTのが宣伝なくてよかったな
microCMS X（かける） JAMstackの実装話
概要
自己紹介
Shibe97
- SPA大好きでReactとNuxtが好き
- MciroCMSさんと一緒にミートアップがなかったので企画した
JAMStackとは
- 事前に静的なファイルを生成
- API呼び出しはJavaScript
- Webサーバに依存しないサーバレス
- リクエストがくると、CDNへwebHookを送って、そこからサーバ側へビルド＆デプロイされる流れ
利点
- サイト作成に必要なのはビュー（画面）とホスティグだけ
- ホステイングにはNotify,GitHubPages,S3,Nowなどがつかう
- APIコールはビルド時だけ
- 高セキュリティ＆パフォーマンス
microCMSの紹介
サービス概要
- HeadlessCMSなのでビューは自作
- コンテンツAPI経由で取得
- 非エンジニア向け
サービス構成
紹介
- 開発者視点だととにかくAPIを呼び出すまでを簡単に素早くやりたい
- デモでブログ作成します
- ブログを作るかのような感覚で記事を作る
- ブログ記事のメニューにAPI呼び出しというボタンがあり、押すと、そのJSONが手に入る
- HeadlessCMSなので、ビューは別途エンジニアが作る。作れば好きなデザインでブログ公開
- HeadlessCMSの難しいところはAPIリファレンスや設定を、非エンジニアが壊すところ
- なので権限設定機能で壊せないようにする
JAMstackトレンド
RestAPIベース
- Next.js Next （ReactとVueそれぞれ)
GraphQLベース
- Gatsby,Gridsome（ReactとVueそれぞれ)
Nuxtの特徴
NuxtのasyncData
Nuxt,config.jsの注意点
- 初期設定だとnuxtGenerateは動的なパスに対して静的なページが作れない
Nuxt,config.jsの特徴
JamStackの実装はちょいむずい
- PromiseとかAsync/Awaitの知識はいる
Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話（株式会社Rebuild）
miroCMS
特徴
導入方法
- netlifyでNuxtをホスティングした
- コンテンツ管理でMicroCMS使った。（メディアとニュースの部分だけ）
- GitLabでソース管理して、netlifyでNuxtJSをデプロイした
microCMSのAPI叩いた時の紹介
- APIを叩いた時のレスオポンスわかりやすい
管理画面イメージ説明
- 無料プランでも管理画面が使える
- 順番入れ替えなどが用意
速度改善
- 元のサイトがワードプレスで表示速度が遅いテンプレートをつかていた
- 速度改善ツールで２８点から９７点になった
まとめ
WordPress（Shifter）をHeadlessCMSにした自社サイトをGridsomeとNetlifyで作ってる話
JamStack
取り入れた理由
- ここ数年大きな動きがあった
- 新いい技術
- 読み込み早い
- ワードプレス＋アルファがしたかった
利点
- コンテンツとフロントエンドの分離
- ライターメンバーが更新可能
- エディタとしてWordPressそのままつかえる
- 上記２つを使いたかった
- GridSome(VueJs)を使えた
- Shifter(HeadlessCMS)をつかえた
GridSomeを使う理由
- GraphQLが使える
- Vue.jsの静的サイトジェネレータ
- PWAとかServerlessAPIとかに挑戦できる
Shifterを使う理由
- WordPress のサイトをHTMLにしてグローバルなCDNに配置してくれるサービス
- 自動でWordPressのコアをUPDATEをしてくれる
- 画像のホスティングがはやい
- ワードプレスプラグイン使える
- コミュニティが豊富
Shifterでは以下のフローができる
JAMStackで開発すると今までのつらみがなくなってコストも下がる話
概要
CMS導入
つらみ
- クライアントワークの時お客さんの連絡待ちがつらい
- 社内は申請がつらい
JAMStackやってみた
事例
- 会社方針で変更可能のあるものはすべてAPIにする
- そこら辺をやっておけばお客さんとのやりとりがなくなる
- 編集者がかってにコンテンツだけ作ってくれるから
メリット
- 上の例からプログラム変更がなくなる
- コンテンツ管理やホスティング管理がなくなったので、コミュニケーションコストが７０％削減
コード管理
GitHubActionを使ったJAMStackのデプロイ
概要
自己紹介
- jQueryデザイン入門書いた人(ドーナツが表紙のやつ）
gatsbyの良いところ
- gatsbyImageが画像形式を１０通りにビルドして、最適化してくれる
- LazyLoad中はうらでスケルトンUIを表示してくれる
Jamstackのデプロイフローどうしてる？
- だいたいこれ:Git clone->nom ci->nom buildからdeploy
- GitHubActionsとかGitLabCICDが最近でてきた
- クラウドサービスだとAWSClodeDeployとかCloudBuildもある
Jamstack御用達
- Netlify、ZEIT
ホスティング先
- Notify,GitHubPages,S3,Nowなどがつかう
小さい案件
- デプロイ先がFTP送信だったりする
- そういう時はJAMStackがよい
