Netlify Meetup #003
https://gyazo.com/3f45cdd2a73a950e2a575df89a2c3afa
what really happens when you deploy a site on Netlify
Keiko Oda
Netlify API Team since May 2018
ex-Heroku
What really happens when you deploy a site on Netlify - Speaker Deck
Netlify
国際色ある・リモートフレンドリー
アメリカ人：非アメリカ人が半々
リモート：常勤が半々
在宅制度を火曜・木曜推奨
フロント：React.js
バック：Ruby on Rails
管理画面はJamstack
1. Connect your git reposittoy to Netlify
GitHub側
webhooks
PR
Code access
Netlify側
Comments to PRS
update GitHub Checks
2. Make changes / Git push
3. Run build based on the build settings
Netlify UI or netlify.toml
何をビルドするのか設定
build settingsとdeploy contextsを分離した（今日付け）
deploy summary
デプロイの結果が１度にみれるようになった
ファイルがどれだけかわったか
リダイレクトルールの検知
GitHub Checksで通知
build
Go
kubernetes
storage
AWS
kubernetes
API
Ruby on Rails
kubernetes
How Netlify’s deploying and routing infrastructure works
Migrating Netlify’s Continuous Deployment infra to Kubernetes (and everything we learned along the…
4. Publish the deploy
CDN Edgeサーバーを各国にいくらかもっている
東京にはフリーのEdgeサーバーが昔あった（今年の10月に撤去済み）
Enterprice契約だと使えるらしい
GitHubからデプロイをするとAPIがCDNにキャッシュを消す依頼を自動的にしてくれる
Jamstackのこれから
Jamstack Tokyo
sota yamashita
Contlize, Inc.
Behivee
Jamstack Tokyoの話
2017/10 React Meetupより興味が湧いた
いきおいでTokyoロゴをつくってもらった
https://gyazo.com/57c5c790188785df7fdb608bf887b058
Node学園でも発表
メンバー募集中
2018年の出来事からJamstackの未来を考える
そもそも生まれた背景とは？
Git（GitHub）
Microservices
API Economy（3rd Party API）
Modern JavaScript （ES6）
例
AWS Amplify
https://aws-amplify.github.io/
Custon Runtimes
Contentful
Thought Worksに載った
https://gyazo.com/051aaf1e3b1cdbaeb935c519d0601420
関連発表からみる海外の動向
JAMstack_conf
https://jamstackconf.com/
freeCodeCampでJAMStackをつかっている
TakeShape
Immutable Web Apps
https://immutablewebapps.org
Hackers Newsで盛り上がってた
まとめ
2018年はじめはあまりJamstack事例をきかなかった
後半になるにつれて実際につかってみた発表が増えた
今後参考にするによい記事もあがってきた
非エンジニアがエンジニアっぽく振る舞う方法
Netlify Meetup Tokyo
@endout
株式会社ABEJAでのNetlifyの活用方法
出会いは2017年
リブランディングのとき
好きなところ
操作ステップが少ない
デザイン・UIが好き
使用例
ABEJA主催 SIX 2019 | 2DAYS' AI CONFERENCE
ソリューションページ
Insight Details
6/13のWebサイトはNetlify
フォーム部分はformrunを使用している
無料で使えるメールフォームと顧客管理 | formrun (フォームラン)
初心者向け
Webサイトを立ち上げてほしい
ディレクトリをdndでアップして即立ち上げ
SSL化したい
Netlifyですでに設定済み
高速化したい
Asset optimization
その他
マーケメンバーもGitHubを触ってるので公開できる
CircleCIを触らない程度にはbuild設定可能
redirect, rewrite, proxyもgit pushで対応
Deploy Previewがいい
やりたいこと
Snippet Injection
Prerendering
GatsbyJS と Netlify で Jamstack なメディアを作っている話
@jaxx2104
リクルートマーケティングパートナーズ
https://speakerdeck.com/jaxx2104/gatsby-to-netlify-de-jamstack-namedeiakai-fa
React.js製の静的サイトジェネレーターGatsbyに移行した - Qiita
Netlifyでデプロイするといいとアドバイスをもらった
そこで知った
静的サイトジェネレーターとどう違うのか
API
再利用が可能
抽象化
スタートアップにおけるメディア開発のQCD
スケールしやすく
少人数で
初動早く
サービスがマイクロサービス化すると管理が大変
モノリシックな構成は避けたい
JAMstack構成が意外と最適では？
UIコンポーネントをパッケージ化
サービスから共通利用できるようにした
GraphQLとFirebaseの活用
サービスとメディア間のAPIの抽象化
インフラはNetlify
リリース前にインテグレーションでPR単位でプレビュー出来るのでレビュー快適
netlify-lambdaでもTypeScriptを使いたい！
@mottox2
https://speakerdeck.com/mottox2/netlify-lambda-typescript
netlify-lamda
node.js 8の記法で書く
外部のものはバンドルする必要がある
いい感じのwebpackとbabel設定でビルド
expressを立ち上げて開発サーバーを
Typescript
1.1.0から
@babel/preset-typescriptをインストール
型定義をインストール
@babel/aws-lambda
GitHub.icon https://github.com/mottox2/netlify-functions-typescript-starter
「ゼロから始めるNetlify」という技術同人誌の制作秘話
@nabettu
https://speakerdeck.com/nabettu/a-story-till-the-netlify-fun-book-is-made
comets 発表スライド上にコメントが流せるサービス
Netlifyでデプロイしている
Netlify日本語のドキュメントがほしい
同人誌をかきました
ゼロから始めるNetlify - @nabettu - BOOTH
https://gyazo.com/b2ea0423d7418ca0cdfd484c7b4eee2d
Netlifyを擬人化すると…？
秘書みたいな存在
「ねっとりちゃん」という名前
https://gyazo.com/528225e152b9857db0f7234152f9ea17 https://gyazo.com/9a23c05db7aec5014ee29fef353aab12
手帳とステッカーもろもろ
じゃんけん大会でNetlify靴下もらいました