TECH
Vol.124
N.U.
The complete guide to getting started with Cloud Functions for firebase
What Is Cloud Functions for Firebase?
<p>Cloud Functions for Firebase is a cloud service provided by Google. It allows you to run code without building or maintaining your own server infrastructure.</p>
Prerequisites
Step 1: Create a Google account.
Step 2: Open the Firebase Console using the account from Step 1.
https://console.firebase.google.com/
Step 3: Click [Create a project] and follow the on-screen instructions to set up your project.
Step 4: Configure users and permissions as needed.
Click the [Settings icon] in the top-left corner, then go to [Users and permissions] to open the settings screen.<br>Note: Users with Editor permissions cannot deploy Functions.
Step 5: Upgrade your billing plan.
Cloud Functions is not available on the free tier, so you'll need to switch to the pay-as-you-go Blaze plan.
Project setup
Once the prerequisites are in place, it's time to configure your project.
Creating and Moving to a Local Folder
まずは、ローカルでフォルダを作成し、移動します。
mkdir test-project
cd test-project
Setting Up the Firebase CLI
プロジェクトでfirebaseコマンドを使うためにインストールします。
npm install -g firebase-tools
Logging in to Firebase
firebase login
上記のコマンドを実行すると自動でブラウザが立ち上がるので、アカウントを選択してログインします。以下のような表示が出たらログイン成功です。
❯ firebase login
Waiting for authentication...
device to log in:
✔ Success! Logged in as [email protected]
Initializing the App
アプリの初期化のために、以下のコマンドを実行します。
firebase init
すると、以下のような表示が出てきます。
❯ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/XXX/Documents/test-project
Selecting Configuration Files to Generate
使用したいサービスにカーソルを合わせ、Spaceで選択します。今回は、Functionsのみ選択しました。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
◯ 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
Use an existing projectを選択します。
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
事前準備で作成したProjectを選択します。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ test-project (test-project)
今回はJavaScriptを選択します。
? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript
TypeScript
今回はNoを選択します。
? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
Yesを選択し、npmをインストールします。
? Do you want to install dependencies with npm now? (Y/n)
これで、プロジェクトの設定が完了しました。フォルダを開くと、必要なファイルが作成されていることが確認できます。
Creating a Function
Open the generated functions/index.js file to review its contents. Uncommenting the sample code will reveal a test function.
In actual development, you'll replace this with your own logic. For this tutorial, we'll proceed to deployment as-is.
Deploying
Functionが完成したらDeployしましょう。
firebase deploy
以下のように表示されたらDeploy完了です。
=== Deploying to 'test-project'...
i deploying functions
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔ functions: required API cloudbuild.googleapis.com is enabled
✔ functions: required API cloudfunctions.googleapis.com is enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (27.77 KB) for uploading
✔ functions: functions folder uploaded successfully
i functions: creating Node.js 10 function helloWorld(us-central1)...
✔ functions[helloWorld(us-central1)]: Successful create operation.
Function URL (helloWorld): https://us-central1-test-project.cloudfunctions.net/helloWorld
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/test-project/overview
発行されたURLをブラウザに入力し、以下のように表示されていれば成功です。
Hello from Firebase!
応用編
In this section, we'll introduce some handy features worth knowing.
Running Locally Before Deployment
コードを修正するたびにDeployして動作確認だと大変です。そんな時はローカル環境で確認しましょう。
firebase emulators:start
Changing the Location
デフォルトはアイオワリージョンです。せっかくなら近くが良いので、今回は東京リージョンに変更します。
index.jsに.region('asia-northeast1')を追加します。
exports.helloWorld = functions
.region('asia-northeast1')
.https.onRequest((request, response) => {
functions.logger.info("Hello logs!", {structuredData: true});
response.send("Hello from Firebase!");
});
? Would you like to proceed with deletion? Selecting no will continue the rest of the deployments.
Deployの際にus-central1（アイオワリージョン）を削除しますか？と聞かれるのでYesを選択します。
i functions: deleting function helloWorld(us-central1)...
✔ functions[helloWorld(us-central1)]: Successful delete operation.
✔ functions[helloWorld(asia-northeast1)]: Successful create operation.
Function URL (helloWorld): https://asia-northeast1-test-project.cloudfunctions.net/helloWorld
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/test-project/overview
これで、東京リージョンのDeployが成功しました。
Conclusion
Our goal was to create a guide that covers those easy-to-overlook steps and hard-to-remember configuration details — a true "scratching where it itches" reference. We hope it proves useful to you.
Reference: Firebase Documentation
RECENT POSTS
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
