nginx 使用子網域部署多個網站

假設我有兩個網站,一個是site1,一個是site2,裡面各自放著網站資料並且有各自的index.html

現在我需要把他們放在同一個主機上,並且設定子網域:site1.domain.comsite2.domain.com

閱讀更多
0

純 css 實作類似Google表單浮動表單標題

Google表單通常都會有一種很酷表單標題效果,點到input時候原本在placeholder的標題就跑到左上角變成文字了,並且原本input的外框線也要斷開放進label

看圖比較懂:

快速作法就是把label的背景設定成跟整個表單整體的背景顏色一致,這樣就定位focus的時候位移到上方就好。

但是!!如果背景是一張圖或是漸層呢?label的背景顏色就不能只是固定的單色了。

這時候我們就要做到真正的透明label

閱讀更多
0

react 使用 useContext 實現跨組件存取狀態

我們在傳狀態到子組件時最常用的就是props,但是如果我們的組件非常多層,不可能一層一層props傳下去,這時候就可以使用redux或是react useContext hook來實現。今天就是要來介紹:useContext

閱讀更多
0

element-plus 使用 svg icon

幾個月前,element plus要使用icon的話,都是用font icon的方式,但是這幾個月有段過渡期,官網說明會漸漸將font icon轉移到svg icon,使用方式也會不同。

閱讀更多
0

vue3 使用 google map api

很許多api一樣,要使用的話要先創建帳號。

準備項目:

  1. 創建一個gcp帳號,並且建立一個專案project。
  2. 啟用google map api產生google map api key
  3. 創建一個vue3專案
閱讀更多
0

最新版本element plus 自訂主題 scss variables

最近將element plus 升級到最新版(1.1.0-beta.9)之後,發現之前設定的顏色變數竟然不起作用了。

閱讀更多
0

gitlab cicd 部署前端專案(vue or react)至 gce

一般來說單純部署前端其實不需要起一個 vm 去放,只要使用 gcp 的container registry+cloud run就可以了。

但是因為這次接的案子,客戶提供的api僅能用沒有ssl的方式請求,而cloud run部署出來的入口是有ssl的,因此就只好用傳統的部署方式到vm上。

在開始之前,你必須要準備好以下幾件事:

  1. 創建一個gcp vm ,並安裝好nginx。
  2. 將專案放在gitlab上。
閱讀更多
0

yarn 安裝套件出現錯誤 Integrity check failed for “graceful-fs” (computed integrity doesn’t match our records…

記錄一下在新電腦clone專案,遇到的安裝套件問題。

閱讀更多
0

M1 使用本地 docker push 到 cloud run 出現錯誤

最近公司配了一台M1,於是在本地像往常一樣build image然後推到contianer registry,到這邊都很順利,但是到cloud run去重新部署的時候,就出現Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable. Logs for this revision might contain more information. Logs URL:...錯誤,然後照著他的網址點進去,看到錯誤訊息:

閱讀更多
0