ตั้งค่าและจัดการโปรเจ็กต์และผลิตภัณฑ์ Firebase ผ่าน Terraform

1. บทนำ

เป้าหมาย

คุณใช้ Terraform เพื่อตั้งค่าและจัดการโปรเจ็กต์ Firebase ได้ รวมถึงการกำหนดค่าโครงสร้างพื้นฐานและผลิตภัณฑ์ Firebase โดยอัตโนมัติ

Codelab นี้จะอธิบายวิธีสร้างไฟล์กำหนดค่า Terraform เพื่อสร้างโปรเจ็กต์ Firebase ใหม่ก่อน จากนั้นจึงอธิบายวิธีกำหนดค่าแอปและผลิตภัณฑ์ Firebase ที่คุณต้องการใช้ในโปรเจ็กต์นั้น นอกจากนี้ เรายังครอบคลุมพื้นฐานของบรรทัดคำสั่ง Terraform เช่น การแสดงตัวอย่างการเปลี่ยนแปลงที่จะทำ แล้วจึงนำไปใช้

หากต้องการดูวิธีตั้งค่าและจัดการโปรเจ็กต์และผลิตภัณฑ์ของ Firebase ด้วย Terraform Codelab นี้เหมาะสำหรับคุณ

สิ่งที่คุณจะได้เรียนรู้

• วิธีสร้างไฟล์การกำหนดค่า Terraform (*.tf)
• วิธีใช้คำสั่ง Terraform CLI เพื่อจัดการโครงสร้างพื้นฐาน
• วิธีแก้ไขการกำหนดค่าเพื่ออัปเดตทรัพยากรและบริการ
• วิธีใช้การกำหนดค่ากับเว็บแอปจริง (ชื่อว่า Friendly Chat)
• วิธีกำหนดการกำหนดค่าแบบคู่ขนาน (และซิงค์) ในสภาพแวดล้อมต่างๆ (การผลิต การทดสอบ ฯลฯ)

สิ่งที่ต้องมี

• เทอร์มินัล/คอนโซล
• IDE/โปรแกรมแก้ไขข้อความที่คุณเลือก เช่น WebStorm, Atom, Sublime หรือ VS Code
• เบราว์เซอร์ที่คุณเลือก เช่น Chrome
• Google Cloud CLI (gcloud CLI) - ติดตั้ง CLI นี้และเข้าสู่ระบบโดยใช้บัญชีผู้ใช้หรือบัญชีบริการ

คุณต้องมีความรู้พื้นฐานเกี่ยวกับ Terraform และคำศัพท์ของ Terraform รวมถึงข้อกำหนดเบื้องต้นต่อไปนี้จึงจะทำ Codelab นี้ได้สำเร็จ

• ติดตั้ง Terraform และทำความคุ้นเคยกับ Terraform โดยใช้บทแนะนำอย่างเป็นทางการ

Codelab นี้มีแอปตัวอย่างจริงเพื่อให้คุณทดสอบและโต้ตอบกับสิ่งที่จัดสรรผ่าน Terraform ได้ โดยคุณจะต้องมีสิ่งต่อไปนี้

• โค้ดตัวอย่างสำหรับเว็บแอป - ดาวน์โหลดโค้ดนี้ในขั้นตอนถัดไปของ Codelab
• โปรแกรมจัดการแพ็กเกจ npm (ซึ่งมักจะมาพร้อมกับ Node.js) - ติดตั้งเครื่องมือเหล่านี้
• Firebase CLI - ติดตั้ง CLI นี้และเข้าสู่ระบบ

2. รับโค้ดเริ่มต้น

ใน Codelab นี้ คุณสามารถทดสอบสิ่งที่จัดสรรผ่าน Terraform ด้วยเว็บแอปจริงได้ เราขอแนะนำให้ทำเช่นนี้เพื่อให้คุณเข้าใจขั้นตอนทั้งหมดที่จำเป็นในการใช้ทรัพยากรที่จัดสรรโดย Terraform

โคลนที่เก็บ GitHub ของ Codelab จากบรรทัดคำสั่งโดยใช้คำสั่งต่อไปนี้

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากไม่ได้ติดตั้ง git คุณสามารถดาวน์โหลดที่เก็บเป็นไฟล์ ZIP

3. สร้างการกำหนดค่า Terraform

การตั้งค่า Terraform

1. ในฐานของโค้ดของแอปตัวอย่างที่ดาวน์โหลด ให้ไปที่รูทของไดเรกทอรี web
2. ที่รูทของไดเรกทอรีนั้น ให้สร้างไฟล์การกำหนดค่า Terraform ชื่อ main.tf โดยมีการตั้งค่าเริ่มต้นต่อไปนี้
   
   main.tf

   # Terraform configuration to set up providers by version.
   terraform {
     required_providers {
       google-beta = {
         source  = "hashicorp/google-beta"
         version = "~> 7.0"
       }
     }
   }
   
   # Configure the provider not to use the specified project for quota check.
   # This provider should only be used during project creation and initializing services.
   provider "google-beta" {
     alias                 = "no_user_project_override"
     user_project_override = false
   }
   
   # Configure the provider that uses the new project's quota.
   provider "google-beta" {
     user_project_override = true
   }
   

ผู้ให้บริการแต่ละรายมีแอตทริบิวต์ชื่อ user_project_override ซึ่งกำหนดวิธีตรวจสอบโควต้าของการดำเนินการจาก Terraformgoogle-beta สำหรับการจัดสรรทรัพยากรส่วนใหญ่ คุณควรใช้ user_project_override = true ซึ่งหมายถึงการตรวจสอบโควต้าเทียบกับโปรเจ็กต์ Firebase ของคุณเอง อย่างไรก็ตาม หากต้องการตั้งค่าโปรเจ็กต์ใหม่เพื่อให้ยอมรับการตรวจสอบโควต้า คุณต้องใช้ user_project_override=false ก่อน ไวยากรณ์ Terraform alias ช่วยให้คุณแยกความแตกต่างระหว่างการตั้งค่าผู้ให้บริการทั้ง 2 รายในขั้นตอนถัดไปของ Codelab นี้ได้

เริ่มต้น Terraform ในไดเรกทอรี

การสร้างการกำหนดค่าใหม่เป็นครั้งแรกต้องดาวน์โหลดผู้ให้บริการที่ระบุในการกำหนดค่า

หากต้องการเริ่มต้น ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีเดียวกับไฟล์กำหนดค่า main.tf

terraform init

4. สร้างโปรเจ็กต์ Firebase ผ่าน Terraform

หากต้องการ "สร้างโปรเจ็กต์ Firebase" โปรดทราบว่าโปรเจ็กต์ Firebase แต่ละโปรเจ็กต์คือโปรเจ็กต์ Google Cloud ที่เปิดใช้บริการ Firebase

เพิ่มบล็อกสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google และ API ที่เกี่ยวข้อง

1. ก่อนอื่น ให้จัดสรรโปรเจ็กต์ Google Cloud ที่เกี่ยวข้อง
   
   เพิ่มบล็อกทรัพยากรต่อไปนี้ลงในไฟล์กำหนดค่า main.tf
   คุณต้องระบุชื่อโปรเจ็กต์ของคุณเอง (เช่น "Terraform FriendlyChat Codelab") และรหัสโปรเจ็กต์ของคุณเอง (เช่น "terraform-codelab-your-initials") โปรดทราบว่าค่า name จะใช้ภายในอินเทอร์เฟซ Firebase เท่านั้น และผู้ใช้ปลายทางจะไม่เห็น
   อย่างไรก็ตาม project_id ค่านี้จะระบุโปรเจ็กต์ของคุณต่อ Google โดยไม่ซ้ำกัน ดังนั้นโปรดระบุค่าที่ไม่ซ้ำกัน main.tf

   ...
   
   # Create a new Google Cloud project.
   resource "google_project" "default" {
     provider = google-beta.no_user_project_override
   
     name            = "<PROJECT_NAME_OF_YOUR_PROJECT>"
     project_id      = "<PROJECT_ID_OF_YOUR_PROJECT>"
   
     billing_account = "<YOUR_BILLING_ACCOUNT_ID>" # Add this line with your Cloud Billing account ID
   }
   

