Firebase环境Setup

Project Pre-settings
1.1 Install Node.js
由于Backend和Frontend分别要求不同的Node.js版本，建议用Node.js多版本管理工具nvm来安装和切换Node.js版本。安装好nvm以后，分别执行下面的命令安装(命令提示符AP下)：

nvm install 10.13                                --目前部署前端使用的node版本
nvm install 10.14.2                               --目前部署后端使用的node版本

注：nvm下载路径：https://github.com/coreybutler/nvm-windows  nvm-setup.zip

1.2 Create firebase projects
a) Link：https://console.firebase.google.com/u/0/
b) 输入项目名称并成功创建该project
c) 在项目设置中选择时区

1.3 Reference
Firebase CLI reference
https://firebase.google.com/docs/cli/?authuser=0










Deploy Frontend
2.1 安装firebase CLI & Angular CLI
要使用Firebase托管这项服务托管您的站点，您需要有Firebase CLI（一个命令行工具）
运行以下命令以使用 npm 安装 Firebase CLI：

nvm use 10.13
npm install -g firebase-tools
npm install -g @angular/cli

2.2 指定路径下执行相关部署命令
cd  “local frontend code path”

nvm use 10.13
npm install                             --本地frontend文件下生成Node modules文件
ng build --prod                          --本地frontend文件下生成dist文件 

将生成的dist文件下内容 copy 到backend\public下方，command进入到\BackEnd \public目录下，cd \BackEnd \public执行以下命令：

nvm use 10.14.2
npm install -g firebase-tools
firebase login                     --使用您的Google帐号登录Firebase
firebase projects:list                --列出Firebase项目来测试CLI是否已正确安装，
以及是否能访问您的帐号
firebase use ‘Project ID’             --选择当前需要部署的项目

2.3 初始化您的项目
如果firebase project沒有初始化過(New project)，需要執行以下命令初始化:

firebase init  （衔接以上命令）

提示信息&选择如下：

F:\P4_Code\Firebase\Sample\FirebaseTestProject\Frontend>firebase init

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

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

  F:\P4_Code\Firebase\Sample\FirebaseTestProject\Frontend

? 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 confi
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi

rm your choices. 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.

? Please select an option: Use an existing project
i  Don't want to scroll through all your projects? If you know your project ID, you can initialize it directly using fir
ebase init --project <project_id>.

? Select a default Firebase project for this directory: multimanagementsystem (MultiManagementSystem)
i  Using project multimanagementsystem (MultiManagementSystem)

=== 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)? Yes
? Set up automatic builds and deploys with GitHub? No
+  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!

执行完毕后会产生如下结构文件夹
-+RootDit
  -+public
    --index.html
  --.firebaserc
  --.gitignore
  --firebase.json

.firebaserc文件内容

{
  "projects": {
    "default": "multimanagementsystem"
  }
}

.gitignore文件内容

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
firebase-debug.*.log*

# Firebase cache
.firebase/

# Firebase config

# Uncomment this if you'd like others to create their own Firebase project.
# For a team working on the same Firebase project(s), it is recommended to leave
# it commented so all members can deploy to the same project(s) in .firebaserc.
# .firebaserc

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

firebase.json文件内容

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

2.4 部署到Firebase托管

firebase deploy --only hosting    （衔接以上命令）

注：具体命令执行含义详见
https://firebase.google.com/docs/cli?authuser=0#windows-npm













Deploy Backend

cd  “local backend\functions code path”

nvm use 10.14.2
npm install                       --本地backend\functions文件下生成Node modules文件
npm run build –prod               --检查是否有代码报错
npm run lint                      --检查报错明细
firebase login                     --使用您的Google帐号登录Firebase
firebase projects:list                --列出当前帐号能访问的项目内容
firebase use ‘Project ID’             --选择当前需要部署的项目

3.2 Deploy Functions
Functions:

firebase deploy --only functions

3.3 Related Documents
https://cloud.google.com/docs
https://cloud.google.com/sdk/gcloud/reference/functions/deploy