1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

いまさらだけど簡単にFirebase触ってみる(Firebase Cloud Functionsでハローワールド)

Last updated at Posted at 2020-11-26

概要

これまでAWSでごにょごにょ、はしてきたのですがFirebaseにはほぼ触れてこなかったので簡単に触ってみます。

手順

プロジェクトの作成

・言われるがままにデフォルトっぽい設定で次へ次へ
スクリーンショット 2020-11-26 15.29.56.png
できました。

ウェブアプリの作成

上記スクリーンショットではもう作成された表示になっていますが、ウェブアプリの追加を選択します。
・適当な名前を付けて
・前記事のriot.jsのroot直下のindex.htmlにスクリプトをコピーしてペー。
・何の疑問も持たずにnpm install

$ npm install -g firebase-tools

・とりあえず全部今やる
image.png

・まずはログイン
YesするとブラウザでGoogleのログインフォームが出てくるのでログイン、完了するとサクセスと表示されます。

$ firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

~~~(省略)~~~
✔  Success! Logged in as [Your Name]

・(Riot.jsのルートディレクトリでよかったのか不安になりながら)init
何を作るか聞かれている気がするのでFunctionを選択、あとは適当に次へ次へ
結果的にはここで適当に選択しすぎてプロジェクトが新規追加されたけどご愛嬌。😇😇😇

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  [Your directory]

? Which Firebase CLI features do you want to set up for this folder? Press Space to select fea
tures, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to
 invert selection)
 ◯ 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
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

・作成されたfunction/index.jsのコメントアウトを外してデプロイ!

$ firebase deploy

がっ……駄目っ……!

Error: HTTP Error: 400, Billing account for project 'XXXXXXXXXXXX' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.

突然のエラー

nodeのバージョンが課金対象となっていた(今回だと12)ため、支払いの設定を有効にする必要があるようです。
今回は動けばいいのでバージョンを8に。

package.json
  "engines": {
    "node": "8"
  },

すると、nodeのバージョン上げろよというメッセージは出つつも、Deploy complete!

✔  functions[helloWorld([location])]: Successful create operation. 
Function URL (helloWorld): [URL]/helloWorld

⚠  functions: Warning: Node.js 8 functions are deprecated and will stop running on 2021-03-15. Please upgrade to Node.js 10 or greater by adding an entry like this to your package.json:
    
    {
      "engines": {
        "node": "12"
      }
    }

The Firebase CLI will stop deploying Node.js 8 functions in new versions beginning 2020-12-15, and deploys from all CLI versions will halt on 2021-02-15. For additional information, see: https://firebase.google.com/support/faq#functions-runtime


✔  Deploy complete!

Function URLにアクセスすると
スクリーンショット 2020-11-26 18.27.33.png

やりました。

おわりに

途中、何も考えずに突っ走ってみましたが普通にハローワールドできました。Firebaseが優しくてよかった。
大体お察しですが、次は Firebase - Riot.js でごにょごにょします。

参考

Firebase公式
【Firebase】deployがうまくいかない時の対処方法

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?