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
460
Netlifyはいいぞ #技術同人誌再販Night
tatsuaki watanabe
December 04, 2018
Tweet
Share
More Decks by tatsuaki watanabe
See All by tatsuaki watanabe
4:3のスライド
nabettu
0
250
React Native for WebでもOGP対応がしたい! ~ TECH STAND #2 React Native 2020/12/18 ~
nabettu
1
6.4k
React Navigationを使って React Native WebでSPAを試してみた ~ React Native Meetup 2020/5/29 ~
nabettu
8
9.6k
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
640
Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり
nabettu
3
840
声をかけられるフリーランスエンジニアになるには
nabettu
5
1.3k
2016-01-25いいとも発表Atomパッケージ
nabettu
0
150
Other Decks in Technology
See All in Technology
大人の学び - マイクの持ち方について
kawaguti
PRO
3
670
Webブラウザのセキュリティ対策に役立つぞ!!~DevToolsの使い方~
masakiokuda
0
160
EMの仕事、あるいは顧客価値創出のアーキテクト
radiocat
0
110
マネコン操作いらず! TerraformでAWSインフラのコーディングに入門しよう
minorun365
PRO
5
1.6k
TDSE_20250311_AIxIoTビジネス共創ラボ第2回勉強会_発表資料.pdf
iotcomjpadmin
0
250
「エンジニアマネージャー」の役割を担っている / 担ってみたい方へのキャリアパスガイド
coconala_engineer
1
160
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略 / phper-kaigi-2025-ryu
carta_engineering
0
640
Microsoft_20250311_できるつくれるAIAgent.pdf
iotcomjpadmin
0
260
みんなで育てるNewsPicksのSLO
troter
4
1k
EM初心者として半年間マネジャーをやってみて分かったこと
sansantech
PRO
0
170
エンジニア採用と 技術広報の実践/acaricsummit2025
nishiuma
1
200
セキュリティグループの”タイプ”を改めて考えてみる
masakiokuda
0
160
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Fireside Chat
paigeccino
37
3.3k
Scaling GitHub
holman
459
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Language of Interfaces
destraynor
156
24k
Designing for humans not robots
tammielis
250
25k
Become a Pro
speakerdeck
PRO
26
5.2k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
The Pragmatic Product Professional
lauravandoore
32
6.5k
Gamification - CAS2011
davidbonilla
80
5.2k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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!