Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
Search
Chinen
September 08, 2021
Technology
1
440
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
2021/09/08のShifter オンラインミートアップ! Shifterを提案する時のベストプラクティスを聞いてみよう!!の登壇資料です。
Chinen
September 08, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
300
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.5k
WWDC2023-Recap-LT
chinen
1
100
Web Push対応状況2023
chinen
0
470
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
120
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
140
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
380
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
330
Other Decks in Technology
See All in Technology
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Classmethod Odyssey 登壇資料
yamahiro
0
390
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
134
6.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
BBQ
matthewcrist
82
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Designing with Data
zakiwarfel
96
5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
KATA
mclloyd
20
13k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Transcript
エンジニア目線での Shifter 2021/9/8 まぁし / 知念 昌史
知念 昌史 / まぁし@chocodogmagic TAM/TAMTOのフロントエンドエンジニア • 沖縄でリモートワーク • 技術コミュニティ運営 ◦
PWA Night(東京)/ v-okinawa(沖縄) ◦ 平日朝9時からTwitter SpacesでWeb雑談 • ものづくりが好き ◦ イラスト、ゲーム、アプリ、漫画、小説 • ベテランポケモントレーナー • スプラトゥーン頑張ってウデマエSめざしてる
今までのShifter関連のLT登壇 • Shifterを選定するまでに検討したこと ◦ 2020/06/03 Shifter オンラインミートアップ! ◦ https://speakerdeck.com/chinen/shifter-meetup0603
• Shifter StaticでREST APIしたい ◦ 2020/12/02 Shifter オンラインミートアップ 「Shifter 大忘年会 2020」 ◦ https://speakerdeck.com/chinen/shifter-meetup-2020-12-02 • Shifter Staticのサイトを PWAにしよう ◦ 2021/06/26 PWA Night Conference 2021 ◦ https://speakerdeck.com/chinen/pwa-night-conference-2021
Shifterの良いところ 1. Staticである → 静的ファイル生成ができること 2. WordPressである 3. CMSと公開サーバーが別である 4.
バックエンド/インフラがほぼ不要
1. Staticであること なぜStaticがメリットなのか Static(静的)とDynamic(動的) → WordPressは動的 WordPressは、ブラウザからサーバーへリクエストしたらサーバー側でデータを処理して から表示するHTMLを返す Shifterは、WordPressのデータを事前にHTMLファイルとして生成 (generate)しておくため、ブラウザからサーバーへリクエストしたら
生成済みのHTMLをそのまま返す
Staticのメリット • ページの表示スピードが速い(SEO・UX) ◦ ページの表示が遅いとユーザーは離脱する、早い方が良い ◦ Core Web Vitals
• 攻撃されるリスクが低い ◦ ユーザーの入力によって内容が変わることがない • マシンリーダブル ◦ クロウラー等のbotでも問題なく読み取れる(JSだと少し遅れる)
2. WordPressであること 有名・ユーザーが多いことはメリット※提案しやすい → お客さん(コードがわからない人)でも知っている・使い慣れている → テーマ開発できるエンジニアが多い HeadlessやJamstackだとReact(Next)・Vue.js(Nuxt)等の フレームワークと組み合わせることが多く、難易度が上がる。 →
実装できるエンジニアが限られる
3. CMSと公開サーバーが別である 有名なCMSは外部から攻撃されやすい → オープンソースかつ多種多様なプラグインが あり脆弱性をつかれやすい WordPressを公開環境に置いている場合、管理画面へのアクセスを制限したり、監視 ツールを導入するなど※徹底すればするほど工数もスキルも必要になる → 目に見える部分ではないのでお客さんにも伝わりづらい
Shifterを契約したらすぐCMSと公開サーバーを分けた環境を使える → WordPressは非公開かつ操作中しか起動しない
4. バックエンド/インフラがほぼ不要 一からShifterと同等の環境を用意するとなると・・・ サーバーを手配、必要なモジュール追加、DBの用意、WordPressのインストール、アクセ ス制限、死活監視、さらにCDNも入ってくる Shifterならフロントエンド専門のエンジニアでも十分。 バックエンドやインフラのスキルがなくても開発を進められる。 ※ドメイン設定周りは必要。
WordPressテーマ開発スキルがあれば サーバー構築、CDN、 セキュリティ対策、静的generate これらの環境が 揃っている状態で開発できる
Shifterの困ったところ 1. 自由にファイルを置けない 2. すべてのページを静的化できるわけではない 3. WordPressプラグインがすべて使えるとは限らない 4. Tier 1でBasic認証が使えない
1. 自由にファイルを置けない PWAの実装でJavaScriptをドキュメントルート直下に置く必要がある(Service Workerの scope)が置けない → プラグインで対応 Shifterのサーバーには直接アクセスできず、テーマ内のファイルしか自由に扱えない。 プラグインやfunctions.phpを使ってファイルを生成するような処理が必要。.htaccessも使 えない。
画像の変更もShifterのWordPress管理画面か、テーマフォルダを 更新するしかない。
2. すべてのページを静的化できるわけではない カスタム投稿タイプの日別・年別アーカイブのgenerateがうまくできない (カスタム投稿タイプの投稿自体は静的化できる) 同様に、プラグインの機能によって提供されるページも出力できない場合がある。 どのようなWebサイトにしたいのか、構成を考える段階で考慮が必要。 ※とくにWordPressではPHPを使えば何でもできるという発想だと 注意。
3. WordPressプラグインがすべて使えるとは限らない StaticなHTMLを配信するという都合で、アクセス時に内容を書き換えるような動的な処 理ができない。そういったプラグインは使えない可能性もある。 フォームは使えないと思いきや対応しているプラグインもあり、 Shifterでも使えるかどうかは動かしてみないとわからないこともある。 仮にうまく動作しなかった場合、Shifter側の都合なのかプラグインの 不具合なのか原因の切り分けが難しいことがある。
4. Tier 1でBasic認証が使えない 主に開発中・テスト用の環境で使う場合、転送量やデータ量が少ないためTier 1を使い たい。公開状態にはしたくないためBasic認証をかけたいが、Tier 2以上のプランのみ。 • .htaccessでの設定はできない •
WordPressのBasic認証プラグインも動的な処理になるので使えない
まとめ
Shifterが向いている条件 • WordPressを使いたい • 静的ページで完結するサービス • サイトの表示高速化 • CDNで配信したい •
セキュリティ面を重視する
ありがとうございました!!! Twitter @chocodogmagic まぁし フォローしてね!! PWA Night 毎月第3水曜 オンライン開催