Hosting Static Web บน Google Cloud Storage (GCS)

Google Cloud Storage เป็น Service ที่เก็บข้อมูลโดยใช้พื้นที่แบบออนไลน์หรือ บนคลาวน์
ทำการ อัพโหลด เว็บ Html ( Vue ) บน Google Cloud Storage แบบบ้าน คลิกๆ ลากๆ วางๆ

ก่อนอื่นเอาเว็บก่อน

มี static web สักตัว ในที่นี้ใช้ VueJs build ออกมา นำผลลัพท์ไปไว้ใน GCS

$ vue create web 
$ cd web

edit เพื่อเปลี่ยนหน้าตานิดหน่อย

• App.vue

....
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Hello GCS</h1>
  </div>
</template>
...
...

yarn serve

yarn build

จะได้เป็น Folder dist มา

ทำการ Create Record CNAME กับ Domain

ในที่นี้ใช้ Cloudflare

โดยทำการ set name เป็น subdomain ที่เราต้องการ ในที่นี้เป็น www โดยที่ data target เป็น c.storage.googleapis.com

ทำการสร้าง Bucket ใน GCS

• ไปที่ Google Cloud Storage

• ตั้งชื่อ Bucket ตาม subdomain ที่เรา ได้ทำการสร้าง Record CNAME ไว้

• จากนั้นจะได้ หน้า ประมาณนี้

• จากนั้น ลาก หรือ Upload File ใน dist ที่ Build ไว้ตอนแรก

ถัดไปทำการ Set Permission

• กดปุ่ม add user
  ตรง new user ใส่เป็น allUsers
  แล้วเลือก Role ตามนี้

จาก นั้นกด save และ allow public access

จากนั้น กลับไปที่หน้า แรกของ GCS

แก้ไข config web

ใส่เป็น path html ตัวที่เราต้องการให้ เป็น หน้าแรก ในที่นี้ เป็น index.html

ทดสอบ

เปิดไปที่ www.thnovice.me

GCS เป็น แบบ Free-tier

• เนื้อที่ไม่เกิน 5 GB
• get 1 ไฟล์ไม่เกิน 50,000 ครั้งต่อเดือน ( index.html , xx.css , xx.js นับ 3 )

ส่วนเรื่องค่าใช้จ่ายดูเพิ่มเติมได้ที่

Cloud Storage pricing | Google Cloud