黑皮考町

  前言  當 Javascript 在存取資源的時候, 瀏覽器會禁止非同源的請求, 除非 Server 上有 CORS  設定讓瀏覽器知道哪些請求是可以允許被發送的 如何在 既有 Cloud Storage Bucket 上加入 CORS 設定 (以下使用 Terraform  來做設定) 假設 Cloud Storage 上有個非 Terraform 建立的 Bucket    首先, 建立資源描述 resource "google_storage_bucket" "andytest123" {   name          = "andytest123"   location      = "US" } Step 2. 把既有的資源設定從雲上讀下來 terraform import google_storage_bucket.image-store andy-prj/andytest123 Step 3. 補上 CORS 設定 resource "google_storage_bucket" "andytest123" {   name          = "andytest123"   location      = "US"   cors {     origin          = ["http://localhost:3000",     "https://web-stage.uc.r.appspot.com",     "https://web.uc.r.appspot.com"     ]     method          = ["GET"]     response_header = ["*"]     max_age_sec...

前言 這年頭要部署一個網站再也不用像十年前這麼地麻煩了, 這也驗證了科技始終來自於人性, 複雜的操作流程最終還是會被簡化成簡單的步驟 現在使用 Google Cloud Storage (簡稱 GCS) 的服務即可以用來快速地部署網頁 Step 1. 建立網頁 以下使用 React 建立的網頁來進行示範 $ npx create-react-app my-app $ cd my-app $ npm run build Step 2. 在 GCS 上建立 storage bucket  在 GCS 上建立一個放置網頁的空間 # gsutil mb gs://[BUCKET_NAME]/ $ gsutil mb gs://mywebapp777/ Step 3. 上傳檔案 將網頁上傳到 mywebapp777 的 bucket 內  # gsutil cp [OBJECT_LOCATION] gs://[DESTINATION_BUCKET_NAME]/ $ gsutil cp -r * gs://mywebapp777/ Step 4. 公開 預設是私有的, 若想讓他人可以存取, 必須將 bucket 內的檔案都公開 # gsutil iam ch allUsers:objectViewer gs:/[BUCKET_NAME] $ gsutil iam ch allUsers:objectViewer gs:/mywebappp777 Step 5. 設定 index page 設定首頁 # gsutil web set -m [INDEX_PAGE] -e [ERROR_PAGE] gs://[BUCKET_NAME] $ gsutil web set -m index.html -e 404.html gs://mywebappp777 Step 6 設定 Load Balancer 建立一個新的 Load Balancer 選擇 Http(s) Load Balancing 選擇 From Internet to my VMs 建立一個 Load Balancer 首先, 替 Load Balancer 命名,  接下來在 Bac...