Google Cloud架設靜態網站

參考來源：

1. https://cloud.google.com/storage/docs/hosting-static-website?hl=en#before-you-begin

1. Setup Bucket

2. Setup load balancer & Certificate

1. Type of load balancer: 選 Application Load Balancer (HTTP/HTTPS)
   • 一般網頁服務用選這個就對了
   • 另一個是給 Network 層級用的，例如 TCP/UDP 等
2. Public facing or internal: 選 Public facing (external)
   • 一般網頁選這個就對了
   • Internel, 應該是給內部大量溝通用的，一般人應概是用不到吧
3. Global or single region deployment: 選 Best for global workloads
   • 全球要用的網頁就選這個吧 應該是為了Edge location用的
   • Best for regional workloads 肯定是比較省錢，但其他region用的話就比較慢
4. Load balancer generation: 選 Classic Application Load Balancer
   • Google文件叫我選的，反正應該是比較簡單
   • Global external Application Load Balancer
5. Create load balancer
   • 點 Configure 就對啦
6. Create classic Application Load Balancer
   • Load Balancer name: social-wall-lb
7. Frontend configuration
   • Protocol: HTTPS (includes HTTP/2 and HTTP/3)
   • IP version: IPV4
   • Ip address: Create IP address
     • Name: social-wall-ip
     • Click Reserve
   • Port: 443
   • Certificate: Create a new certificate
     • Name: social-wall-ssl
     • Create mode: Create Google-managed certificate
     • Domain: social-wall.kellly.me
     • Click Create
   • Enable HTTP to HTTPS direct: 打勾
     • 自動會把http:// redirect to https://
   • Click Done
8. Backend configuration
   • Backend services & backend buckets: Create a backend bucket
     • Cloud Storage bucket: Create new bucket
       • Get Started
         • Name: social-wall-static-assets
         • Click Continue
       • Choose where to store your data
         • Multi-region: asia
         • Click continue
       • Choose a storage class for you data
         • Leave default
         • Click continue
       • Choose how to control access to objects
         • Prevent public access
           • Enforce public access prevention on the bucket: 打勾
         • Access control
           • Uniform: 打勾
         • Click continue
       • Choose how to protect object data
         • click Create
       • Public access will be prevented dialog
         • Click Confirm
     • Select bucket social-wall-static-assets
     • Cloud CDN: 打勾
     • Cache mode: Cache static content (recommended)
     • Click create
     • Select social-wall-bucket as backend bucket
   • 應該會有兩個 Load balancer
     • 1. social-wall-lb: HTTPS
     • 2. social-wall-lb-forwarding-rule-redirect: HTTP
   • 點擊 social-wall-lb 查看 IP: port 可能是 34.8.200.200:443，記下來等等DNS會用到

3. DNS Configuration

• 新增一個 A 紀錄 www 給剛剛 Load balancer 的 IP
• 檢查DNS: 16:56
  • 進入Load Balancer -> 點擊 social-wall-lb -> 點擊 social-wall-ssl
  • 查看 Status, 如果是 PROVISIONING 代表還在準備，要等到 ACTIVE
  • 查看Domain statuc, 如果是 PROVISIONING 代表還在準備，要等到 ACTIVE

4. 設定Bucket

• Buckets -> social-wall-static-assets -> 點擊點點點 ->
  • 點擊 Edit website configuration
    • Index (main) page suffix: index.html
    • Error (404 not found) page: index.html
      • 這個就是 SPA 的關鍵設定
  • 點擊 Edit access
    • 點擊 Remove public access prevention
      • 點擊 Confirm
• 點擊 social-wall-static-assets
  • Permissions
    • grant access
      • New principals: allUsers
      • Assign roles: Storage Object Viewer
      • Click Allow public access
• 上傳所有檔案

5. Test Website

https://social-wall.kellly.me

會用到的Service:

• Cloud Storage
• Load Balancing
  • Cloud CDN
  • Certificate Manager
• DNS