React web 透過 github action 部屬到firebase hosting 架設網站

-

 


github project 建立

先去 https://github.com/ 建立一個專案,然後要把 user/repository 記起來
ex : kirinchen/firebase-react-demo
然後我們找個目錄把專案clone下來

react project 建立

npx create-react-app firebase-react-demo --template typescript

先決條件要先安裝 npm & nodejs
可以參考這裡 為什麼用React？什麼是Create-React-App？

先到該專案啟動測試看看



cd firebase-react-demo
npm start

console output








  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

打開瀏覽器 type http://localhost:3000

這樣就成功了!!

firebase hosting 設定

先到 https://console.firebase.google.com/ 新增一組 firebase project

再回到專案cmd下
如果沒有安裝過 firebase cli 請安裝

npm install -g firebase-tools

登入 Google

firebase login

啟動初始化專案：

firebase init

用方向鍵選擇到 然後用 空白鍵確定

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

然後選擇 (用方向鍵選擇)

Use an existing project

選擇剛剛建立的專案
之後選擇如下
























? What do you want to use as your public directory? build
...
? Set up automatic builds and deploys with GitHub? Yes
...

i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=xxx

Waiting for authentication...

+  Success! Logged into GitHub as kirinchen

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) kirinchen/firebase-react-demo

? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm run build

+  Created workflow file ...your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? main
...
+  Firebase initialization complete!

其中的 GitHub repository would you like to set up a GitHub workflow 是剛才我們設定的githut project

建立好後去project目錄下 .github/workflows/ 編輯

  • firebase-hosting-merge.yml
  • firebase-hosting-pull-request.yml

在原本steps - run: npm run build 上面增加 - run: npm install








...
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
...

github action CI 部屬

這時候只要在該目錄下




git add .
git commit -m "message"
git push -u origin main

git 相關可以參考 https://ithelp.ithome.com.tw/articles/10271811

這時候就部署好了 我們去github action 的頁面就可以看到部屬的log

這時候去 firebase 找到剛建立的project下,點選 hosting 服務

點選任一個連結 就可以看到我們剛透過 react create 建立的網站了

Enjoy!

範例

tags: React

留言

張貼留言

這個網誌中的熱門文章

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點...
閱讀完整內容

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return ...
閱讀完整內容

10月24日 「方程式編輯器」讓你用Word打數學算式、根號、平方

-
圖片
「方 程式編輯器」是微軟Office 2003內建的一個外掛功能，原本不存在於Word軟體內，不過可以在安裝Office或更新Office時重新安裝「方程式編輯器」這個功能，重開之 後，就可以透過「方程式編輯器」來輸入數學符號、開根號、平方…等等，對於一些相關科系或者中小學老師製作講義，都相當方便唷！ 安裝方法： 第1步 如果你電腦中的Office軟體在一開安裝時有勾選「方程式編輯器」這個項目的話，可以不用執行下面的安裝步驟。 如 我你的Office裡面找不到「方程式編輯器」這功能，則請依照下面方法，先由〔開始〕→【控制台】→「新增或移除程式」，開啟「新增或移除程式」對話 盒，找到之前安裝的「Microsoft Office Professional Edition 2003」項目後，在〔變更〕上按一下滑鼠左鍵。 第2步 出現Office的安裝畫面後，點選「新增或移除功能」，再按一下〔下一步〕。(此時會需要你插入你所購買的Office安裝光碟) 第3步 接著，勾選「選擇應用程式的進階自訂」，然後再按〔下一步〕。 第4步 接著先點選「Office」工具，拉開下拉選單後，點一下【方程式編輯器】，再點選【從我的電腦執行】，最後再按一下〔更新〕，即可將「方程式編輯器」功能安裝到你的電腦中，讓我們可以透過這個編輯器來編輯數學方程式。 使用方法： 第1步 確定你的電腦有安裝「方程式編輯器」功能後，重新開啟Word視窗，當我們要輸入數學算式時，依序按下〔插入〕→【物件】，準備開啟「方程式編輯器」。 第2步 出現「物件」對話盒後，切換到〔建立新物件〕活頁標籤中，再點選【Microsoft 方程式編輯器 3.0】，最後再按下〔確定〕。
閱讀完整內容