Roppongi.js #5 Sponsor LT

1. FirebaseとNuxtで
LPを作ってみた
Roppongi.js #5 sponsor LT

2. Kenjiro Kubota
R&D部チーフエンジニア
JavaScript, PHP, Golang...チョットカケル
2

3. 3

4. レシピ
4

5. 5
2014年にGoogleに買収されたBaaS/MBaaS
なんでもできます。
とってもすごいです。

6. 6
Vue.jsでSSRができるフレームワーク。 React.jsのNext.jsのVue版
いろいろできます。
とってもすごいです。
Vue.jsのマテリアルデザインコンポーネント群。
いろいろそろってます。
とってもすごいです。

7. もうこの構成百万回見た。
7
でもめっちゃハマったんでそう言わずに聞いてください。

8. ハマったポイント その壱
8
FirebaseでNuxtをSSRしたかった。
SSR

9. 9
Functionsの実行環境が
Node.js V6系なので最新のNuxtが動かない。
v6.11.5 >=v8.0.0

10. 10
でも、Nuxtは静的ファイルを書き出し
できるから！！！
$ yarn run generate

11. “The Cloud Functions Node.js 8 runtime is
based on Node.js version 8.11.1.
11
update(7/24)
The Node.js 8 Runtime
【参考】Firebase Functions で Node.js 8 使えるようになったぞ〜〜〜！！！
https://qiita.com/jgs/items/f8b781801f0b1646cab7

12. ハマったポイント その弐
12
FirebaseHostingでIP制限orBASIC認証
がしたかった。(開発時)

13. 13
FirebaseFunctionsはExpressで
Routingできる。
https://firebase.google.com/docs/functions/http-events?hl=ja

14. 14
const functions = require('firebase-functions')
const express = require('express')
const app = express()
app.get('/hoge', (req, res) => {
})
exports.app = functions.https.onRequest(app)
{
"hosting": {
"rewrites": [{
"source": "**",
"function": "app"
}],
...
}
}
firebase.json

15. 15
このRoutingにIP制限とかBASIC認証の
処理挟んだらええんやな・・・？
app.get('/hoge', (req, res) => {
// ここにIP制限かBASIC認証の処理を挟む
})
app.get('/', (req, res) => {
console.log('なにも出ない・・・');
})
と思ったけど、rootパス指定したら
functionsがフックしないんですけど・・・

16. 16
リダイレクトさせてみる。
{
"hosting": {
"rewrites": [{
"source": "**",
"function": "app"
}],
"redirects": [{
"source": "/",
"destination": "/auth"
}],
...
}
}
firebase.json

17. 17
リダイレクトさせたパスでさらに
リダイレクトさせる（笑）
app.get('/auth', (req, res) => {
res.redirect('/index.html')
})
/ /auth /index.html

18. 18
これでとりあえず行けた気がしたが、
直接index.htmlを指定したら無意味だった
/ /auth /index.html

19. 19
Ajaxでパスワード判定してNuxt側で
表示を出し分ける暫定対応
/ /auth

20. ハマったポイント その参
20
FirebaseFunctionsのhttpsトリガーが
糞遅い。
slowly

21. https://stackoverflow.com/questions/42726870/firebase-cloud-functions-is-very-slow
21
Q. Firebase cloud functions is very slow
“When your function hasn't been executed in some time, Cloud Functions puts it
in a mode that uses fewer resources. Then when you hit the function again, it
restores the environment from this mode. The time it takes to restore consists of
a fixed cost (e.g. restore the container) and a part variable cost (e.g. if you use a lot
of node modules, it may take longer).”
（超訳）あまり使われてないfunctionsはコンテナを停止させる
から復帰に時間かかるぞ。

22. 22
運用したらアクセスいっぱいあるから
コンテナ停止しないもん・・・（震え声
A.
AjaxのTimeoutを10秒まで伸ばして
とりあえず様子を見る。

23. ハマったポイント その肆
23
FirebaseFunctionsから外部hostへの
通信ができない。

24. 24
Firestoreの変更を検知してSendGridで
メールを送信しようとした。

25. 25
こんなエラーが、、、
{ Error: getaddrinfo ENOTFOUND api.sendgrid.com
api.sendgrid.com:443
at errnoException (dns.js:28:10)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:76:26)
code: 'ENOTFOUND',
errno: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'api.sendgrid.com',
host: 'api.sendgrid.com',
port: 443,
Config:
...

26. 26

27. 27
有料プランを契約することで事なきを得る

28. 28
まとめ
● NuxtでもLP程度なら静的ファイル書き出しで問題なし！
● Firebase Functionsはハマりどころが多い（個人比
● 課金しましょう

29. 29
thanks:)