2. จากนั้นคุณต้องเปิดใช้ API พื้นฐานที่จำเป็น ได้แก่ Service Usage API และ Firebase Management API
   
   โดยปกติแล้วระบบจะจัดการการเปิดใช้ API นี้เบื้องหลังเมื่อคุณใช้คอนโซล Firebase เพื่อสร้างโปรเจ็กต์ Firebase แต่ Terraform ต้องได้รับการแจ้งให้เปิดใช้โดยชัดแจ้ง
   
   ในmain.tfไฟล์การกำหนดค่า (ใต้บล็อกที่สร้างโปรเจ็กต์ที่อยู่ในระบบคลาวด์ใหม่) ให้เพิ่มบล็อกทรัพยากรต่อไปนี้
   
   main.tf

   ...
   
   # Enable the required underlying Service Usage API.
   resource "google_project_service" "serviceusage" {
     provider = google-beta.no_user_project_override
   
     project = google_project.default.project_id
     service = "serviceusage.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Enable the required underlying Firebase Management API.
   resource "google_project_service" "firebase" {
     provider = google-beta.no_user_project_override
   
     project = google_project.default.project_id
     service = "firebase.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   

   การเปิดใช้ Service Usage API จะช่วยให้โปรเจ็กต์ใหม่ของคุณยอมรับการตรวจสอบโควต้าได้ ดังนั้นสำหรับการจัดสรรทรัพยากรและการเปิดใช้บริการในภายหลังทั้งหมด คุณควรใช้ผู้ให้บริการที่มี user_project_override (ไม่จำเป็นต้องใช้นามแฝง)

เพิ่มบล็อกเพื่อเปิดใช้บริการ Firebase

สิ่งสุดท้ายที่ต้องทำเพื่อ "สร้างโปรเจ็กต์ Firebase" คือการเปิดใช้บริการ Firebase ในโปรเจ็กต์

ในไฟล์การกำหนดค่า main.tf ให้เพิ่มบล็อกทรัพยากรต่อไปนี้

ดังที่กล่าวไว้ข้างต้น โปรดทราบว่าบล็อกทรัพยากรนี้ใช้ผู้ให้บริการที่มี user_project_override (ไม่จำเป็นต้องใช้นามแฝง)

main.tf

...

# Enable Firebase services for the new project created above.
resource "google_firebase_project" "default" {
  provider = google-beta

  project = google_project.default.project_id

  # Wait until the required APIs are enabled.
  depends_on = [
    google_project_service.firebase,
    google_project_service.serviceusage,
  ]
}

ในบล็อกทรัพยากรด้านบน คุณอาจเห็นข้อความ depends_on ซึ่งบอกให้ Terraform รอจนกว่าจะเปิดใช้ API พื้นฐาน หากไม่มีข้อนี้ Terraform จะไม่ทราบการขึ้นต่อกันและอาจเกิดข้อผิดพลาดเมื่อจัดสรรทรัพยากรแบบขนาน

ใช้การกำหนดค่า

1. หากต้องการจัดสรรทรัพยากรใหม่และเปิดใช้ API ที่ระบุไว้ในไฟล์การกำหนดค่า ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีเดียวกับไฟล์ main.tf (ซึ่งควรเป็น web)

   terraform apply
   

2. ในเทอร์มินัล Terraform จะพิมพ์แผนการดำเนินการที่จะดำเนินการ
   
   หากทุกอย่างดูเป็นไปตามที่คาดไว้ ให้อนุมัติการดำเนินการโดยป้อน yes
   
   main.tf

   Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following symbols:
     + create
   
   Terraform will perform the following actions:
   
     # google_firebase_project.default will be created
     + resource "google_firebase_project" "default" {
         + display_name   = (known after apply)
         + id             = (known after apply)
         + project        = "terraform-friendlychat-codelab"
         + project_number = (known after apply)
       }
   
     # google_project.default will be created
     + resource "google_project" "default" {
         + auto_create_network = true
         + id                  = (known after apply)
         + name                = "Terraform FriendlyChat Codelab"
         + number              = (known after apply)
         + project_id          = "terraform-friendlychat-codelab"
         + skip_delete         = (known after apply)
       }
   
     # google_project_service.firebase will be created
     + resource "google_project_service" "firebase" {
         + disable_on_destroy = false
         + id                 = (known after apply)
         + project            = "terraform-friendlychat-codelab"
         + service            = "firebase.googleapis.com"
       }
   
     # google_project_service.serviceusage will be created
     + resource "google_project_service" "serviceusage" {
         + disable_on_destroy = false
         + id                 = (known after apply)
         + project            = "terraform-friendlychat-codelab"
         + service            = "serviceusage.googleapis.com"
       }
   
   Plan: 4 to add, 0 to change, 0 to destroy.
   
   Do you want to perform these actions?
     Terraform will perform the actions described above.
     Only 'yes' will be accepted to approve.
   
     Enter a value: yes # <----
   

โปรดทราบว่าหากต้องการดูตัวอย่างการเปลี่ยนแปลงโดยไม่ต้องใช้ คุณสามารถใช้คำสั่ง terraform plan แทนได้

ตรวจสอบการเปลี่ยนแปลง

หลังจาก Terraform ทำงานเสร็จแล้ว คุณจะตรวจสอบสถานะของทรัพยากรและบริการทั้งหมดที่จัดสรรโดย Terraform และเปิดใช้ได้โดยเรียกใช้คำสั่งต่อไปนี้

terraform show

ตัวอย่างสิ่งที่คุณควรเห็นเมื่อพิมพ์ สถานะจะมีค่าที่เฉพาะเจาะจงสำหรับโปรเจ็กต์ของคุณ

# google_firebase_project.default:
resource "google_firebase_project" "default" {
    display_name   = "Terraform FriendlyChat Codelab"
    id             = "projects/terraform-friendlychat-codelab"
    project        = "terraform-friendlychat-codelab"
    project_number = "000000000"
}

# google_project.default:
resource "google_project" "default" {
    auto_create_network = true
    id                  = "projects/terraform-friendlychat-codelab"
    name                = "Terraform FriendlyChat Codelab"
    number              = "000000000"
    project_id          = "terraform-friendlychat-codelab"
}

# google_project_service.firebase:
resource "google_project_service" "firebase" {
    disable_on_destroy = false
    id                 = "terraform-friendlychat-codelab/firebase.googleapis.com"
    project            = "terraform-friendlychat-codelab"
    service            = "firebase.googleapis.com"
}

# google_project_service.serviceusage:
resource "google_project_service" "serviceusage" {
    disable_on_destroy = false
    id                 = "terraform-friendlychat-codelab/serviceusage.googleapis.com"
    project            = "terraform-friendlychat-codelab"
    service            = "serviceusage.googleapis.com"
}

หรือคุณจะยืนยันว่าโปรเจ็กต์สร้างขึ้นโดยดูในคอนโซล Firebase ก็ได้

5. ลงทะเบียนแอป Firebase ผ่าน Terraform

หากต้องการใช้ Firebase คุณต้องลงทะเบียนแอปแต่ละแพลตฟอร์มในโปรเจ็กต์ Firebase ใน Codelab นี้ คุณจะได้ใช้แอปจริงเพื่อทดสอบและโต้ตอบกับสิ่งที่จัดสรรผ่าน Terraform แอปนี้เป็นเว็บแอป ดังนั้นคุณต้องบอก Terraform ให้ลงทะเบียน Firebase Web App ในโปรเจ็กต์ Firebase ที่สร้างขึ้นใหม่

เพิ่มบล็อกเพื่อลงทะเบียนเว็บแอป

หากต้องการลงทะเบียนเว็บแอปในโปรเจ็กต์ Firebase ให้ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้

คุณต้องระบุ display_name ของเว็บแอปด้วยตนเอง โปรดทราบว่าชื่อนี้จะใช้ภายในอินเทอร์เฟซ Firebase เท่านั้น และผู้ใช้ปลายทางจะไม่เห็นชื่อนี้

main.tf

...

# Create a Firebase Web App in the new project created above.
resource "google_firebase_web_app" "default" {
  provider = google-beta

  project      = google_firebase_project.default.project
  display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
}

ใช้การกำหนดค่า

1. หากต้องการจัดสรรทรัพยากรใหม่ ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีเดียวกับไฟล์ main.tf (ซึ่งควรเป็น web)

   terraform apply
   

   โปรดทราบว่าคำสั่งนี้จะไม่สร้างโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ใหม่ Terraform จะตรวจพบว่ามีโปรเจ็กต์ที่มีรหัสโปรเจ็กต์ที่ระบุอยู่แล้ว และจะเปรียบเทียบสถานะปัจจุบันของโปรเจ็กต์กับสถานะในไฟล์ .tf และทำการเปลี่ยนแปลงที่พบ
2. ตรวจสอบแผนการดำเนินการที่พิมพ์ออกมา หากทุกอย่างเป็นไปตามที่คาดไว้ ให้พิมพ์ yes แล้วกด Enter เพื่ออนุมัติการดำเนินการ

ตรวจสอบการเปลี่ยนแปลง

คุณตรวจสอบสถานะของทรัพยากรที่จัดสรรใหม่ได้โดยเรียกใช้คำสั่งต่อไปนี้

terraform show

หรือคุณจะยืนยันว่าลงทะเบียนแอปในโปรเจ็กต์เรียบร้อยแล้วได้โดยดูในคอนโซล Firebase ไปที่การตั้งค่าโปรเจ็กต์ แล้วเลื่อนลงไปที่ส่วนแอปของคุณ

6. ตั้งค่าการตรวจสอบสิทธิ์ Firebase

การตรวจสอบสิทธิ์เป็นส่วนสำคัญของแอปทุกแอป หากต้องการอนุญาตให้ผู้ใช้ปลายทางลงชื่อเข้าใช้เว็บแอปด้วยบัญชี Google คุณสามารถเปิดใช้การตรวจสอบสิทธิ์ Firebase และตั้งค่าวิธีการลงชื่อเข้าใช้ด้วย Google ได้

โปรดทราบว่าในโค้ดแล็บนี้ เรามีตัวเลือก 2 แบบในการตั้งค่าการตรวจสอบสิทธิ์ Firebase

• ตัวเลือกที่ 1 (แนะนํา): ตั้งค่าการตรวจสอบสิทธิ์ Firebase ในคอนโซล Firebase ซึ่งไม่จําเป็นต้องใช้ GCIP
  • การใช้ตัวเลือกนี้หมายความว่าคุณไม่ต้องลิงก์โปรเจ็กต์ใหม่กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud โปรดทราบว่า Codelab นี้ต้องมีบัญชีสำหรับการเรียกเก็บเงินเพื่อใช้ Cloud Storage ดังนั้นการกำหนดค่า Terraform เริ่มต้นจึงลิงก์บัญชีสำหรับการเรียกเก็บเงินไว้แล้ว
• ตัวเลือกที่ 2: ตั้งค่าการตรวจสอบสิทธิ์ Firebase ผ่าน Terraform โดยใช้ Google Cloud Identity Platform (GCIP) API
  • การใช้ตัวเลือกนี้หมายความว่าคุณต้องลิงก์โปรเจ็กต์ใหม่กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud เนื่องจาก GCIP กำหนดให้โปรเจ็กต์ต้องอยู่ในแพ็กเกจราคา Blaze

ตัวเลือกที่ 1: ตั้งค่าการตรวจสอบสิทธิ์โดยใช้คอนโซล Firebase

หากต้องการตั้งค่าการตรวจสอบสิทธิ์ Firebase โดยใช้คอนโซล Firebase โปรเจ็กต์ของคุณไม่จำเป็นต้องอยู่ในแพ็กเกจราคา Blaze

วิธีตั้งค่าการตรวจสอบสิทธิ์ Firebase และลงชื่อเข้าใช้ด้วย Google มีดังนี้

1. ในคอนโซล Firebase ให้ค้นหาส่วนฐานข้อมูลและการจัดเก็บข้อมูลในแผงด้านซ้าย
2. คลิก Authentication คลิกเริ่มต้นใช้งาน แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปที่แท็บดังกล่าวโดยตรง)
3. คลิกเพิ่มผู้ให้บริการใหม่ แล้วเลือก Google จากส่วนผู้ให้บริการเพิ่มเติม
4. เปิดใช้ปุ่มเปิด/ปิดเปิดใช้
5. ตั้งชื่อที่แสดงต่อสาธารณะของแอปเป็น FriendlyChat หรือชื่ออื่นๆ (ชื่อนี้ไม่จำเป็นต้องไม่ซ้ำกันทั่วโลก)
6. เลือกอีเมลสนับสนุนโปรเจ็กต์จากเมนูแบบเลื่อนลง แล้วคลิกบันทึก
7. คุณควรเห็น Google เป็นผู้ให้บริการลงชื่อเข้าใช้ที่เปิดใช้

ตัวเลือกที่ 2: ตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform โดยใช้ Google Cloud Identity Platform (GCIP) API

หากต้องการตั้งค่าการตรวจสอบสิทธิ์ Firebase ผ่าน Terraform คุณต้องใช้ GCIP API ซึ่งหมายความว่าโปรเจ็กต์ต้องอยู่ในแพ็กเกจราคา Blaze คุณอัปเกรดโปรเจ็กต์ Firebase เพื่อใช้แพ็กเกจ Blaze ได้โดยการเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์

เปิดใช้การเรียกเก็บเงินผ่าน Terraform

1. หากคุณยังไม่มีบัญชีสำหรับการเรียกเก็บเงินใน Cloud ขั้นตอนแรกคือการสร้างบัญชีใหม่ใน คอนโซล Google Cloud เมื่อดำเนินการนี้ ให้จดรหัสบัญชีสำหรับการเรียกเก็บเงินไว้ รหัสบัญชีสำหรับการเรียกเก็บเงินจะอยู่ในหน้าการเรียกเก็บเงินในรหัสบัญชีสำหรับการเรียกเก็บเงินที่เชื่อมโยงกับโปรเจ็กต์
2. หากต้องการเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ผ่าน Terraform ให้เพิ่มแอตทริบิวต์ billing_account ลงในทรัพยากร google_project ที่มีอยู่ในไฟล์ main.tf:
   
   main.tf

   ...
   
   # Create a new Google Cloud project.
   resource "google_project" "default" {
     provider = google-beta.no_user_project_override
   
     name            = "<PROJECT_NAME_OF_YOUR_PROJECT>"
     project_id      = "<PROJECT_ID_OF_YOUR_PROJECT>"
     billing_account = "<YOUR_BILLING_ACCOUNT_ID>" # Add this line with your Cloud Billing account ID
   }
   
   ...
   

เปิดใช้การตรวจสอบสิทธิ์ Firebase และการลงชื่อเข้าใช้ด้วย Google ผ่าน Terraform

1. หากต้องการจัดสรรการตรวจสอบสิทธิ์ Firebase ด้วย GCIP ให้ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้
   
   main.tf

   ...
   
   # Enable the Identity Toolkit API.
   resource "google_project_service" "auth" {
     provider = google-beta
   
     project  = google_firebase_project.default.project
     service =  "identitytoolkit.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Create an Identity Platform config.
   # Also, enable Firebase Authentication using Identity Platform (if Authentication isn't yet enabled).
   resource "google_identity_platform_config" "auth" {
     provider = google-beta
     project  = google_firebase_project.default.project
   
     # For example, you can configure to auto-delete anonymous users.
     autodelete_anonymous_users = true
   
     # Wait for identitytoolkit.googleapis.com to be enabled before initializing Authentication.
     depends_on = [
       google_project_service.auth,
     ]
   }
   

2. การเปิดใช้การลงชื่อเข้าใช้ด้วย Google กำหนดให้คุณต้องมีไคลเอ็นต์ OAuth ไปที่ส่วน API และบริการของคอนโซล Google Cloud เพื่อทำการตั้งค่านี้
3. เนื่องจากนี่เป็นครั้งแรกที่คุณสร้างรหัสไคลเอ็นต์สำหรับโปรเจ็กต์นี้ คุณจึงต้องกำหนดค่าหน้าจอขอความยินยอม OAuth
   1. เปิดหน้าหน้าจอขอความยินยอม OAuth แล้วเลือกโปรเจ็กต์ที่คุณเพิ่งสร้าง
   2. ตั้งค่าประเภทผู้ใช้เป็นภายนอก แล้วคลิกสร้าง
   3. ในหน้าจอถัดไป ให้ทำตามขั้นตอนต่อไปนี้ แล้วคลิกบันทึกและดำเนินการต่อ
      • ตั้งค่าชื่อแอปที่แสดงต่อสาธารณะของแอปเป็น FriendlyChat (ชื่อนี้ไม่จำเป็นต้องไม่ซ้ำกันทั่วโลก)
      • เลือกอีเมลสำหรับการสนับสนุนผู้ใช้จากเมนูแบบเลื่อนลง
      • ป้อนอีเมลสำหรับข้อมูลติดต่อของนักพัฒนาแอป
   4. ในหน้าจอถัดไป ให้ทำดังนี้
      • ยอมรับค่าเริ่มต้นในหน้าขอบเขต แล้วคลิกบันทึกและดำเนินการต่อ
      • ยอมรับค่าเริ่มต้นในหน้าผู้ใช้ทดสอบ แล้วคลิกบันทึกและดำเนินการต่อ
      • ตรวจสอบข้อมูลสรุป แล้วคลิกกลับไปที่แดชบอร์ด
      
4. ตั้งค่าไคลเอ็นต์ OAuth ในหน้าข้อมูลเข้าสู่ระบบโดยทำดังนี้
   1. คลิกสร้างข้อมูลเข้าสู่ระบบ แล้วเลือกรหัสไคลเอ็นต์ OAuth
   2. เลือกเว็บแอปพลิเคชันจากเมนูแบบเลื่อนลงประเภทแอปพลิเคชัน
   3. ในช่องชื่อ ให้ป้อนชื่อแอป เช่น FriendlyChat (ชื่อนี้ไม่จำเป็นต้องไม่ซ้ำกันทั่วโลก)
   4. อนุญาตให้ URL ของแอปใช้ไคลเอ็นต์ OAuth นี้โดยการตั้งค่าต่อไปนี้
      • ในส่วนต้นทาง JavaScript ที่ได้รับอนุญาต ให้คลิกเพิ่ม URI แล้วป้อน
        https://<PROJECT_ID>.firebaseapp.com โดย <PROJECT_ID> คือรหัสโปรเจ็กต์ที่คุณตั้งค่าไว้ใน main.tf
      • ในส่วน URI การเปลี่ยนเส้นทางที่ได้รับอนุญาต ให้คลิกเพิ่ม URI แล้วป้อน
        https://<PROJECT_ID>.firebaseapp.com/__/auth/handler โดยที่ <PROJECT_ID> คือรหัสโปรเจ็กต์ที่คุณตั้งค่าไว้ใน main.tf
   5. คลิกบันทึก
   
5. หากต้องการเปิดใช้การลงชื่อเข้าใช้ด้วย Google โดยใช้รหัสไคลเอ็นต์ OAuth และรหัสลับไคลเอ็นต์ ให้ต่อท้ายไฟล์ main.tf ด้วยบล็อกต่อไปนี้
   
   main.tf

   ...
   
   variable "oauth_client_secret" {
     type = string
   
     description = "OAuth client secret. For this codelab, you can pass in this secret through the environment variable TF_VAR_oauth_client_secret. In a real app, you should use a secret manager service."
   
     sensitive = true
   }
   
   resource "google_identity_platform_default_supported_idp_config" "google_sign_in" {
     provider = google-beta
     project  = google_firebase_project.default.project
   
     enabled       = true
     idp_id        = "google.com"
     client_id     = "<YOUR_OAUTH_CLIENT_ID>"
     client_secret = var.oauth_client_secret
   
     depends_on = [
        google_identity_platform_config.auth
     ]
   }
   

ใช้การกำหนดค่า

1. หากต้องการตั้งค่าการตรวจสอบสิทธิ์ตามการกำหนดค่า ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีเดียวกับไฟล์ main.tf (ซึ่งควรเป็น web)

   export TF_VAR_oauth_client_secret="<YOUR_OAUTH_CLIENT_SECRET>"
   

   terraform apply
   

   โปรดทราบว่าการเรียกใช้ terraform apply จะไม่สร้างโปรเจ็กต์ Google Cloud ใหม่ Terraform จะตรวจพบว่ามีโปรเจ็กต์ที่มีรหัสโปรเจ็กต์ที่ระบุอยู่แล้ว และจะเปรียบเทียบสถานะปัจจุบันของโปรเจ็กต์กับสถานะในไฟล์ .tf จากนั้นจะทำการเปลี่ยนแปลงที่พบ
2. ตรวจสอบแผนการดำเนินการที่พิมพ์ออกมา หากทุกอย่างเป็นไปตามที่คาดไว้ ให้พิมพ์ yes แล้วกด Enter เพื่ออนุมัติการดำเนินการ

ตรวจสอบการเปลี่ยนแปลง

1. ในคอนโซล Firebase ให้ค้นหาส่วนฐานข้อมูลและการจัดเก็บข้อมูลในแผงด้านซ้าย
2. คลิก Authentication แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปที่แท็บดังกล่าวโดยตรง)
3. คุณควรเห็น Google เป็นผู้ให้บริการลงชื่อเข้าใช้ที่เปิดใช้

7. ตั้งค่าฐานข้อมูล Firestore และกฎความปลอดภัย

สำหรับเว็บแอปของโค้ดแล็บนี้ คุณจะจัดเก็บข้อความระหว่างผู้ใช้ปลายทางในฐานข้อมูล Firestore

1. หากต้องการเปิดใช้ API ที่จำเป็นและจัดสรรอินสแตนซ์ฐานข้อมูล ให้ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้
   
   main.tf

   ...
   
   # Enable required APIs for Cloud Firestore.
   resource "google_project_service" "firestore" {
     provider = google-beta
   
     project  = google_firebase_project.default.project
     for_each = toset([
       "firestore.googleapis.com",
       "firebaserules.googleapis.com",
     ])
     service = each.key
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Provision the Firestore database instance.
   resource "google_firestore_database" "default" {
     provider                    = google-beta
   
     project                     = google_firebase_project.default.project
     name                        = "(default)"
     # See available locations:
     # https://firebase.google.com/docs/firestore/locations
     location_id                 = "<NAME_OF_DESIRED_REGION>"
     # "FIRESTORE_NATIVE" is required to use Firestore with Firebase SDKs,
     # authentication, and Firebase Security Rules.
     type                        = "FIRESTORE_NATIVE"
     concurrency_mode            = "OPTIMISTIC"
   
     depends_on = [
       google_project_service.firestore
     ]
   }
   

2. เปลี่ยน <NAME_OF_DESIRED_REGION> เป็นภูมิภาคที่คุณต้องการให้ฐานข้อมูลอยู่
   
   เมื่อพัฒนาแอปเวอร์ชันที่ใช้งานจริง คุณควรเลือกภูมิภาคที่อยู่ใกล้กับผู้ใช้ส่วนใหญ่และใช้ร่วมกับบริการอื่นๆ ของ Firebase เช่น Cloud Functions สำหรับ Codelab นี้ คุณสามารถใช้ us-east1 (เซาท์แคโรไลนา) หรือใช้ภูมิภาคที่ใกล้ที่สุด (ดูสถานที่ตั้งของ Cloud Firestore)
3. อินสแตนซ์ฐานข้อมูล Firestore ทุกรายการที่ Firebase เข้าถึงได้ต้องได้รับการปกป้องโดยกฎความปลอดภัยของ Firebase
   
   โค้ดตัวอย่างของ Codelab นี้มีชุดกฎ Firestore ที่ปลอดภัยในไฟล์ firestore.rules ซึ่งคุณจะพบได้ที่รูทของไดเรกทอรี web
4. ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้เพื่อทำสิ่งต่อไปนี้
   • สร้างชุดกฎของกฎการรักษาความปลอดภัยของ Firebase จากไฟล์ firestore.rules ในเครื่อง
   • เผยแพร่ชุดกฎสำหรับอินสแตนซ์ Firestore
   โปรดทราบว่าบล็อกทรัพยากรเหล่านี้จะเทียบเท่ากับการคลิกปุ่มเผยแพร่ในคอนโซล Firebase หรือการเรียกใช้ firebase deploy --only firestore:rules.
   
   main.tf

   ...
   
   # Create a ruleset of Firestore Security Rules from a local file.
   resource "google_firebaserules_ruleset" "firestore" {
     provider = google-beta
   
     project  = google_firebase_project.default.project
     source {
       files {
         name = "firestore.rules"
         # Write security rules in a local file named "firestore.rules".
         # Learn more: https://firebase.google.com/docs/firestore/security/get-started
         content = file("firestore.rules")
       }
     }
   
     # Wait for Firestore to be provisioned before creating this ruleset.
     depends_on = [
       google_firestore_database.default,
     ]
   }
   
   # Release the ruleset for the Firestore instance.
   resource "google_firebaserules_release" "firestore" {
     provider     = google-beta
   
     name         = "cloud.firestore"  # must be cloud.firestore
     ruleset_name = google_firebaserules_ruleset.firestore.name
     project      = google_firebase_project.default.project
   
     # Wait for Firestore to be provisioned before releasing the ruleset.
     depends_on = [
       google_firestore_database.default,
     ]
   
     lifecycle {
       replace_triggered_by = [
         google_firebaserules_ruleset.firestore
       ]
     }
   }
   

5. เรียกใช้ terraform apply เพื่อจัดสรรฐานข้อมูล Firestore และติดตั้งใช้งานกฎการรักษาความปลอดภัย
6. ตรวจสอบว่าได้จัดสรรฐานข้อมูลและได้ติดตั้งใช้งานกฎความปลอดภัยของฐานข้อมูลแล้ว
   1. ในคอนโซล Firebase ให้ค้นหาส่วนฐานข้อมูลและการจัดเก็บข้อมูลในแผงด้านซ้าย
   2. ไปที่ส่วนฐานข้อมูล Firestore แล้วคลิกแท็บกฎ
   

8. ตั้งค่า Bucket ของ Cloud Storage และกฎความปลอดภัย

สำหรับเว็บแอปของ Codelab นี้ คุณจะจัดเก็บรูปภาพที่แชร์ระหว่างผู้ใช้ปลายทางไว้ใน Bucket ของ Cloud Storage

1. หากต้องการเปิดใช้ API ที่จำเป็นและจัดสรรที่เก็บข้อมูล Cloud Storage ให้ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้
   
   main.tf

   ...
   
   # Enable required APIs for Cloud Storage for Firebase.
   resource "google_project_service" "storage" {
     provider = google-beta
   
     project  = google_firebase_project.default.project
     for_each = toset([
       "firebasestorage.googleapis.com",
       "storage.googleapis.com",
     ])
     service = each.key
   
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Provision a Cloud Storage bucket.
   # This is not the default Cloud Storage bucket for your project
   # (provisioning of the default bucket via Terraform is coming soon)
   resource "google_storage_bucket" "bucket" {
     provider = google-beta
     project  = google_firebase_project.default.project
     name     = "<NAME_OF_STORAGE_BUCKET>"
     # See available locations: https://cloud.google.com/storage/docs/locations#available-locations
     location = "<NAME_OF_DESIRED_REGION_FOR_BUCKET>"
   }
   
   # Make the Storage bucket accessible for Firebase SDKs, authentication, and Firebase Security Rules.
   resource "google_firebase_storage_bucket" "bucket" {
     provider  = google-beta
   
     project   = google_firebase_project.default.project
     bucket_id = google_storage_bucket.bucket.name
   }
   

2. Bucket ของ Cloud Storage ทุกรายการที่ Firebase เข้าถึงได้ต้องได้รับการปกป้องโดยกฎความปลอดภัยของ Firebase
   
   โค้ดตัวอย่างของ Codelab นี้มีชุดกฎ Firestore ที่ปลอดภัยในไฟล์ storage.rules ซึ่งคุณจะพบได้ที่รูทของไดเรกทอรี web
3. ต่อท้ายไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้เพื่อทำสิ่งต่อไปนี้
   • สร้างชุดกฎของกฎการรักษาความปลอดภัยของ Firebase จากไฟล์ในเครื่อง
   • เผยแพร่ชุดกฎสำหรับที่เก็บข้อมูลใน Storage
   โปรดทราบว่าบล็อกทรัพยากรเหล่านี้จะเทียบเท่ากับการคลิกปุ่มเผยแพร่ในคอนโซล Firebase หรือการเรียกใช้ firebase deploy --only storage.
   
   main.tf

   ...
   
   # Create a ruleset of Cloud Storage Security Rules from a local file.
   resource "google_firebaserules_ruleset" "storage" {
     provider = google-beta
   
     project  = google_firebase_project.default.project
     source {
       files {
         # Write security rules in a local file named "storage.rules".
         # Learn more: https://firebase.google.com/docs/storage/security/get-started
         name    = "storage.rules"
         content = file("storage.rules")
       }
     }
   
     # Wait for the Storage bucket to be provisioned before creating this ruleset.
     depends_on = [
       google_firebase_storage_bucket.bucket,
     ]
   }
   
   # Release the ruleset for the Storage bucket.
   resource "google_firebaserules_release" "bucket" {
     provider     = google-beta
   
     name         = "firebase.storage/${google_firebase_storage_bucket.bucket.bucket_id}"
     ruleset_name = "projects/${google_firebase_project.default.project}/rulesets/${google_firebaserules_ruleset.storage.name}"
     project      = google_firebase_project.default.project
   }
   

4. เรียกใช้ terraform apply เพื่อจัดสรร Bucket ของ Cloud Storage และทำให้กฎความปลอดภัยใช้งานได้
5. ตรวจสอบว่าได้จัดสรรที่เก็บข้อมูลและได้ติดตั้งใช้งานกฎความปลอดภัยของที่เก็บข้อมูลแล้ว
   1. ในคอนโซล Firebase ให้ค้นหาส่วนฐานข้อมูลและการจัดเก็บข้อมูลในแผงด้านซ้าย
   2. ไปที่ส่วนพื้นที่เก็บข้อมูล แล้วคลิกแท็บกฎ
   
6. ในฐานของโค้ด ให้แก้ไข index.js เพื่ออ้างอิงถึง Bucket ที่ไม่ใช่ค่าเริ่มต้นตามชื่อ

   import { getApp } from "firebase/app";
   import { getStorage } from "firebase/storage";
   
   // Get a non-default Storage bucket
   const firebaseApp = getApp();
   const storage = getStorage(firebaseApp, "gs://<NAME_OF_STORAGE_BUCKET>");
   

9. เรียกใช้แอปในเครื่อง

ตอนนี้คุณก็พร้อมที่จะเรียกใช้เว็บแอปเป็นครั้งแรกแล้ว คุณจะใช้โปรแกรมจำลองโฮสติ้งของ Firebase เพื่อแสดงแอปในเครื่อง

1. เปิดหน้าต่างเทอร์มินัลใหม่ แล้วเรียกใช้คำสั่ง Firebase CLI ต่อไปนี้จากไดเรกทอรี web เพื่อเริ่มโปรแกรมจำลอง

   firebase emulators:start --project=<PROJECT_ID>
   

2. ในเบราว์เซอร์ ให้เปิดเว็บแอปที่ URL ในเครื่องที่ CLI แสดงผล (โดยปกติคือ http://localhost:5000)

คุณควรเห็น UI ของแอป FriendlyChat ซึ่งยังใช้งานไม่ได้ แอปยังไม่ได้เชื่อมต่อกับ Firebase แต่เมื่อทำตามขั้นตอนถัดไปของ Codelab นี้จนเสร็จ แอปก็จะเชื่อมต่อกับ Firebase

โปรดทราบว่าเมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงเว็บแอป (เช่น คุณจะทำในขั้นตอนต่อไปนี้ของ Codelab นี้) ให้รีเฟรชเบราว์เซอร์เพื่ออัปเดต URL ในเครื่องด้วยการเปลี่ยนแปลงเหล่านั้น

10. ติดตั้ง กำหนดค่า และเริ่มต้น Firebase

หากต้องการให้แอปทํางานร่วมกับ Firebase ได้ แอปต้องมี Firebase SDK และการกําหนดค่า Firebase สําหรับโปรเจ็กต์ Firebase

โค้ดตัวอย่างสำหรับ Codelab นี้เป็นแอปที่ใช้งานได้อยู่แล้ว โดยมีทั้งการอ้างอิงและฟังก์ชันที่จำเป็นทั้งหมดสำหรับการใช้ผลิตภัณฑ์ต่างๆ ของ Firebase ในแอป คุณสามารถดูได้ใน web/package.json และ web/src/index.js หากต้องการดูว่ามีการดำเนินการใดไปแล้วบ้าง

แม้ว่าโค้ดตัวอย่างจะเกือบสมบูรณ์แล้ว แต่คุณยังคงต้องทำอีก 2-3 อย่างเพื่อให้แอปทํางานได้ ซึ่งรวมถึงการติดตั้ง Firebase SDK, เริ่มบิลด์, เพิ่มการกําหนดค่า Firebase ลงในแอป และสุดท้ายคือการเริ่มต้น Firebase

ติดตั้ง Firebase SDK และเริ่มการสร้าง webpack

คุณต้องเรียกใช้คำสั่ง 2-3 รายการเพื่อเริ่มบิลด์แอป

1. เปิดหน้าต่างเทอร์มินัลใหม่
2. ตรวจสอบว่าคุณอยู่ที่รูทของไดเรกทอรี web
3. เรียกใช้ npm install เพื่อดาวน์โหลด Firebase SDK
4. เรียกใช้ npm update เพื่ออัปเดตทรัพยากร Dependency
5. เรียกใช้ npm run start เพื่อเริ่ม webpack

สำหรับส่วนที่เหลือของโค้ดแล็บนี้ ตอนนี้ webpack จะสร้างซอร์สโค้ดของคุณใหม่ต่อไป

เพิ่มการกำหนดค่า Firebase ลงในแอป

นอกจากนี้ คุณยังต้องเพิ่มการกำหนดค่า Firebase ลงในแอปเพื่อให้ Firebase SDK ทราบว่าคุณต้องการให้ใช้โปรเจ็กต์ Firebase ใด

สำหรับ Codelab นี้ คุณมี 2 ตัวเลือกในการรับการกำหนดค่า Firebase ดังนี้

• ตัวเลือกที่ 1: รับการกำหนดค่า Firebase จากคอนโซล Firebase
• ตัวเลือกที่ 2: รับการกำหนดค่า Firebase ผ่าน Terraform

ตัวเลือกที่ 1: รับการกำหนดค่าจากคอนโซล Firebase แล้วเพิ่มลงในฐานของโค้ด

1. ในคอนโซล Firebase ให้ไปที่การตั้งค่าโปรเจ็กต์
2. เลื่อนลงไปที่การ์ดแอปของคุณ แล้วเลือกเว็บแอป
3. เลือกกำหนดค่าจากแผงข้อมูลโค้ด Firebase SDK แล้วคัดลอกข้อมูลโค้ดการกำหนดค่า
4. วางการกำหนดค่าลงในไฟล์ web/src/firebase-config.js ของแอป ดังนี้
   
   firebase-config.js

   ...
   
   const config = {
     apiKey: "<API_KEY>",
     authDomain: "<PROJECT_ID>.firebaseapp.com",
     projectId: "<PROJECT_ID>",
     storageBucket: "<PROJECT_ID>.firebasestorage.app",
     messagingSenderId: "<SENDER_ID>",
     appId: "<APP_ID>",
     measurementId: "<G-MEASUREMENT_ID>",
   };
   
   ...
   

ตัวเลือกที่ 2: รับการกำหนดค่าผ่าน Terraform แล้วเพิ่มลงในฐานของโค้ด

หรือคุณจะรับการกำหนดค่า Firebase ผ่าน Terraform เป็นค่าเอาต์พุตใน CLI ก็ได้

1. ในไฟล์ main.tf ให้ค้นหาgoogle_firebase_web_appบล็อกทรัพยากร (บล็อกที่ลงทะเบียนเว็บแอปกับโปรเจ็กต์)
2. หลังจากบล็อกนั้น ให้เพิ่มบล็อกต่อไปนี้
   
   main.tf

   ...
   
   data "google_firebase_web_app_config" "default" {
     provider     = google-beta
     project      = google_firebase_project.default.project
     web_app_id   = google_firebase_web_app.default.app_id
   }
   
   output "friendlychat_web_app_config" {
     value = {
       projectId         = google_firebase_project.default.project
       appId             = google_firebase_web_app.default.app_id
       apiKey            = data.google_firebase_web_app_config.default.api_key
       authDomain        = data.google_firebase_web_app_config.default.auth_domain
       storageBucket     = lookup(data.google_firebase_web_app_config.default, "storage_bucket", "")
       messagingSenderId = lookup(data.google_firebase_web_app_config.default, "messaging_sender_id", "")
       measurementId     = lookup(data.google_firebase_web_app_config.default, "measurement_id", "")
     }
   }
   
   ...
   

3. เนื่องจากบล็อก data และบล็อก output ไม่ได้มีไว้เพื่อแก้ไขโครงสร้างพื้นฐานในลักษณะใดก็ตาม คุณจึงต้องเรียกใช้คำสั่งต่อไปนี้เท่านั้น
   1. หากต้องการโหลดการกำหนดค่า Firebase ของเว็บแอปไปยังสถานะ Terraform ของไดเรกทอรี ให้เรียกใช้คำสั่งต่อไปนี้

      terraform refresh
      

   2. หากต้องการพิมพ์ค่าการกำหนดค่า Firebase ให้เรียกใช้คำสั่งนี้

      terraform output –json
      

      ต่อไปนี้เป็นตัวอย่างเอาต์พุตของไฟล์กำหนดค่า เอาต์พุตที่พิมพ์จะมีค่าของโปรเจ็กต์และแอป

      {
        "friendlychat_web_app_config": {
          "sensitive": false,
          "type": [
            "object",
            {
              "apiKey": "string",
              "appId": "string",
              "authDomain": "string",
              "measurementId": "string",
              "messagingSenderId": "string",
              "projectId": "string",
              "storageBucket": "string"
            }
          ],
          "value": {
            "apiKey": "<API_KEY>",
            "appId": "<APP_ID>",
            "authDomain": "<PROJECT_ID>.firebaseapp.com",
            "measurementId": "<G-MEASUREMENT_ID>",
            "messagingSenderId": "<SENDER_ID>",
            "projectId": "<PROJECT_ID>",
            "storageBucket": "<PROJECT_ID>.firebasestorage.app"
          }
        }
      }
      

4. คัดลอกค่าจากภายในแผนที่ value
5. วางค่าเหล่านี้ (การกำหนดค่า) ลงในไฟล์ web/src/firebase-config.js ของแอป ดังนี้
   
   firebase-config.js

   ...
   
   const config = {
     apiKey: "<API_KEY>",
     appId: "<APP_ID>",
     authDomain: "<PROJECT_ID>.firebaseapp.com",
     measurementId: "<G-MEASUREMENT_ID>",
     messagingSenderId: "<SENDER_ID>",
     projectId: "<PROJECT_ID>",
     storageBucket: "<PROJECT_ID>.firebasestorage.app",
   };
   
   ...
   

เริ่มต้น Firebase ในแอป

สุดท้ายนี้ หากต้องการเริ่มต้น Firebase ให้ต่อท้ายไฟล์ web/src/index.js ของแอปด้วยข้อมูลต่อไปนี้

index.js

...

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

ลองใช้แอป

ตอนนี้ทุกอย่างได้รับการกำหนดค่าสำหรับ Firebase แล้ว คุณสามารถลองใช้เว็บแอปที่ใช้งานได้

1. รีเฟรชเบราว์เซอร์ที่แสดงแอป
2. ตอนนี้คุณควรจะลงชื่อเข้าใช้ด้วย Google และเริ่มโพสต์ข้อความในแชทได้แล้ว หากมีไฟล์รูปภาพ คุณก็อัปโหลดได้เช่นกัน

11. จำลองการกำหนดค่าในสภาพแวดล้อมต่างๆ

Terraform ทำได้ดีในการจัดการโครงสร้างพื้นฐานหลายรายการที่กำหนดค่าคล้ายกัน (เช่น การตั้งค่าโปรเจ็กต์ Firebase สำหรับการทดสอบที่คล้ายกับโปรเจ็กต์ที่ใช้งานจริง)

ใน Codelab นี้ คุณจะสร้างโปรเจ็กต์ Firebase ที่ 2 เพื่อเป็นสภาพแวดล้อมการจัดเตรียม

หากต้องการจำลองการกำหนดค่าที่มีอยู่เพื่อสร้างโปรเจ็กต์ Staging นี้ คุณมี 2 ตัวเลือกดังนี้

• ตัวเลือกที่ 1: ทำสำเนาการกำหนดค่า Terraform
  ตัวเลือกนี้ให้ความยืดหยุ่นมากที่สุดในเรื่องความแตกต่างระหว่างโปรเจ็กต์ที่จำลองกับโปรเจ็กต์ต้นฉบับ
• ตัวเลือกที่ 2: ใช้การกำหนดค่าซ้ำด้วย for_each
  ตัวเลือกนี้ช่วยให้ใช้โค้ดซ้ำได้มากขึ้นหากแต่ละโปรเจ็กต์ไม่ควรแตกต่างกันมากนัก และคุณต้องการเผยแพร่การเปลี่ยนแปลงไปยังทุกโปรเจ็กต์พร้อมกัน

ตัวเลือกที่ 1: ทำสำเนาการกำหนดค่า Terraform

ตัวเลือกนี้มีความยืดหยุ่นมากที่สุดในเรื่องความแตกต่างของโปรเจ็กต์ที่จำลองจากโปรเจ็กต์ต้นฉบับ เช่น การมีแอปที่มีชื่อที่แสดงต่างกันและการเปิดตัวแบบค่อยเป็นค่อยไป

1. สร้างไฟล์การกำหนดค่า Terraform ใหม่ชื่อ main_staging.tf ที่รูทของไดเรกทอรี web
2. คัดลอกบล็อกทรัพยากรทั้งหมดจากไฟล์ main.tf (ยกเว้นบล็อก terraform และ provider) แล้ววางลงในไฟล์ main_staging.tf
3. จากนั้นคุณต้องแก้ไขบล็อกทรัพยากรที่จำลองแต่ละรายการใน main_staging.tf เพื่อให้ทำงานกับโปรเจ็กต์การจัดสรรทรัพยากรได้
   • ป้ายกำกับทรัพยากร: ใช้ชื่อใหม่เพื่อหลีกเลี่ยงความขัดแย้ง เช่น เปลี่ยนชื่อ resource "google_project" "default" เป็น resource "google_project" "staging"
   • การอ้างอิงทรัพยากร: อัปเดตแต่ละรายการ เช่น อัปเดต google_firebase_project.default.project เป็น google_firebase_project.staging.project
   คุณดูการกำหนดค่าทั้งหมดของไฟล์ main_staging.tf ได้ในที่เก็บ GitHub ของ Codelab นี้
   
   web/terraform-checkpoints/replicate-config/main_staging-copypaste.tf
   
   หากต้องการใช้การกำหนดค่านี้ โปรดตรวจสอบว่าคุณได้ทำสิ่งต่อไปนี้
   1. คัดลอกการกำหนดค่าจาก main_staging-copypaste.tf แล้ววางลงในไฟล์ main_staging.tf
   2. ในไฟล์ main_staging.tf ให้ทำดังนี้
      • ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name, แอตทริบิวต์ project-id และ (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform) แอตทริบิวต์ billing_account ด้วยค่าของคุณเอง
      • ในgoogle_firebase_web_appบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
      • ในบล็อกทรัพยากร google_firestore_database และ google_app_engine_application ให้อัปเดตแอตทริบิวต์ location_id ด้วยค่าของคุณเอง
   main_staging.tf

   # Create a new Google Cloud project.
   resource "google_project" "staging" {
     provider = google-beta.no_user_project_override
   
     name            = "<PROJECT_NAME_OF_STAGING_PROJECT>"
     project_id      = "<PROJECT_ID_OF_STAGING_PROJECT"
     # Required if you want to set up Authentication via Terraform
     billing_account = "<YOUR_BILLING_ACCOUNT_ID>"
   }
   
   # Enable the required underlying Service Usage API.
   resource "google_project_service" "staging_serviceusage" {
     provider = google-beta.no_user_project_override
   
     project = google_project.staging.project_id
     service = "serviceusage.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Enable the required underlying Firebase Management API.
   resource "google_project_service" "staging_firebase" {
     provider = google-beta.no_user_project_override
   
     project = google_project.staging.project_id
     service = "firebase.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Enable Firebase services for the new project created above.
   resource "google_firebase_project" "staging" {
     provider = google-beta
   
     project = google_project.staging.project_id
   
     # Wait until the required APIs are enabled.
     depends_on = [
       google_project_service.staging_serviceusage,
       google_project_service.staging_firebase,
     ]
   }
   
   # Create a Firebase Web App in the new project created above.
   resource "google_firebase_web_app" "staging" {
     provider = google-beta
   
     project      = google_firebase_project.staging.project
     display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
     deletion_policy = "DELETE"
   }
   

4. เรียกใช้ terraform apply เพื่อจัดสรรโปรเจ็กต์ Firebase "การจัดเตรียม" ใหม่ รวมถึงทรัพยากรทั้งหมด และเปิดใช้บริการของโปรเจ็กต์
5. ตรวจสอบว่ามีการจัดสรรและเปิดใช้ทุกอย่างตามที่คาดไว้โดยดูในคอนโซล Firebase เช่นเดียวกับก่อนหน้านี้

ตัวเลือกที่ 2: ใช้การกำหนดค่าซ้ำด้วย for_each

ตัวเลือกนี้ช่วยให้ใช้โค้ดซ้ำได้มากขึ้นหากแต่ละโปรเจ็กต์ไม่ควรแตกต่างกันมากนัก และคุณต้องการเผยแพร่การเปลี่ยนแปลงไปยังโปรเจ็กต์ทั้งหมดพร้อมกัน โดยใช้เมตาอาร์กิวเมนต์ for_each ในภาษา Terraform

1. เปิดไฟล์ main.tf
2. ในบล็อกทรัพยากรแต่ละบล็อกที่ต้องการทำซ้ำ ให้เพิ่มfor_eachอาร์กิวเมนต์เมตา
   ดังนี้
   main.tf

   # Create new Google Cloud projects.
   resource "google_project" "default" {
     provider        = google-beta.no_user_project_override
     name            = each.value
     # Create a unique project ID for each project, with each ID starting with <PROJECT_ID>.
     project_id      = "<PROJECT_ID>-${each.key}"
     # Required if you want to set up Authentication via Terraform
     billing_account = "<YOUR_BILLING_ACCOUNT_ID>"
   
     # Required for the projects to display in any list of Firebase projects.
     labels = {
       "firebase" = "enabled"
     }
   
     for_each = {
       prod    = "<PROJECT_NAME_OF_PROD_PROJECT>"
       staging = "<PROJECT_NAME_OF_STAGING_PROJECT>"
     }
   }
   
   # Enable the required underlying Service Usage API.
   resource "google_project_service" "serviceusage" {
     provider = google-beta.no_user_project_override
     for_each = google_project.default
   
     project = each.value.project_id
     service = "serviceusage.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Enable the required underlying Firebase Management API.
   resource "google_project_service" "firebase" {
     provider = google-beta.no_user_project_override
     for_each = google_project.default
   
     project = each.value.project_id
     service = "firebase.googleapis.com"
   
     # Don't disable the service if the resource block is removed by accident.
     disable_on_destroy = false
   }
   
   # Enable Firebase services for each of the new projects created above.
   resource "google_firebase_project" "default" {
     provider = google-beta
     for_each = google_project.default
   
     project = each.value.project_id
   
     depends_on = [
       google_project_service.serviceusage,
       google_project_service.firebase,
     ]
   }
   
   # Create a Firebase Web App in each of the new projects created above.
   resource "google_firebase_web_app" "default" {
     provider = google-beta
     for_each = google_firebase_project.default
   
     project      = each.value.project
     # The Firebase Web App created in each project will have the same display name.
     display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
     deletion_policy = "DELETE"
   }
   
   
   # NOTE: For this codelab, we recommend setting up Firebase Authentication
   # using the Firebase console. However, if you set up Firebase Authentication
   # using Terraform, copy-paste from your main.tf the applicable blocks.
   # Make sure to add the `for_each` meta-argument into each block.
   
   
   # Copy-paste from your main.tf file the applicable resource blocks
   # for setting up Cloud Firestore (including rules) and
   # for setting up Cloud Storage for Firebase (including rules).
   # Make sure to add the `for_each` meta-argument into each block.
   

   คุณดูการกำหนดค่าทั้งหมดของไฟล์ main.tf ที่ใช้อาร์กิวเมนต์เมตา for_each ได้ในที่เก็บ GitHub ของ Codelab นี้
   
   web/terraform-checkpoints/replicate-config/main-foreach.tf
   
   หากต้องการใช้การกำหนดค่านี้ โปรดตรวจสอบว่าคุณได้ทำสิ่งต่อไปนี้
   1. คัดลอกการกำหนดค่าจาก main-foreach.tf แล้ววางลงในไฟล์ main.tf
   2. ในไฟล์ main.tf ให้ทำดังนี้
      • ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name, แอตทริบิวต์ project-id และ (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform) แอตทริบิวต์ billing_account ด้วยค่าของคุณเอง
      • ในgoogle_firebase_web_appบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
      • ในบล็อกทรัพยากร google_firestore_database และ google_app_engine_application ให้อัปเดตแอตทริบิวต์ location_id ด้วยค่าของคุณเอง
3. แทนที่จะใช้การกำหนดค่านี้ทันที คุณควรทำความเข้าใจและแก้ไขบางอย่างเกี่ยวกับวิธีที่ Terraform ตีความการกำหนดค่านี้เมื่อเทียบกับโครงสร้างพื้นฐานที่มีอยู่
   1. ในตอนนี้ หากคุณใช้การกำหนดค่านี้ที่ใช้ for_each ที่อยู่ของทรัพยากรจะมีลักษณะดังนี้

      google_project.default["prod"]
      google_project.default["staging"]
      google_firebase_project.default["prod"]
      google_firebase_project.default["staging"]
      google_firebase_web_app.default["prod"]
      google_firebase_web_app.default["staging"]
      

      อย่างไรก็ตาม โปรเจ็กต์ที่มีอยู่ซึ่งคุณสร้างขึ้นในส่วนแรกของ Codelab นี้เป็นที่รู้จักของ Terraform ดังนี้

      google_project.default
      google_firebase_project.default
      google_firebase_android_app.default
      

   2. เรียกใช้ terraform plan เพื่อดูว่า Terraform จะดำเนินการใดบ้างเมื่อพิจารณาจากสถานะปัจจุบัน
      
      เอาต์พุตควรแสดงให้เห็นว่า Terraform จะลบโปรเจ็กต์ที่คุณสร้างขึ้นในส่วนแรกของ Codelab นี้และสร้างโปรเจ็กต์ใหม่ 2 โปรเจ็กต์ เนื่องจาก Terraform ไม่ทราบว่าโปรเจ็กต์ที่ที่อยู่ google_project.default ได้ย้ายไปที่อยู่ใหม่ google_project.default["prod"] แล้ว
   3. หากต้องการแก้ไขปัญหานี้ ให้เรียกใช้คำสั่ง terraform state mv

      terraform state mv "google_project.default" "google_project.default[\"prod\"]"
      

   4. ในทำนองเดียวกัน หากต้องการแก้ไขบล็อกทรัพยากรอื่นๆ ทั้งหมด ให้เรียกใช้ terraform state mv สำหรับ google_firebase_project, google_firebase_web_app และบล็อกทรัพยากรอื่นๆ ทั้งหมดในไฟล์ main.tf
   5. ตอนนี้หากคุณเรียกใช้ terraform plan อีกครั้ง ก็ไม่ควรเห็นว่า Terraform จะลบโปรเจ็กต์ที่คุณสร้างขึ้นในส่วนแรกของโค้ดแล็บนี้
4. เรียกใช้ terraform apply เพื่อจัดสรรโปรเจ็กต์ Firebase "การจัดเตรียม" ใหม่ รวมถึงทรัพยากรทั้งหมด และเปิดใช้บริการของโปรเจ็กต์
5. ตรวจสอบว่ามีการจัดสรรและเปิดใช้ทุกอย่างตามที่คาดไว้โดยดูในคอนโซล Firebase เช่นเดียวกับก่อนหน้านี้

12. ขั้นตอนเพิ่มเติม: ทำให้แอปเวอร์ชันทดสอบและเวอร์ชันที่ใช้งานจริงใช้งานได้

1. ในฐานของโค้ดของแอป ให้เปลี่ยน firebase-config.js เพื่อใช้การกำหนดค่า Firebase จากโปรเจ็กต์ Staging แทน
   
   หากต้องการเตือนตัวเองถึงวิธีรับการกำหนดค่า Firebase และเพิ่มลงในแอป โปรดดูขั้นตอนก่อนหน้าของ Codelab นี้ที่เพิ่มการกำหนดค่า Firebase ลงในแอป
2. ที่รูทของไดเรกทอรี web ให้เรียกใช้คำสั่งต่อไปนี้เพื่อทำให้แอปใช้งานได้ในโปรเจ็กต์ Firebase สำหรับการทดสอบ

   firebase deploy --only hosting --project=<STAGING_PROJECT_ID>
   

3. เปิดแอป Staging ในเบราว์เซอร์ผ่าน URL ที่พิมพ์ในเอาต์พุตของ firebase deploy ลองลงชื่อเข้าใช้ ส่งข้อความ และอัปโหลดรูปภาพ
   
   เมื่อคุณทําการติดตั้งใช้งานแอปกับโปรเจ็กต์ Firebase แอปจะใช้ทรัพยากร Firebase จริง ไม่ใช่ทรัพยากรที่จำลอง เมื่อโต้ตอบกับแอป Staging คุณควรเห็นข้อมูลและรูปภาพปรากฏในโปรเจ็กต์ Staging ในคอนโซล Firebase
4. หลังจากทดสอบแอปในสภาพแวดล้อมการจัดเตรียมแล้ว ให้เปลี่ยน firebase-config.js กลับไปใช้การกำหนดค่า Firebase ของโปรเจ็กต์ Prod (โปรเจ็กต์แรกที่คุณสร้างใน Codelab นี้)
5. ที่รูทของไดเรกทอรี web ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งใช้งานแอปกับโปรเจ็กต์ Firebase ที่ใช้งานจริง

   firebase deploy --only hosting --project=<PRODUCTION_PROJECT_ID>
   

6. เปิดแอปการผลิตในเบราว์เซอร์ผ่าน URL ที่พิมพ์ในเอาต์พุตของ firebase deploy ลองลงชื่อเข้าใช้ ส่งข้อความ และอัปโหลดรูปภาพ
   
   คุณควรเห็นข้อมูลและรูปภาพปรากฏในโปรเจ็กต์เวอร์ชันที่ใช้งานจริงในคอนโซล Firebase
7. เมื่อโต้ตอบกับแอปทั้ง 2 แอปสำหรับ Codelab นี้เสร็จแล้ว คุณสามารถหยุดไม่ให้ Firebase แสดงแอปเหล่านั้นได้ เรียกใช้คำสั่งต่อไปนี้สำหรับแต่ละโปรเจ็กต์

   firebase hosting:disable --project=<STAGING_PROJECT_ID>
   

   firebase hosting:disable --project=<PRODUCTION_PROJECT_ID>
   

13. ยินดีด้วย

คุณใช้ Terraform เพื่อกำหนดค่าเว็บแอปพลิเคชันแชทแบบเรียลไทม์แล้ว และคุณได้ปฏิบัติตามแนวทางปฏิบัติแนะนำสำหรับสภาพแวดล้อมการพัฒนาโดยการสร้างโปรเจ็กต์ Firebase แยกต่างหากสำหรับการทดสอบและการใช้งานจริง

สิ่งที่เราได้พูดถึงไปแล้ว

• การใช้ Terraform CLI เพื่อจัดการทรัพยากรระบบคลาวด์
• การใช้ Terraform เพื่อกำหนดค่าผลิตภัณฑ์ Firebase (การตรวจสอบสิทธิ์, Firestore, Cloud Storage และกฎความปลอดภัย)
• การเรียกใช้และทดสอบเว็บแอปในเครื่องโดยใช้ชุดโปรแกรมจำลองภายในของ Firebase
• การนำเข้า Firebase ไปยังเว็บแอป
• การใช้ Terraform เพื่อจำลองการกำหนดค่าในสภาพแวดล้อมหลายรายการ

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Firebase และ Terraform ได้ในเอกสารประกอบ คุณดูรายการผลิตภัณฑ์ Firebase ทั้งหมดที่รองรับ Terraform, การกำหนดค่า Terraform ตัวอย่างสำหรับกรณีการใช้งานทั่วไป รวมถึงการแก้ปัญหาและคำถามที่พบบ่อยที่เป็นประโยชน์ได้