ตั้งค่าและจัดการโปรเจ็กต์และผลิตภัณฑ์ 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 นี้และลงชื่อเข้าสู่ระบบโดยใช้บัญชีผู้ใช้หรือบัญชีบริการ

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

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

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

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

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

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

โคลนที่เก็บ 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 = "~> 4.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
   }
   

ผู้ให้บริการ google-beta แต่ละรายมีแอตทริบิวต์ชื่อ user_project_override ซึ่งกำหนดวิธีตรวจสอบโควต้าการดำเนินการจาก Terraform สำหรับการจัดสรรทรัพยากรส่วนใหญ่ คุณควรใช้ 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 สำหรับโปรเจ็กต์ดังกล่าว

เพิ่มบล็อกสำหรับโปรเจ็กต์และ API ของ Google Cloud ที่สำคัญ

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>"
   
     # Required for the project to display in any list of Firebase projects.
     labels = {
       "firebase" = "enabled"
     }
   }
   

2. จากนั้นคุณต้องเปิดใช้ API ที่จำเป็น ซึ่งได้แก่ 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
   }
   

   เมื่อเปิดใช้บริการ 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 จะไม่ทราบเกี่ยวกับทรัพยากร Dependency และอาจพบข้อผิดพลาดเมื่อจัดสรรทรัพยากรแบบคู่ขนาน

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

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

   terraform apply
   

2. เทอร์ราฟอร์มจะพิมพ์แผนการดำเนินการที่จะดำเนินการ
   
   หากทุกอย่างเป็นไปตามที่คาดไว้ ให้อนุมัติการดำเนินการโดยป้อน 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)
         + labels              = {
             + "firebase" = "enabled"
           }
         + 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"
    labels              = {
        "firebase" = "enabled"
    }
    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 ในโปรเจ็กต์ 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>"
  deletion_policy = "DELETE"
}

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

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

   terraform apply
   

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

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

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

terraform show

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

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

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

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

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

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

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

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

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

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

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

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

1. หากยังไม่มีบัญชีสำหรับการเรียกเก็บเงินใน Cloud ขั้นตอนแรกคือสร้างบัญชีใหม่ใน Google Cloud Console ซึ่งเมื่อดำเนินการแล้ว ให้จดบันทึกรหัสบัญชีสำหรับการเรียกเก็บเงินของบัญชีนั้น รหัสบัญชีสำหรับการเรียกเก็บเงินจะอยู่ในหน้าการเรียกเก็บเงินในรหัสบัญชีสำหรับการเรียกเก็บเงินที่เชื่อมโยงกับโปรเจ็กต์ของคุณ
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
   
     # Required for the project to display in any list of Firebase projects.
     labels = {
       "firebase" = "enabled"
     }
   }
   
   ...
   

เปิดใช้การตรวจสอบสิทธิ์ 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 Console เพื่อทำการตั้งค่านี้
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 การเปลี่ยนเส้นทางที่ได้รับอนุญาต ให้คลิก Add 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. คลิกการตรวจสอบสิทธิ์ แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ (หรือคลิกที่นี่เพื่อไปที่แท็บนั้นโดยตรง)
3. คุณควรเห็น Google เป็นผู้ให้บริการการลงชื่อเข้าใช้ที่เปิดใช้อยู่

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

สำหรับเว็บแอปของ Codelab นี้ คุณจะจัดเก็บข้อความระหว่างผู้ใช้ปลายทางไว้ในฐานข้อมูล 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 Database แล้วคลิกแท็บ กฎ
   

8. ตั้งค่าที่เก็บข้อมูล Cloud Storage และกฎความปลอดภัย

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

1. หากต้องการเปิดใช้ API ที่จำเป็นและจัดสรรที่เก็บข้อมูลเริ่มต้นของ Cloud Storage ให้เพิ่มไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้
   
   โปรดทราบว่าที่เก็บข้อมูล Cloud Storage เริ่มต้นสำหรับโปรเจ็กต์จะได้รับการจัดสรรผ่าน Google App Engine และต้องมีตำแหน่งเดียวกับฐานข้อมูล Firestore ดูข้อมูลเพิ่มเติมได้ที่ตำแหน่งของ App Engine
   
   หากต้องการที่เก็บข้อมูลหลายรายการในโปรเจ็กต์ ให้จัดสรรที่เก็บข้อมูลโดยใช้ทรัพยากร google_storage_bucket (ไม่ได้แสดงใน Codelab นี้)
   
   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 the default Cloud Storage bucket for the project via Google App Engine.
   resource "google_app_engine_application" "default" {
     provider    = google-beta
   
     project     = google_firebase_project.default.project
     # See available locations: https://firebase.google.com/docs/projects/locations#default-cloud-location
     # This will set the location for the default Storage bucket and the App Engine App.
     location_id = "<NAME_OF_DESIRED_REGION_FOR_DEFAULT_BUCKET>"  # Must be in the same location as Firestore (above)
   
     # Wait until Firestore is provisioned first.
     depends_on = [
       google_firestore_database.default
     ]
   }
   
   # Make the default Storage bucket accessible for Firebase SDKs, authentication, and Firebase Security Rules.
   resource "google_firebase_storage_bucket" "default-bucket" {
     provider  = google-beta
   
     project   = google_firebase_project.default.project
     bucket_id = google_app_engine_application.default.default_bucket
   }
   

