iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
1
Modern Web

Angular Firebase 入門與實做系列 第 8

[Angular Firebase 入門與實做] Day-07 Cloud Firestore - Hosting

  • 分享至 

  • xImage
  •  

Life is a journey, not a destination.

Hosting

firebase有提供我們靜態檔案hosting的功能,讓我們的Angular可以對外讓人連線過來。

  • 安裝firebase-tools
npm i -g firebase-tools
  • 登入firebase
firebase login

他會詢問你要不要給他們收集錯誤訊息,筆者想幫助開發團隊,所以筆者選是

接著會轉跳到瀏覽器選擇登入帳號

登入後,會要求權限,允許後會顯示以下畫面

回到終端機看到以下畫面你就登入成功了!

Waiting for authentication...

+  Success! Logged in as 

Firebase 專案初始化

firebase init

  1. 是否繼續,Y 繼續
  2. 要使用那些功能,這裡我們把全部都選起來,database、firestore、hosting、functions、storage
  3. 選擇你要使用的專案

  1. 選擇語言,我們選擇ts
  2. 是否要使用tsline,yes
  3. 是否現在安裝npm package,false我們以後再安裝
  4. 預設資料夾是哪裡 輸入dist
  5. 使否所有網址導向index.html,yes

  1. 是否建立storage.rules檔案,yes

接著打開你的firebase.json,確認是否跟筆者的相同

{
  "functions": {
    "predeploy": "npm --prefix functions run build",
    "source": "functions"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

Deploy 事前準備

  1. 因為我們要使用prod的版本deploy到firebase,記得把envirenment.ts的config複製到envirenment.prod.ts。

  2. 編譯

ng build --prod --build-optimizer //用--prod --build-optimizer最佳化來編譯,最小化應用

Deploy

  • 我們雖然建立了其他相關的內容,筆者這邊展示只deploy hosting的部分
firebase deploy --only hosting // --only 後面加參數就會只發布該內容

看到以下畫面代表是成功了!

我們可以直接點擊Hosting URL在瀏覽器中開啟畫面查看是否有錯誤。

Deploy完成!

加入script

最後我們當然可以把方法加入在package.json的script之中,以便我們將來做deploy

"scripts": {
  "clean": "rimraf package-lock.json node_modules",
  "cleanAndUpdate": "ncu -a && npm run clean && ncu -d -a && npm install",
  "ng": "ng",
  "start": "ng serve -o",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "deploy:firebase": "ng build --prod --build-optimizer && firebase deploy --only hosting"
}

未來我們只需使用npm run deploy:firebase就能把專案deploy更新上去了!

新增網域

當你成功將專案hosting在firebase後,你可能不想使用https://你的網址.firebaseapp.com/這樣的domain,firebase也有新增網域的功能,以下我們使用freenom建立一個免費的 domain來解釋。

關於freenom申請免費網域的方式,筆者是參考電腦王阿達的這篇文章,大家可以根據上面的流程進行申請。

  • 在hosting頁面,點擊新增網域


輸入你的網域名稱,點擊繼續,然後我們會得到一組DNS TXT設定,如下圖

  • 到DNS服務填入TXT的數值
    我們這裡已freenom為例


我們選擇Type為TXT,在Target輸入剛剛得到的數值,輸入後點擊驗證

注意!如果您的Domain是剛註冊的,可能要等5~30分鐘才能驗證成功

  • 驗證成功後,會看到以下畫面,再次得到兩組DSN A 設定

我們一樣把設定複製到freenom的DNS

最後到firebase的頁面,點擊完成,我們Domain的設定就完成了!

最後打開你的網址看看,你可能會看到不安全的畫面,那是因為我們的A紀錄尚未生效,等他生效後就不會是顯示不安全了!

本日小節

今天我們把自己的專案deploy到firebase上了,並且加入了自己的Domain,相當簡單也很方便,筆者認為在deploy的部分,firebase設計的相當容易使用,相關的參數也很清楚,對使用者相當的友善,可以說是我們開發人員的一大福音!

參考文章

https://firebase.google.com/docs/hosting/?authuser=1
https://www.kocpc.com.tw/archives/14290
https://my.freenom.com


上一篇
[Angular Firebase 入門與實做] Day-06 Cloud Firestore - Querying Collections-2 offline-data
下一篇
[Angular Firebase 入門與實做] Day-08 Authentication
系列文
Angular Firebase 入門與實做31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言