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
480
エンジニア目線での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
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.7k
MTDDC Meetup TOKYO 2023
chinen
2
350
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.8k
WWDC2023-Recap-LT
chinen
1
120
Web Push対応状況2023
chinen
0
520
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
150
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
160
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.4k
frontend-conf-okinawa-2022
chinen
0
430
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
160
Platform Engineering for Software Developers and Architects
syntasso
1
520
Terraform Stacks入門 #HashiTalks
msato
0
360
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
690
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Adopting Sorbet at Scale
ufuk
73
9.1k
Unsuck your backbone
ammeep
668
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Agile that works and the tools we love
rasmusluckow
327
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Building Applications with DynamoDB
mza
90
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Testing 201, or: Great Expectations
jmmastey
38
7.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水曜 オンライン開催