2. ที่เก็บข้อมูล Cloud Storage ทุกรายการที่ Firebase เข้าถึงได้ต้องได้รับการปกป้องด้วยกฎการรักษาความปลอดภัยของ Firebase
   
   โค้ดตัวอย่างของ Codelab นี้มีชุดกฎ Firestore ที่ปลอดภัยในไฟล์ storage.rules ซึ่งคุณจะดูได้ที่รูทของไดเรกทอรี web
3. เพิ่มไฟล์ main.tf ด้วยบล็อกทรัพยากรต่อไปนี้เพื่อดำเนินการต่อไปนี้
   • สร้างชุดกฎของกฎการรักษาความปลอดภัยของ Firebase จากไฟล์ในเครื่อง
   • ปล่อยชุดกฎสำหรับที่เก็บข้อมูลของพื้นที่เก็บข้อมูล
   โปรดทราบว่าบล็อกทรัพยากรเหล่านี้ทําได้เทียบเท่ากับการคลิกปุ่มเผยแพร่ในคอนโซล 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 default Storage bucket to be provisioned before creating this ruleset.
     depends_on = [
       google_firebase_storage_bucket.default-bucket,
     ]
   }
   
   # Release the ruleset to the default Storage bucket.
   resource "google_firebaserules_release" "default-bucket" {
     provider     = google-beta
   
     name         = "firebase.storage/${google_app_engine_application.default.default_bucket}"
     ruleset_name = "projects/${google_firebase_project.default.project}/rulesets/${google_firebaserules_ruleset.storage.name}"
     project      = google_firebase_project.default.project
   
     lifecycle {
       replace_triggered_by = [
         google_firebaserules_ruleset.storage
       ]
     }
   }
   

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

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

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

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

   firebase emulators:start --project=<PROJECT_ID>
   

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

คุณควรเห็น UI ของแอป friendlyChat ที่ (ยัง!) ไม่ทำงาน แอปยังไม่ได้เชื่อมต่อกับ Firebase แต่การดำเนินขั้นตอนถัดไปของ Codelab จะเสร็จสมบูรณ์แล้ว

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

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

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

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

แม้ว่าโค้ดตัวอย่างส่วนใหญ่จะสมบูรณ์แล้ว แต่คุณยังต้องทําบางอย่างเพื่อให้แอปทํางาน เช่น ติดตั้ง 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

สำหรับ Codelab ที่เหลือ ตอนนี้ 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>.appspot.com",
     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>.appspot.com"
          }
        }
      }
      

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>.appspot.com",
   };
   
   ...
   

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

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

index.js

...

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

ลองใช้แอป

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

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

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

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

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

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

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

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

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

1. ที่รูทของไดเรกทอรี web ให้สร้างไฟล์การกำหนดค่า Terraform ใหม่ชื่อ main_staging.tf
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 และแอตทริบิวต์ billing_account ด้วยค่าของคุณเอง (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform)
      • ในบล็อกทรัพยากร 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>"
   
     # Required for the project to display in any list of Firebase projects.
     labels = {
       "firebase" = "enabled"
     }
   }
   
   # 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 และแอตทริบิวต์ billing_account ด้วยค่าของคุณเอง (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform)
      • ในบล็อกทรัพยากร google_firebase_web_app ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
      • ในบล็อกทรัพยากร google_firestore_database และ google_app_engine_application ให้อัปเดตแอตทริบิวต์ location_id ด้วยค่าของคุณเอง
3. คุณควรทำความเข้าใจและแก้ไขสิ่งที่ terform ตีความการกำหนดค่านี้เมื่อเทียบกับโครงสร้างพื้นฐานที่มีอยู่เดิม แทนที่จะใช้การกำหนดค่านี้ในทันที
   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 โปรเจ็กต์ เนื่องจาก terform ไม่ทราบว่าโครงการในที่อยู่ 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 จะลบโปรเจ็กต์ที่คุณสร้างในส่วนแรกของ Codelab นี้
4. เรียกใช้ terraform apply เพื่อจัดสรร "การทดลองใช้" ใหม่ โปรเจ็กต์ Firebase และทรัพยากรทั้งหมด รวมถึงเปิดใช้บริการ
5. ยืนยันว่าระบบจัดสรรและเปิดใช้ทุกอย่างตามที่คาดไว้โดยตรวจสอบในคอนโซล Firebase ตามปกติ

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

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

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

3. เปิดแอปชั่วคราวในเบราว์เซอร์ผ่าน URL ที่พิมพ์อยู่ในเอาต์พุต firebase deploy ลองลงชื่อเข้าใช้ ส่งข้อความ และอัปโหลดรูปภาพ
   
   เมื่อทำให้แอปใช้งานได้กับโปรเจ็กต์ Firebase แอปจะใช้ทรัพยากร Firebase จริง ไม่ใช่ทรัพยากรจำลอง เมื่อโต้ตอบกับแอปชั่วคราว คุณควรเห็นข้อมูลและรูปภาพปรากฏในโปรเจ็กต์การทดลองใช้ในคอนโซล Firebase
4. หลังจากทดสอบแอปชั่วคราวแล้ว ให้เปลี่ยน firebase-config.js กลับไปใช้การกำหนดค่า Firebase ของโปรเจ็กต์เวอร์ชันที่ใช้งานจริง (โปรเจ็กต์แรกที่คุณสร้างใน 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 Local Emulator Suite
• การนำเข้า Firebase ไปยังเว็บแอป
• การใช้ Terraform เพื่อจำลองการกำหนดค่าในหลายสภาพแวดล้อม

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