Slide 1

Slide 1 text

Netlifyはいいぞ ~2018/12/4 技術同人誌再販Night★#3~ 渡邊達明@株式会社クリモ

Slide 2

Slide 2 text

自己紹介 ◉ 渡邊 達明(わたなべ たつあき) ◉ twitterとか: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉ 妻(代表)と法人設立 ◉ Webフロントエンド(Vue.jsやNuxt.js)& アプリエンジニア(React Native)

Slide 3

Slide 3 text

作ってます

Slide 4

Slide 4 text

◉ JAM : JavaScript + API + Markup(html)の組み合わせ 最近はシングルページアプリケーションや マイクロサービスアーキテクチャの 流行りの流れでJAMstackの流行がきています APIサーバーにして使う 分離したSPAサイトにする

Slide 5

Slide 5 text

◉ フロントエンドとバックエンドが疎結合になる  (それぞれの責務に集中できる) ◉ マークアップが既にあるのでサイト読み込みが早い ◉ スケールアップも簡単(料金も安い) ◉ セキュリティも万全(あくまでサイト側が) 動的サイトを htmlでできた静的サイトに変更すると・・・

Slide 6

Slide 6 text

◉ AWS S3:独自ドメイン+SSL対応がめんどくさい ◉ Firebase Hosting:gitから自動でやるにはCIが必要 ◉ GitHub Pages:サイトの公開データもgitに入れないとならな いし遅い そんな静的Webサイトの 公開になにを使おうか・・・? その悩みを全部解決してくれるサービスがあるんです

Slide 7

Slide 7 text

それがNetlify ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、 自動でサイトホスティングができる ◉ 静的サイト公開のための便利機能が たくさん備わっている

Slide 8

Slide 8 text

Gitでブランチ切ってプッシュすると 自動でブランチ毎の公開サイトがつくられます ◉ 本番サイト ◉ テストサイト ◉ 新機能のプルリクエストのサイト など、用途に応じてなんとブランチを切ってpushするだけで それぞれの確認用サイトが出来上がる! webhookでビルドなどももちろんできます。

Slide 9

Slide 9 text

静的サイトジェネレータを利用する場合、ビルドをCircle CIなどに 任せていた人も、Netlifyで完結するので管理が楽になります。 package.jsonにbuildコマンドがあれば自動で設定いらず! ビルドも自動でやってくれます

Slide 10

Slide 10 text

動的サイトのときには出来た痒いところを解決する 便利機能がたくさんあります ◉ 独自ドメイン設定 & HTTPS化 ◉ A/Bテストの自動出しわけ ◉ フォームの設置と投稿管理 ◉ 独自のCMS&管理画面 ◉ プリレンダリング機能(動的コンテンツなのに OGPが分けられる) ◉ Functions (AWS Lambdaのラッパー) などなど。。。。とにかく静的サイトの公開において問題になる事への解決 策が取り揃っています。

Slide 11

Slide 11 text

◉ そんなNetlifyの豊富な機能を網羅的に 紹介・具体的な使い方を書いた本が 「ゼロから始めるNetlify」 です。よろしくお願いします! Boothでも売っています! 今日頒布する本の紹介

Slide 12

Slide 12 text

質問等あればこちらでも https://comets.nabettu.com/?id=saihannight Twitter等でも気軽にご連絡ください Thanks!