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
480
Netlifyはいいぞ #技術同人誌再販Night
tatsuaki watanabe
December 04, 2018
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
270
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.6k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
10k
OG画像のためだけのFunctionsで、 htmlベタ書き&リダイレクトをやめるんだ
nabettu
3
1.6k
React Nativeにおける ExpoとFirebaseの活用 Webとの共通化 ~ React Native Tokyo 2019/09/03 ~
nabettu
2
1.4k
A story till the netlify fun book is made
nabettu
0
680
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
860
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
160
Other Decks in Technology
See All in Technology
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
知られざるprops命名の慣習 アクション編
uhyo
10
2.4k
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
270
Browser
recruitengineers
PRO
3
250
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
モダンフロントエンド 開発研修
recruitengineers
PRO
2
240
JavaScript 研修
recruitengineers
PRO
2
130
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
5
520
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
1
150
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
How to Ace a Technical Interview
jacobian
279
23k
A better future with KSS
kneath
239
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
A Modern Web Designer's Workflow
chriscoyier
695
190k
Agile that works and the tools we love
rasmusluckow
329
21k
KATA
mclloyd
32
14k
How GitHub (no longer) Works
holman
315
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Optimizing for Happiness
mojombo
379
70k
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!