firebase Cloud Functionsのdeployなど使い方(error対策/node.js express併用)

おすすめのオンラインプログラミング学習

firebase Cloud Functionsの使い方の覚書です。バックエンドはnode.jsのexpress利用しています。

目次

firebase Cloud Functionsの使い方

プロジェクトをアップグレード(従量制 Blaze)

Cloud FunctionsはBlazeプランにしないと使えません。。

左サイドバーの [ Functions ] > プロジェクトをアップグレード > (GCPに登録していない場合、ここでクレジットカードを登録する) > 購入 > 予算アラートの設定

FirebaseはGoogleが買収しているのは有名な話です。そのため、支払フォームはGCPと共通化されているようです。GCPはキャンペーンをやっているため、下記の順番がよろしいようです。

先にGCPに登録(無料枠300ドルゲット) → FIrebaseのプラン切り替え

詳細はqiitaをみてください。個人的にもこれにのりました。昔は有効期限が1年でしたが、90日に短縮されたようです。。Googleさんの引き締めでしょうか。。

Firebaseには3万円強のクレジットをゲットできる裏ワザがあった - Qiita
概要 Googleが提供するFirebaseは、モバイル用のmBaaSであったり、Webの静的コンテンツのホスティングにおいて非常に魅力のある製品です。 更にスモールビジネスであれば、過剰とも思える無料枠の大きさで、0円での運用...

予算アラートの設定は25ドルにした場合、次ののようです。若干、日本語訳が紛らわししいですが、、。

メールを受け取る費用は $12.50(50%)、$22.50(90%)、$25.00(100%)です。この設定は後から Google Cloud Console でカスタマイズ可能です。

金額を変更すると、上記のメッセージも変更されて、メールの通知タイミングが変わるようです。

アップグレード済の登録のメールアドレスにがきています。

(追記)failed as the billing account is not available

3ヶ月後、デプロイできなくなりました。

failed as the billing account is not available
Error: Functions did not deploy properly.

一度、無料プランに戻されるようです。アップグレードが必要です。Gmailを確認すると、以下のメールがきていました。

重要なお知らせ: トライアル期間が終了しました

インストール

firebase Cloud Functionsのインストール方法もまとめておきます。

firebase init
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
>◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

スペースで選択してenter。

? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript 
  TypeScript 

言語を選択。

その後はお好みですが、最後はyesがいいでしょう。

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? (Y/n) y

依存関係をインストールしないとビルド前にやるため、先にやるか後でやるかだけです。functtionのフォルダとその中身のファイルが生成されます。

firebase Cloud Functionsのdeploy

cd functions
firebase deploy --only functions ←このfunctionsのみデプロイします。

functionフォルダに移動し、デプロイします。

functions “最初のデプロイを待機しています”

ローカル環境で確認

デプロイが遅いという人はローカルエミュレーターで実行できます。package.jsonにコマンドが書かれています。

firebase emulators:start –only functions

もしくは後ほど紹介する下記がいいでしょう。

cd functions
node index.js

ただ、node index.jsではhostsとのつなぎの部分は確認できません。最終確認はデプロイが必要です。

リージョンの設定

東京リージョンにします。region(‘asia-northeast1’)を追加するだけです。

こう書き換えます。

exports.api = functions.region('asia-northeast1').https.onRequest(app)
// const api = functions.https.onRequest(app);
// module.exports = { api };
スポンサーリンク

firebase Cloud Functionsのエラー

Deploy complete!するけど「最初のデプロイを待機しています」に戻る

エラーはでないのですが、、

以前、開発を進めていると、Deploy complete!しているんだけど、「最初のデプロイを待機しています」に戻ってしまったことがありました。

index.js以下に下記のコードがなかったからです。他の場所に移動したらこうなりました。

const functions = require('firebase-functions');

// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions

 exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
 })

“Error: functions predeploy error: Command terminated with non-zero exit code2”

"Error: functions predeploy error: Command terminated with non-zero exit code2"

firebase initでCloud Functionsのeslintをいったんはずしました。そしたらcode1のエラーがでるようになりました。

“Error: functions predeploy error: Command terminated with non-zero exit code1”

"Error: functions predeploy error: Command terminated with non-zero exit code1"

eslintが悪さしているらしいです。インストール時にeslintを入れるとこうなるっぽいです。。

無効にしましょう。下記を削除すればOKです。

"predeploy": [
  "npm --prefix \"$RESOURCE_DIR\" run lint"
],

functions: Upload Error: HTTP Error: 403, Unknown Error

デプロイ時にでるエラーです。

functions: Upload Error: HTTP Error: 403, Unknown Error
firebase logout
firebase login

再ログインで解決しました。以上でデプロイができました。

Cannot GET

expressを利用した場合、firebaseからアドレスにアクセスしたとき、次のようなエラーがでることがあります。

Cannot GET

res.sendはこう。

res.send('Hello Express!')

しかし、ためしにurlを/のみにすると、hello expressなどの文字が表示できるはずです。

