Submit Search
Upload
WagtailとPelicanでJAMstack環境作ってみた
•
0 likes
•
530 views
M
Makoto Mochizuki
Follow
フロントエンド界隈で流行りつつあるJAMstack。 これをPython製のライブラリやフレームワークを組み合わせる事で、柔軟な環境になると考え作成したので経緯の説明をします。
Read less
Read more
Software
Report
Share
Report
Share
1 of 41
Download Now
Download to read offline
Recommended
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Pythonの処理系はどのように実装され,どのように動いているのか? 我々はその実態を調査すべくアマゾンへと飛んだ.
Pythonの処理系はどのように実装され,どのように動いているのか? 我々はその実態を調査すべくアマゾンへと飛んだ.
kiki utagawa
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
DLLAB Engineer Days : ONNX Export & Optimize
DLLAB Engineer Days : ONNX Export & Optimize
Kazuki Kyakuno
型安全性入門
型安全性入門
Akinori Abe
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Yusuke Hisatsu
良いコードとは
良いコードとは
Nobuyuki Matsui
More Related Content
What's hot
ChatGPTは思ったほど賢くない
ChatGPTは思ったほど賢くない
Carnot Inc.
PyCon2020 Pythonで競プロをしよう! 〜入門者が知っておくべき高速化Tips〜
PyCon2020 Pythonで競プロをしよう! 〜入門者が知っておくべき高速化Tips〜
Kosaku Ono
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
しくみ製作所
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
Takahiro Kubo
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
Yoshiki Hayama
Pull Request & TDD 入門
Pull Request & TDD 入門
ESM SEC
GiNZAで始める日本語依存構造解析 〜CaboCha, UDPipe, Stanford NLPとの比較〜
GiNZAで始める日本語依存構造解析 〜CaboCha, UDPipe, Stanford NLPとの比較〜
Megagon Labs
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
Masahiro Sakai
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Takuto Wada
Source Code Management with Pharo Smalltalk - Pharo Smalltalkソースコード管理方法
Source Code Management with Pharo Smalltalk - Pharo Smalltalkソースコード管理方法
Sho Yoshida
明日使えないすごいビット演算
明日使えないすごいビット演算
京大 マイコンクラブ
TDD のこころ @ OSH2014
TDD のこころ @ OSH2014
Takuto Wada
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
BoostAsioで可読性を求めるのは間違っているだろうか
BoostAsioで可読性を求めるのは間違っているだろうか
Yuki Miyatake
コンテナにおけるパフォーマンス調査でハマった話
コンテナにおけるパフォーマンス調査でハマった話
Yuta Shimada
Word2vecの並列実行時の学習速度の改善
Word2vecの並列実行時の学習速度の改善
Naoaki Okazaki
ChatGPT 人間のフィードバックから強化学習した対話AI
ChatGPT 人間のフィードバックから強化学習した対話AI
Shota Imai
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Preferred Networks
Lean coffee
Lean coffee
Takeshi Arai
What's hot
(20)
ChatGPTは思ったほど賢くない
ChatGPTは思ったほど賢くない
PyCon2020 Pythonで競プロをしよう! 〜入門者が知っておくべき高速化Tips〜
PyCon2020 Pythonで競プロをしよう! 〜入門者が知っておくべき高速化Tips〜
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
Pull Request & TDD 入門
Pull Request & TDD 入門
GiNZAで始める日本語依存構造解析 〜CaboCha, UDPipe, Stanford NLPとの比較〜
GiNZAで始める日本語依存構造解析 〜CaboCha, UDPipe, Stanford NLPとの比較〜
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
組織にテストを書く文化を根付かせる戦略と戦術
組織にテストを書く文化を根付かせる戦略と戦術
Source Code Management with Pharo Smalltalk - Pharo Smalltalkソースコード管理方法
Source Code Management with Pharo Smalltalk - Pharo Smalltalkソースコード管理方法
明日使えないすごいビット演算
明日使えないすごいビット演算
TDD のこころ @ OSH2014
TDD のこころ @ OSH2014
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
BoostAsioで可読性を求めるのは間違っているだろうか
BoostAsioで可読性を求めるのは間違っているだろうか
コンテナにおけるパフォーマンス調査でハマった話
コンテナにおけるパフォーマンス調査でハマった話
Word2vecの並列実行時の学習速度の改善
Word2vecの並列実行時の学習速度の改善
ChatGPT 人間のフィードバックから強化学習した対話AI
ChatGPT 人間のフィードバックから強化学習した対話AI
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Pythonの理解を試みる 〜バイトコードインタプリタを作成する〜
Lean coffee
Lean coffee
Similar to WagtailとPelicanでJAMstack環境作ってみた
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Takeshi Akutsu
XMPPクライアント・プログラミング
XMPPクライアント・プログラミング
隆行 神戸
ATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発について
JustSystems Corporation
JMeterをWebでしか設定できないサーバの設定自動化に使う
JMeterをWebでしか設定できないサーバの設定自動化に使う
隆行 神戸
My portfolio
My portfolio
ssuserc2210b
Django で始める PyCharm 入門
Django で始める PyCharm 入門
kashew_nuts
Goji とレイヤ化アーキテクチャ
Goji とレイヤ化アーキテクチャ
Shiroyagi Corporation
パッケージングの今と未来
パッケージングの今と未来
Atsushi Odagiri
Logback stackdriver-loggingを作った
Logback stackdriver-loggingを作った
kuro kuro
LINEとAWS(Lambda,Step Functions,API Gateway)とTwilioとkintoneでBOTを作ってみるハンズオン(yam...
LINEとAWS(Lambda,Step Functions,API Gateway)とTwilioとkintoneでBOTを作ってみるハンズオン(yam...
Mitsuhiro Yamashita
Example using LattePanda
Example using LattePanda
Hirokazu Egashira
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ
安隆 沖
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Yahoo!デベロッパーネットワーク
Introductionof taskflow
Introductionof taskflow
harubelle
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Takuya Tejima
Generating word clouds in python
Generating word clouds in python
AyakaHonda1
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
JVMの中身を可視化してみた
JVMの中身を可視化してみた
Kengo Toda
Similar to WagtailとPelicanでJAMstack環境作ってみた
(20)
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
XMPPクライアント・プログラミング
XMPPクライアント・プログラミング
ATOK Spark のご紹介とJavaによるプラグイン開発について
ATOK Spark のご紹介とJavaによるプラグイン開発について
JMeterをWebでしか設定できないサーバの設定自動化に使う
JMeterをWebでしか設定できないサーバの設定自動化に使う
My portfolio
My portfolio
Django で始める PyCharm 入門
Django で始める PyCharm 入門
Goji とレイヤ化アーキテクチャ
Goji とレイヤ化アーキテクチャ
パッケージングの今と未来
パッケージングの今と未来
Logback stackdriver-loggingを作った
Logback stackdriver-loggingを作った
LINEとAWS(Lambda,Step Functions,API Gateway)とTwilioとkintoneでBOTを作ってみるハンズオン(yam...
LINEとAWS(Lambda,Step Functions,API Gateway)とTwilioとkintoneでBOTを作ってみるハンズオン(yam...
Example using LattePanda
Example using LattePanda
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Introductionof taskflow
Introductionof taskflow
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Generating word clouds in python
Generating word clouds in python
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
JVMの中身を可視化してみた
JVMの中身を可視化してみた
WagtailとPelicanでJAMstack環境作ってみた
1.
WagtailとPelicanで JAMstack環境作ってみた
2.
アジェンダ ● JAMStackとは ● 利用したもの ●
成果物 ● 感想、考察、展望
3.
お前誰よ ● Makoto Mochizuki ●
@nyo3q1 ● Python歴5年 ● 三島駅近郊の会社でPython/Djangoを触っていた ● 数ヶ月のニートを経てフリーランスに ● 妻と娘がいます、家庭と勉強の両立...
4.
JAMstackとは
5.
ごめんなさい、少し長いです
6.
JAMstackとは JavaScript API Markup stack
7.
JAMstackとは 静的にビルドされたHTML、動的な処理はJavaScriptとAPI通 信だけな構成。
8.
JAMstackとは ● DjangoやWordPressのようなサーバーサイドでHTMLを出力 しているアプリケーション ● SPAの発展のSSR(サーバーサイドレンダリング)している アプリケーション サーバーサイドでのHTML生成はNG
9.
JAMstackとは 極端な話、一般的なWebアプリケーションや、SSRしたHTMLを 静的なHTMLにして保存すればJAMstak! 動的なHTMLを静的ファイルにすればOK
10.
Rendering on the
Web
11.
JAMstackってなに?実践に学ぶ高速表示を実現するアーキテクチャの構成 項目 概要 静的ファイルのみで構成 Server
Rendering サーバーサイドでアクセスのたびにレ ンダリングする。いわゆる旧来の CGI、PHP、サーブレットなど × Static SSR サーバーサイドで事前にレンダリング して、すべて静的なHTMLとして変換 したもの。Ruby製の Jekyll(ジキル) など ○ SSR ユニバーサルJavaScriptとして構成し たSPA。サーバーサイドのNode.jsで、 レンダリングするものとクライアントサ イドでレンダリングするものを組み合 わせたもの × CSR with Prerendering 事前にページを静的なHTMLとして変 換しておくSPA。 「JAMstack」はここに該当 ○ Full CSR クライアントサイドでレンダリングする SPA ○
12.
JAMstackの基本構成
13.
HeadlessCMS ● Contentful ● microCMS ●
NetlifyCMS HeadlessCMS X サイトジェネレーター サイトジェネレーター ● Netlify ● Gatsby ● Nuxt
14.
JAMstackとは ● CMS, API,
HTML生成機能が疎結合になる ○ CMS, API部分は1つのサービスでも良いと思いますが... ● ユーザーに渡すのはHTML, JavaScriptのみなので高速 ○ ファイルをCDNに配置すればより高速に! ● 管理コストが低い ○ HTML, JavaScript, APIのみなので脆弱性も生まれにくい メリット
15.
JAMstackとは ● プレビューが出来ない ○ 出来なくはないが、有償のSaaS、対応しているOSSのCMSを利用する必要 がある ●
大量にコンテンツがあるとビルドに時間がかかる ○ 対策 ■ 徹底的にビルドを並列化 ■ 差分ビルド出来るようにコードを書く デメリット
16.
Wagtailには、新規コンテンツが追加された際追加で処理を行える(Djangoの機能 の)Signalがある。 https://docs.wagtail.io/en/latest/reference/signals.html 複雑にページコンテンツが他のコンテンツと絡み合う事がなければ、利用できる かも? 差分ビルドについて
17.
● JAMstack.org ● JAMstackってなに?実践に学ぶ高速表示を実現するアーキテクチャの構成 ●
Shizuoka.js#5 JAMstack_conf_2019 JAMstack at scale Report JAMstack参考資料
18.
利用したもの ● Wagtail ○ Django製CMS ●
Pelican ○ Python製静的サイ トジェネレーター
19.
なぜこの2つを利用したのか 通常のJAMstackだと有償サービス、Node.js製のOSSを利用する事が多いように感 じる。 あえてDjango製CMSを利用する事で、コストを下げ、要望に柔軟に対応する。 サイトジェネレーターもPython製ツールを利用する事でPythonistaに優しい環境 を目指す。 2つともOSS、ソースコードが見れる。
20.
1. WagtailをHeadlessCMSとして設定 2. PelicanでWagtailのコンテンツを取得 道のり
21.
● Wagtail API
v2 Configuration Guide を参考に設定していくだけ https://docs.wagtail.io/en/latest/advanced_topics/api/v2/configuratio n.html ● APIドキュメントも充実している https://docs.wagtail.io/en/latest/advanced_topics/api/v2/usage.html#e xample-response WagtailをHeadlessCMSとして設定
22.
おすすめ設定: Django REST
frameworkも利用できるようにする Wagtail(Django)からAPIを生やしやすくする Headless CMS + APIをオールインワンで提供! # settings.py INSTALLED_APPS = [ ... 'wagtail.api.v2', 'rest_framework', # !!!!! ... ]
23.
出力するAPIもカスタマイズ可能 # models.py from rest_framework.fields
import DateField class BlogPage(Page): api_fields = [ APIField('published_date'), APIField('published_date_display', serializer=DateField(format='%A $d %B %Y', source='published_date') ), ] { "published_date": "2017-04-06", "published_date_display": "Thursday 06 April 2017" }
24.
PelicanでWagtailの コンテンツを取得する
25.
問題発生
26.
Pelicanは 動的コンテンツからサイトを 生成する事は出来ない
27.
● 静的ファイル(Markdown, reStructuredText,
html)からサイトコンテンツを 生成するツール ● 動的コンテンツからサイト生成する機能がない、Pelican用プラグインを自作 しないといけない Pelicanは...
29.
github.com/ButterCMS/buttercms-pelican ● 有償Headless CMSを提供している会社 ●
CMSに登録してあるコンテンツをPelicanでコンテンツ生成可能 ありがとうBitterCMS
30.
もしGatsbyを選択していたら
31.
Wagtailの公式ページに情報があるので導入は容易 ● Using Gatsby
for a Wagtail build - a case study ● Getting Started with Wagtail and GraphQL むしろWagtail + Pelicanより情報が多いのでやりやすいと思います
32.
1. Wagtailでコンテンツを作成 ● DBはSQLiteにしてあるのでリポジトリに全部上がる ●
肥大化... 2. リポジトリにPush 3. CI/C(GitHub Actions)D発火 a. Wagtail起動 b. PelicanがWagtailのコンテンツを取得しビルド c. 指定のサイトにデプロイ 4. 完成 成果物
34.
ソースコード https://github.com/nyo3q1/wagtail-pelican HTML生成の1部分エラーを吐いていますごめんなさい
35.
● ローコストを目指すため、WagtailのDBにSQLiteを利用したが、このやりかた では業務では使えない ○ Netlify
cmsのようなにGitリポジトリにコンテンツを保存していくやり方が非常に素晴らし い方法だと身に染みて分かった ● Pelicanは静的ファイルからサイトを生成するツール、動的コンテンツからサ イト生成には... ○ 今回Wagtailのコンテンツインポートプラグインを自作した、ツールの適材適所を見極めてい きたい 感想
36.
考察 個人的な最適解
37.
考察 ● バックエンド ○ WagtailでREST
API対応 ● フロントエンド(静的サイトジェネレーターとしても利用) ○ (Next.js, Gatsby.js) or Nuxt.js
38.
考察 ● SPA ○ 管理画面系 ○
速度、インデックスを犠牲にできる ● JAMstack ○ 動的な変化の少ないサイト ○ OGP, インデックス, 速度を犠牲に出来ないサイ ト 移行しやすい
39.
JAMstackはこれからもっと賑わっていく構成。 ● Django単体でJAMstack出来るようにするプラグイン ○ いくつかプラグインはありますが... ●
Pelicanが動的コンテンツの取得に対応 ● Jinja2を利用したサイト生成ツール などが出てくると思います 展望
40.
質疑応答
41.
ご清聴ありがとうございました
Download Now