際際滷

際際滷Share a Scribd company logo
FirebaseとNuxtで
LPを恬ってみた
Roppongi.js #5 sponsor LT
Kenjiro Kubota
R&D何チ`フエンジニア
JavaScript, PHP, Golang...チョットカケル
2
3
レシピ
4
5
2014定にGoogleにIГ気譴BaaS/MBaaS
なんでもできます。
とってもすごいです。
6
Vue.jsでSSRができるフレ`ムワ`ク。 React.jsのNext.jsのVue井
いろいろできます。
とってもすごいです。
Vue.jsのマテリアルデザインコンポ`ネント蛤。
いろいろそろってます。
とってもすごいです。
もうこの撹為嵐指た。
7
でもめっちゃハマったんでそう冱わずにいてください。
ハマったポイント その
8
FirebaseでNuxtをSSRしたかった。
SSR
9
Functionsのg佩h廠が
Node.js V6狼なので恷仟のNuxtが咾ない。
v6.11.5 >=v8.0.0
10
でも、Nuxtは床議ファイルをき竃し
できるから。。
$ yarn run generate
^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
ハマったポイント そのr
12
FirebaseHostingでIP崙orBASICJ^
がしたかった。(_kr)
13
FirebaseFunctionsはExpressで
Routingできる。
https://firebase.google.com/docs/functions/http-events?hl=ja
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
このRoutingにIP崙泙箸BASICJ^の
I尖豫んだらええんやな???
app.get('/hoge', (req, res) => {
// ここにIP崙泙BASICJ^のI尖を豫む
})
app.get('/', (req, res) => {
console.log('なにも竃ない???');
})
と房ったけど、rootパス峺協したら
functionsがフックしないんですけど???
16
リダイレクトさせてみる。
{
"hosting": {
"rewrites": [{
"source": "**",
"function": "app"
}],
"redirects": [{
"source": "/",
"destination": "/auth"
}],
...
}
}
firebase.json
17
リダイレクトさせたパスでさらに
リダイレクトさせる丶
app.get('/auth', (req, res) => {
res.redirect('/index.html')
})
/ /auth /index.html
18
これでとりあえず佩けた櫃したが、
岷俊index.htmlを峺協したらo吭龍だった
/ /auth /index.html
19
Ajaxでパスワ`ド登協してNuxt箸
燕幣を竃し蛍ける唆
/ /auth
ハマったポイント その歌
20
FirebaseFunctionsのhttpsトリガ`が
SWい。
slowly
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). ̄
┳Uあまり聞われてないfunctionsはコンテナを唯峭させる
から「にrgかかるぞ。
22
\喘したらアクセスいっぱいあるから
コンテナ唯峭しないもん???寳え蕗
A.
AjaxのTimeoutを10昼まで阜ばして
とりあえず徨をる。
ハマったポイント その冒
23
FirebaseFunctionsから翌何hostへの
宥佚ができない。
24
Firestoreの筝を返してSendGridで
メ`ルを僕佚しようとした。
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
27
嗤創プランを弐sすることで並なきを誼る
28
まとめ
¢ NuxtでもLP殻業なら床議ファイルき竃しで}なし
¢ Firebase Functionsはハマりどころが謹い繁曳
¢ n署しましょう
29
thanks:)

More Related Content

酷庄姻艶恢温壊艶と鰻顎恰岳で晦永を恬って需た