app.get('/users', (req, res) => {
  const users = [
    { id: 1, name: 'りんごくん' },
    { id: 2, name: 'みかんちゃん' },
    { id: 3, name: 'ぶどう男' }
  ]
  res.send(JSON.stringify(users))
}

usersをsendするなら、末尾に/usersをつけます。

Access to XMLHttpRequest at ‘http://pc-name:3000/api/’ from origin ‘http://localhost:3000’ has been blocked by CORS policy

Access to XMLHttpRequest at 'http://pc-name:3000/api/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.vue:94 error Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)
xhr.js:178 GET http://pc-name:3000/api/ net::ERR_FAILED

違うサイトにドメインのリクエストを送った場合にでるエラー。
CORS(Cross-Origin Resource Sharing )とは、異なるドメインでjavascriptのXMLHttpRequestやfetchなどのAJAX通信をする際にセキュリティ的に安全にやりとりができるよう定められた規約。オリジン (origin)とはこういうアドレス。https://localhost.co.jp:3300ドメインと違って最後にポートナンバーがつきます。分解すると、origin = protocol + domain + port number。

この問題はいろいろな解決方法が紹介されていますが、nuxtの場合、proxyを設定するのがよいようです。

Warning, FIREBASE_CONFIG and GCLOUD_PROJECT environment variables are missing. Initializing firebase-admin will fail

Warning, FIREBASE_CONFIG and GCLOUD_PROJECT environment variables are missing. Initializing firebase-admin will fail

firebase-functionsを読み込んでいるのに初期化の設定を書き忘れていたり。

Billing must be enabled for activation of service(s) ‘cloudbuild.googleapis.com,containerregistry.googleapis.com’ to proceed.

Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.

有料プランにしていないか、うっかりプロジェクトが無料のものになっている(例、リリースは有料プランだけど、devは無料。firebase useで切り替えが必要)

Error: could not handle the request

ブラウザに

Error: could not handle the request

firebaseのFunctionsのログにエラーがでているはずなので、そのエラーを片っ端から潰すべし。

スポンサーリンク

npm

The following functions are found in your project but do not exist in your local source code: helloWorld Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. (y/N) y

2回目に別関数を作るとデプロイ時に次のような問答がでます。前に作ったものを消していいのか否かのようです。

The following functions are found in your project but do not exist in your local source code: helloWorld Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. (y/N)
スポンサーリンク

node functions/index.js(デバッグ環境)

node.jsの起動方法です。expressを利用しています。

デプロイするなら次のコードはいりませんが、ローカル環境で検証するなら次のコードが必要です。

const server = app.listen(3300, '127.0.0.1', () => {
  const host = server.address().address
  const port = server.address().port
  console.log('App listening at http://%s:%s', host, port)
})

実行する命令は次のものになります。

node path/app.js

cloud functionの場合は次のような命令になります。cloud functionはいちいちデプロイすると時間がかかるため、ローカル環境で実行しましょう。console.logも表示されます。

node functions/index.js

cloud function以外の場合は次のようになりますかね。

node server/app.js

個人的にserverというフォルダをよく作るため。

node.jsのエラー

throw er; // Unhandled ‘error’ event

throw er; // Unhandled 'error' event

ローカルサーバーの二重起動ですかね…。

ローカルサーバーを停止させましょう。

lsof -i :3300

3300はポート番号です。このコマンドを入力すると、PIDの情報が表示されるためPIDをいれて停止させます。

kill -QUIT (pidの番号)

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

headersを再設定できないエラーです。return忘れが原因です。

return res.status(200).send()

Deployment error. Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause

Deployment error. Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause

ドキュメントみてね、と言っているだけなのであんま参考になりません。firebaseのfunctionsのログを追った方がよい。Ctrl+Fでerrorと検索するとよい。

今回は

Error: Cannot find module dotenv

をみつけた。メインにはインストールしてあったけど、functionsには入っていませんでした。npm installでいれたらあっさりと改善されました。

npm install dotenv --save

これに限らず、このエラーのときはfunctionnsの方に何かがインストールされていない場合が多いです。サーバーに何か移動していないか、何か新規で追加していないかを確認しましょう。

[HPM] Error occurred while trying to proxy request xxx from xxx to http://localhost:3000/ (ECONNREFUSED)(https://nodejs.org/api/errors.html#errors_common_system_errors)

[HPM] Error occurred while trying to proxy request xxx from xxx to http://localhost:3000/ (ECONNREFUSED)(https://nodejs.org/api/errors.html#errors_common_system_errors)

このエラーはnuxt.config.jsのtargetのアドレスを変えることにより回避できるようです。

  proxy: {
    '/api': {
      // target: 'http://localhost:3000/',
      target: 'localhost',
      pathRewrite: {
        '^/api': '/'
      }
    }
  }

throw new TypeError(‘Router.use() requires a middleware function but got a ‘ + gettype(fn))

throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))

書き忘れですかね。

module.exports = router

DeprecationWarning: Use of deprecated folder mapping

ビルドはとおるが、ビルド時に表示されるエラー。詳しくは調べていないが、nodeのバージョンを16から15に戻したら消えた。

ERROR  (node:6587) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /path/node_modules/@nuxt/components/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

cloud functionの学習

cloud functionの動画などはこちらの記事で紹介しています。

【udemyで大人買い】vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです...

javascrptやexpressなどはこちらの記事です。

動画編集/プログラミング/資産運用などUdemyのおすすめコース
プログラミング、動画編集、資産運用などudemyのすべて実経験でおすすめコースをまとめていきます。Udemyは日本に来る前から愛用しています。半分ぐらい英語の講座を買っています。 udemyはセールがあるため、とりあえず会員登録してお...

ご参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました