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
Netlifyはいいぞ #技術同人誌再販Night
Search
tatsuaki watanabe
December 04, 2018
Technology
510
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Netlifyはいいぞ #技術同人誌再販Night
tatsuaki watanabe
December 04, 2018
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
300
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.9k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
12k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.7k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.5k
A story till the netlify fun book is made
nabettu
0
760
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
900
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.4k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
190
Other Decks in Technology
See All in Technology
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
koh_yoshi
4
1.2k
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
shift_evolve
PRO
1
150
【CEDEC2026】『Relink』を拡張せよ - 『GRANBLUE FANTASY: Relink - Endless Ragnarok』の開発速度と品質を守るCI運用
cygames
PRO
0
140
オートロックマンションなのに、各部屋は施錠なし!? 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
nttcom
1
1.6k
トヨタ⽣産⽅式(TPS)⼊⾨
recruitengineers
PRO
3
650
もう一度考える SRE チームの作り方・育て方 / Rethinking SRE #1: Building and Growing SRE Teams
rrreeeyyy
6
1k
Software Supply Chain Attackからクラウド環境を守るためにできること
lhazy
2
220
Redmine 7.0 新機能・機能強化解説(OSC2026京都ダイジェスト版)
vividtone
1
210
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
kk0n
0
1.7k
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
enakai00
7
4.4k
20分でわかるセキュアAPI
nwiizo
1
200
修正PRを食べてレビュースキルが賢くなる:Claude Codeによる自己改善サイクル
yuyaumetsu
6
1.4k
Featured
See All Featured
Un-Boring Meetings
codingconduct
0
380
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
460
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Faster Mobile Websites
deanohume
310
32k
How GitHub (no longer) Works
holman
316
150k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
200
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
460
For a Future-Friendly Web
brad_frost
183
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Six Lessons from altMBA
skipperchong
29
4.4k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.7k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Transcript
Netlifyはいいぞ ~2018/12/4 技術同人誌再販Night★#3~ 渡邊達明@株式会社クリモ
自己紹介 ◉ 渡邊 達明(わたなべ たつあき) ◉ twitterとか: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立
◉ 妻(代表)と法人設立 ◉ Webフロントエンド(Vue.jsやNuxt.js)& アプリエンジニア(React Native)
作ってます
◉ JAM : JavaScript + API + Markup(html)の組み合わせ 最近はシングルページアプリケーションや マイクロサービスアーキテクチャの
流行りの流れでJAMstackの流行がきています APIサーバーにして使う 分離したSPAサイトにする
◉ フロントエンドとバックエンドが疎結合になる (それぞれの責務に集中できる) ◉ マークアップが既にあるのでサイト読み込みが早い ◉ スケールアップも簡単(料金も安い) ◉ セキュリティも万全(あくまでサイト側が) 動的サイトを
htmlでできた静的サイトに変更すると・・・
◉ AWS S3:独自ドメイン+SSL対応がめんどくさい ◉ Firebase Hosting:gitから自動でやるにはCIが必要 ◉ GitHub Pages:サイトの公開データもgitに入れないとならな いし遅い
そんな静的Webサイトの 公開になにを使おうか・・・? その悩みを全部解決してくれるサービスがあるんです
それがNetlify ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、 自動でサイトホスティングができる ◉ 静的サイト公開のための便利機能が たくさん備わっている
Gitでブランチ切ってプッシュすると 自動でブランチ毎の公開サイトがつくられます ◉ 本番サイト ◉ テストサイト ◉ 新機能のプルリクエストのサイト など、用途に応じてなんとブランチを切ってpushするだけで それぞれの確認用サイトが出来上がる!
webhookでビルドなどももちろんできます。
静的サイトジェネレータを利用する場合、ビルドをCircle CIなどに 任せていた人も、Netlifyで完結するので管理が楽になります。 package.jsonにbuildコマンドがあれば自動で設定いらず! ビルドも自動でやってくれます
動的サイトのときには出来た痒いところを解決する 便利機能がたくさんあります ◉ 独自ドメイン設定 & HTTPS化 ◉ A/Bテストの自動出しわけ ◉ フォームの設置と投稿管理
◉ 独自のCMS&管理画面 ◉ プリレンダリング機能(動的コンテンツなのに OGPが分けられる) ◉ Functions (AWS Lambdaのラッパー) などなど。。。。とにかく静的サイトの公開において問題になる事への解決 策が取り揃っています。
◉ そんなNetlifyの豊富な機能を網羅的に 紹介・具体的な使い方を書いた本が 「ゼロから始めるNetlify」 です。よろしくお願いします! Boothでも売っています! 今日頒布する本の紹介
質問等あればこちらでも https://comets.nabettu.com/?id=saihannight Twitter等でも気軽にご連絡ください Thanks!