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
1
430
Netlifyはいいぞ #技術同人誌再販Night
tatsuaki watanabe
December 04, 2018
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
240
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.1k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
9.1k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.6k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.3k
A story till the netlify fun book is made
nabettu
0
610
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
830
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
140
Other Decks in Technology
See All in Technology
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
300
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
300
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
いざ、BSC討伐の旅
nikinusu
2
780
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
Can We Measure Developer Productivity?
ewolff
1
150
Platform Engineering for Software Developers and Architects
syntasso
1
520
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Become a Pro
speakerdeck
PRO
25
5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Site-Speed That Sticks
csswizardry
0
23
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Speed Design
sergeychernyshev
24
610
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!