我选择Firebase来托管Nodejs应用的故事

2 年 ago
新, 韵
4 minutes

我之前并不完全了解Firebase，但在上一篇文章中使用了Google Cloud Functions后，我决定尝试新建一个Firebase项目。

我所做的是与以下网站相同的步骤，但为了学习的目的，在这篇文章中我将抄写下来。

用 Node.js 在 Firebase 上托管应用程序的最短路径 – Qiita

首先，您需要安装适用于Node.js的Firebase工具。

C:\>npm install -g firebase-tools

通过Firebase工具，登录到Google Cloud Functions上的Firebase。执行命令后，在GUI中会出现登录界面，请输入ID/密码

C:>\firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes

在本地上创建一个Firebase项目。执行firebase init命令后，逐步回答各种问题。顺便提一下，在这个过程中，你需要指定一个云上的Firebase项目，所以最好提前创建好。在这里，我指定了”myfirstfirebaseproject-a6cdc”。

C:\first_firebase>firebase init

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

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

  C:\first_firebase

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Functions: Configure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: myfirstfirebaseproject-a6cdc (MyFirstFirebaseProject)
i  Using project myfirstfirebaseproject-a6cdc (MyFirstFirebaseProject)

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? 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? No
+  Wrote functions/package.json
+  Wrote functions/index.js
+  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> protobufjs@6.8.8 postinstall C:\first_firebase\functions\node_modules\protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 249 packages from 199 contributors and audited 700 packages in 75.543s
found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Wrote public/404.html
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

如果部署成功，项目将在 Web 上得到展示。

    • 静的コンテンツは　https://＜Firebase のプロジェクト名＞.firebaseapp.com

 

    動的コンテンツは　https://us-central1-＜Firebase のプロジェクト名＞.cloudfunctions.net/helloWorld

可以确认。

静态内容显示的是本地public/index.html文件的内容，动态内容显示的是本地functions/index.js文件的内容。默认情况下，index.js文件的内容都被注释掉了，所以需要取消注释并进行部署才能进行显示确认。

C:\first_firebase>firebase deploy

=== Deploying to 'myfirstfirebaseproject-a6cdc'...

i  deploying functions, hosting
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (25.67 KB) for uploading
+  functions: functions folder uploaded successfully
i  hosting[myfirstfirebaseproject-a6cdc]: beginning deploy...
i  hosting[myfirstfirebaseproject-a6cdc]: found 2 files in public
+  hosting[myfirstfirebaseproject-a6cdc]: file upload complete
i  functions: creating Node.js 8 function helloWorld(us-central1)...
+  functions[helloWorld(us-central1)]: Successful create operation.
Function URL (helloWorld): https://us-central1-myfirstfirebaseproject-a6cdc.cloudfunctions.net/helloWorld
i  hosting[myfirstfirebaseproject-a6cdc]: finalizing version...
+  hosting[myfirstfirebaseproject-a6cdc]: version finalized
i  hosting[myfirstfirebaseproject-a6cdc]: releasing new version...
+  hosting[myfirstfirebaseproject-a6cdc]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/myfirstfirebaseproject-a6cdc/overview
Hosting URL: https://myfirstfirebaseproject-a6cdc.firebaseapp.com

如果在部署之前想要在本地进行确认，可以启动包含在Firebase中的服务器，并可以从本地进行确认。

    • 静的コンテンツは http://localhost:5000

動的コンテンツは http://localhost:5001/＜Firebase のプロジェクト名＞/us-central1/helloWorld

C:\first_firebase>firebase serve

=== Serving from 'C:\first_firebase'...

+  functions: Using node@8 from host.
i  hosting: Serving hosting files from: public
+  hosting: Local server: http://localhost:5000
127.0.0.1 - - [15/Jul/2019:07:03:39 +0000] "GET / HTTP/1.1" 200 3505 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
+  functions: Emulator started at http://localhost:5001
i  functions: Watching "C:\first_firebase\functions" for Cloud Functions...
127.0.0.1 - - [15/Jul/2019:07:03:39 +0000] "GET /__/firebase/init.js HTTP/1.1" 200 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
i  functions: HTTP trigger initialized at http://localhost:5001/myfirstfirebaseproject-a6cdc/us-central1/helloWorld
>  (node:8936) ExperimentalWarning: The http2 module is an experimental API.
i  functions: Beginning execution of "helloWorld"

心情

只需一个选项，以中国式的方式释义：通过 GUI 和 CUI 进行点击，完成部署，所以虽然没有太多的学习感受，但能够轻松地发布一个Web服务并且感觉很轻松。

我觉得在firebase serve上可以很轻松地进行本地调试，这点特别方便。虽然其他WebApp PaaS可能也是这样，但firebase全部打包到一个后端服务中，所以应该比其他WebApp或数据库结合的运营方式少遇到问题，感觉会更轻松一些，对此我很期待。

纯粹是附带的话题

未来的学习计划。

我的最终目标是“创造一个酷炫的网页服务”，而不仅仅是学习Firebase等后端和编程知识。因此，我想尽最短的路径，走向“创造一个酷炫的网页服务”的道路，为此进行技术学习。顺便提一下，为了实现“创造一个酷炫的网页服务”，我希望在设计方面下功夫，但我并没有从零开始进行设计的技术，所以我打算依靠某种框架，例如Vue.js。

现在，我需要从头开始学习HTML/CSS/JavaScript，以便能够使用Vue.js！但是，我发现要学到Vue.js需要几个月的时间，这让我失去了动力。因此，我决定从离目标最近的部分开始学习。也就是说，我的首要目标是在firebase上直接使用Vue.js。

虽然我也是一名工程师，即使通过复制粘贴来运行代码，我也会想要了解其背后的原理。因此，在达到最初的目标后，我会学习并深入理解支持Vue.js的技术node.js。然后，我会回到Vue.js(可能在实施复制粘贴部分后对其有更深入的了解)，自己进行定制并学习。然后，我会学习支持node.js的技术JavaScript…通过在技术层面上深入挖掘，并将学到的知识应用于离目标最近的部分，推进学习的方式。

    • vue.jsのチュートリアル

 

    • firebase + vue.jsで触ってみる

 

    • node.jsのチュートリアル

 

    • これを理解した上でfirebase + vue.js + node.jsで触ってみる

 

    • JavaScriptのチュートリアル

 

    これを理解した上でfirebase + vue.js + node.js + JavaScriptで触ってみる
✖
广告
将在 10 秒后关闭
bannerAds