Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FirebaseとNuxtでLPを作って見た

79 views

Published on

Roppongi.js #5 Sponsor LT

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

FirebaseとNuxtでLPを作って見た

  1. 1. FirebaseとNuxtで LPを作ってみた Roppongi.js #5 sponsor LT
  2. 2. Kenjiro Kubota R&D部チーフエンジニア JavaScript, PHP, Golang...チョットカケル 2
  3. 3. 3
  4. 4. レシピ 4
  5. 5. 5 2014年にGoogleに買収されたBaaS/MBaaS なんでもできます。 とってもすごいです。
  6. 6. 6 Vue.jsでSSRができるフレームワーク。 React.jsのNext.jsのVue版 いろいろできます。 とってもすごいです。 Vue.jsのマテリアルデザインコンポーネント群。 いろいろそろってます。 とってもすごいです。
  7. 7. もうこの構成百万回見た。 7 でもめっちゃハマったんでそう言わずに聞いてください。
  8. 8. ハマったポイント その壱 8 FirebaseでNuxtをSSRしたかった。 SSR
  9. 9. 9 Functionsの実行環境が Node.js V6系なので最新のNuxtが動かない。 v6.11.5 >=v8.0.0
  10. 10. 10 でも、Nuxtは静的ファイルを書き出し できるから!!! $ yarn run generate
  11. 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. ハマったポイント その弐 12 FirebaseHostingでIP制限orBASIC認証 がしたかった。(開発時)
  13. 13. 13 FirebaseFunctionsはExpressで Routingできる。 https://firebase.google.com/docs/functions/http-events?hl=ja
  14. 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. 15 このRoutingにIP制限とかBASIC認証の 処理挟んだらええんやな・・・? app.get('/hoge', (req, res) => { // ここにIP制限かBASIC認証の処理を挟む }) app.get('/', (req, res) => { console.log('なにも出ない・・・'); }) と思ったけど、rootパス指定したら functionsがフックしないんですけど・・・
  16. 16. 16 リダイレクトさせてみる。 { "hosting": { "rewrites": [{ "source": "**", "function": "app" }], "redirects": [{ "source": "/", "destination": "/auth" }], ... } } firebase.json
  17. 17. 17 リダイレクトさせたパスでさらに リダイレクトさせる(笑) app.get('/auth', (req, res) => { res.redirect('/index.html') }) / /auth /index.html
  18. 18. 18 これでとりあえず行けた気がしたが、 直接index.htmlを指定したら無意味だった / /auth /index.html
  19. 19. 19 Ajaxでパスワード判定してNuxt側で 表示を出し分ける暫定対応 / /auth
  20. 20. ハマったポイント その参 20 FirebaseFunctionsのhttpsトリガーが 糞遅い。 slowly
  21. 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. 22 運用したらアクセスいっぱいあるから コンテナ停止しないもん・・・(震え声 A. AjaxのTimeoutを10秒まで伸ばして とりあえず様子を見る。
  23. 23. ハマったポイント その肆 23 FirebaseFunctionsから外部hostへの 通信ができない。
  24. 24. 24 Firestoreの変更を検知してSendGridで メールを送信しようとした。
  25. 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. 26
  27. 27. 27 有料プランを契約することで事なきを得る
  28. 28. 28 まとめ ● NuxtでもLP程度なら静的ファイル書き出しで問題なし! ● Firebase Functionsはハマりどころが多い(個人比 ● 課金しましょう
  29. 29. 29 thanks:)

×