หน้านี้ได้รับการแปลโดย Cloud Translation API

ตั้งค่าและจัดการโปรเจ็กต์และผลิตภัณฑ์ 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. รับโค้ดเริ่มต้น

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

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

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

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

สำคัญ: ที่เก็บ codelab-friendlychat-web มีโปรเจ็กต์ตัวอย่างสำหรับ Codelab หลายรายการ

Codelab นี้ใช้ไดเรกทอรี GitHub ต่อไปนี้

📁 web: สถานะเริ่มต้นของ Codelab นี้ ซึ่งเป็นเว็บแอปที่ใช้งานได้ซึ่งพร้อมที่จะใช้ Terraform
📁 web/terraform-checkpoints: มีไฟล์การกำหนดค่าตัวอย่างของ Terraform (*.tf) สำหรับจุดตรวจสอบในส่วนต่างๆ ของ Codelab นี้

ไดเรกทอรีต่อไปนี้ใช้ใน Codelab อื่นๆ

📁 web-start

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

การตั้งค่า Terraform

ในโค้ดเบสของแอปตัวอย่างที่ดาวน์โหลด ให้ไปที่รูทของไดเรกทอรี web

ที่รูทของไดเรกทอรีนั้น ให้สร้างไฟล์การกำหนดค่า 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 รายในขั้นตอนถัดไปของโค้ดแล็บนี้ได้

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

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

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

terraform init

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

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

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

ก่อนอื่น ให้จัดสรรโปรเจ็กต์ Google Cloud ที่อยู่เบื้องหลัง

เพิ่มบล็อกทรัพยากรต่อไปนี้ลงในไฟล์กำหนดค่า main.tf
คุณต้องระบุชื่อโปรเจ็กต์ของคุณเอง (เช่น "Terraform FriendlyChat Codelab") และรหัสโปรเจ็กต์ของคุณเอง (เช่น "terraform-codelab-your-initials") โปรดทราบว่าค่า name จะใช้ภายในอินเทอร์เฟซ Firebase เท่านั้น และผู้ใช้ปลายทางจะไม่เห็น
แต่project_idค่านี้จะระบุโปรเจ็กต์ของคุณต่อ Google ได้โดยไม่ซ้ำกัน ดังนั้นโปรดระบุค่าที่ไม่ซ้ำกัน
หมายเหตุ: ข้อกำหนดสำหรับชื่อโปรเจ็กต์และรหัสโปรเจ็กต์มีดังนี้
- ชื่อโปรเจ็กต์ต้องมีความยาวระหว่าง 4 ถึง 30 อักขระ โดยมีตัวอักษรพิมพ์เล็กและ/หรือพิมพ์ใหญ่ ตัวเลข ขีดกลาง เครื่องหมายคำพูดเดี่ยว เครื่องหมายคำพูดคู่ ช่องว่าง และเครื่องหมายอัศเจรีย์
- รหัสโปรเจ็กต์ต้องมีจำนวนอักขระ 6 ถึง 30 ตัว โดยมีตัวอักษรพิมพ์เล็ก ตัวเลข ขีดกลาง และต้องขึ้นต้นด้วยตัวอักษร ห้ามใช้ขีดกลางต่อท้าย
ดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งานและข้อกำหนดสำหรับค่าเหล่านี้ได้ในเอกสารระบบคลาวด์เกี่ยวกับโปรเจ็กต์
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"
  }
}
```
จากนั้นคุณต้องเปิดใช้ API พื้นฐานที่จำเป็น ได้แก่ Service Usage API และ Firebase Management API

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

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

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 จะไม่ทราบการขึ้นต่อกันและอาจเกิดข้อผิดพลาดเมื่อจัดสรรทรัพยากรแบบขนาน

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

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

ในเทอร์มินัล 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)
      + 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 ก็ได้

โปรเจ็กต์ Codelab FriendlyChat ของ Terraform ที่เลือกในคอนโซล Firebase

หากติดขัดและกำหนดค่า Terraform ให้ทำงานตามที่ต้องการไม่ได้ คุณจะดูไฟล์ .tf ที่มีการกำหนดค่าทั้งหมดจนถึงจุดนี้ใน Codelab ได้ที่นี่

web/terraform-checkpoints/create-firebase-project-checkpoint.tf

ตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้หากต้องการใช้การกำหนดค่านี้

คัดลอกการกำหนดค่าจาก create-firebase-project-checkpoint.tf แล้ววางลงในไฟล์ main.tf ของคุณเอง
ในไฟล์ main.tf ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name และแอตทริบิวต์ project-id ด้วยค่าของคุณเอง
เรียกใช้ terraform apply เพื่อจัดสรรทรัพยากรและเปิดใช้ API

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>"
  deletion_policy = "DELETE"
}

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

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

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

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

terraform show

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

web/terraform-checkpoints/register-app-checkpoint.tf

ตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้หากต้องการใช้การกำหนดค่านี้

คัดลอกการกำหนดค่าจาก register-app-checkpoint.tf แล้ววางลงในไฟล์ main.tf ของคุณเอง
ในไฟล์ main.tf ให้ทำดังนี้
- ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name และแอตทริบิวต์ project-id ด้วยค่าของคุณเอง
- ในgoogle_firebase_web_appบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
เรียกใช้ terraform apply เพื่อจัดสรรทรัพยากรและเปิดใช้ API

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการเปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ผ่าน 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 ด้วย 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,
  ]
}

การเปิดใช้การลงชื่อเข้าใช้ด้วย Google กำหนดให้คุณต้องมีไคลเอ็นต์ OAuth ไปที่ส่วน API และบริการของ Google Cloud Console เพื่อทำการตั้งค่านี้
เนื่องจากนี่เป็นครั้งแรกที่คุณสร้างรหัสไคลเอ็นต์สำหรับโปรเจ็กต์นี้ คุณจึงต้องกำหนดค่าหน้าจอคำยินยอม OAuth
1. เปิดหน้าจอขอความยินยอม OAuth แล้วเลือกโปรเจ็กต์ที่คุณเพิ่งสร้าง
2. ตั้งค่าประเภทผู้ใช้เป็นภายนอก แล้วคลิกสร้าง
3. ในหน้าจอถัดไป ให้ทำตามขั้นตอนต่อไปนี้ แล้วคลิกบันทึกและดำเนินการต่อ
  - ตั้งค่าชื่อแอปที่แสดงต่อสาธารณะของแอปเป็นชื่อ เช่น FriendlyChat (ชื่อนี้ไม่จำเป็นต้องไม่ซ้ำกันทั่วโลก)
  - เลือกอีเมลสนับสนุนผู้ใช้จากเมนูแบบเลื่อนลง
  - ป้อนอีเมลสำหรับข้อมูลติดต่อของนักพัฒนาแอป
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
  สำคัญ: จดรหัสไคลเอ็นต์ OAuth และรหัสลับไคลเอ็นต์ไว้ เนื่องจากคุณจะต้องใช้ในขั้นตอนถัดไป
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
  ]
}

ข้อควรระวัง: เช่นเดียวกับค่าที่ละเอียดอ่อนโดยทั่วไป อย่าใส่รหัสลับไคลเอ็นต์ OAuth โดยตรงในไฟล์กำหนดค่า Terraform สำหรับ Codelab นี้ คุณสามารถส่งรหัสลับไคลเอ็นต์ OAuth จากตัวแปรสภาพแวดล้อม TF_VAR_oauth_client_secret (ซึ่งคุณระบุได้เมื่อใช้การกำหนดค่า Terraform ที่อัปเดตแล้ว ดูด้านล่าง) ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีกําหนดค่าให้กับตัวแปรอินพุต สำหรับการใช้งานจริง คุณควรใช้บริการที่ซับซ้อนกว่า (เช่น Google Cloud Secret Manager) และใช้สถานะระยะไกลสำหรับ Terraform

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

หากต้องการตั้งค่าการตรวจสอบสิทธิ์ตามการกำหนดค่า ให้เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเรกทอรีเดียวกับไฟล์ main.tf (ซึ่งควรเป็น web)
```
export TF_VAR_oauth_client_secret="<YOUR_OAUTH_CLIENT_SECRET>"
```
```
terraform apply
```
โปรดทราบว่าการเรียกใช้ terraform apply จะไม่สร้างโปรเจ็กต์ Google Cloud ใหม่ Terraform จะตรวจพบว่ามีโปรเจ็กต์ที่มีรหัสโปรเจ็กต์ที่ระบุอยู่แล้ว และจะเปรียบเทียบสถานะปัจจุบันของโปรเจ็กต์กับสถานะในไฟล์ .tf จากนั้นจะทำการเปลี่ยนแปลงที่พบ
ตรวจสอบแผนการดำเนินการที่พิมพ์ออกมา หากทุกอย่างเป็นไปตามที่คาดไว้ ให้พิมพ์ yes แล้วกด Enter เพื่ออนุมัติการดำเนินการ

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

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

web/terraform-checkpoints/set-up-auth-checkpoint.tf

ตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้หากต้องการใช้การกำหนดค่านี้

คัดลอกการกำหนดค่าจาก set-up-auth-checkpoint.tf แล้ววางลงในไฟล์ main.tf ของคุณเอง
ในไฟล์ main.tf ให้ทำดังนี้
- ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name, แอตทริบิวต์ project-id และ (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform) แอตทริบิวต์ billing_account ด้วยค่าของคุณเอง
- ในgoogle_firebase_web_appบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
เรียกใช้ terraform apply เพื่อจัดสรรทรัพยากรและเปิดใช้ API

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

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

หากต้องการเปิดใช้ 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
  ]
}

เปลี่ยน <NAME_OF_DESIRED_REGION> เป็นภูมิภาคที่คุณต้องการให้ฐานข้อมูลอยู่

เมื่อพัฒนาแอปที่ใช้งานจริง คุณควรให้ฐานข้อมูลนี้อยู่ในภูมิภาคที่อยู่ใกล้กับผู้ใช้ส่วนใหญ่และใช้ร่วมกับบริการอื่นๆ ของ Firebase เช่น Cloud Functions สำหรับโค้ดแล็บนี้ คุณสามารถใช้ us-east1 (เซาท์แคโรไลนา) หรือใช้ภูมิภาคที่ใกล้ที่สุด (ดูสถานที่ตั้งของ Cloud Firestore)
อินสแตนซ์ฐานข้อมูล Firestore ทุกรายการที่ Firebase เข้าถึงได้ต้องได้รับการปกป้องโดยกฎความปลอดภัยของ Firebase

โค้ดตัวอย่างของ Codelab นี้มีชุดกฎ Firestore ที่ปลอดภัยในไฟล์ firestore.rules ซึ่งคุณจะพบได้ที่รูทของไดเรกทอรี web

ต่อท้ายไฟล์ 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
    ]
  }
}

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

web/terraform-checkpoints/set-up-firestore-checkpoint.tf

ตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้หากต้องการใช้การกำหนดค่านี้

คัดลอกการกำหนดค่าจาก set-up-firestore-checkpoint.tf แล้ววางลงในไฟล์ main.tf ของคุณเอง
ในไฟล์ main.tf ให้ทำดังนี้
- ในบล็อกทรัพยากร google_project ให้อัปเดตแอตทริบิวต์ name, แอตทริบิวต์ project-id และ (หากตั้งค่าการตรวจสอบสิทธิ์ผ่าน Terraform) แอตทริบิวต์ billing_account ด้วยค่าของคุณเอง
- ในgoogle_firebase_web_appบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ display_name ด้วยค่าของคุณเอง
- ในgoogle_firestore_databaseบล็อกทรัพยากร ให้อัปเดตแอตทริบิวต์ location_id ด้วยค่าของคุณเอง
เรียกใช้ terraform apply เพื่อจัดสรรทรัพยากรและเปิดใช้ API

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

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

หากต้องการเปิดใช้ 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
}

ที่เก็บข้อมูล Cloud Storage ทุกรายการที่ Firebase เข้าถึงได้ต้องได้รับการปกป้องโดยกฎความปลอดภัยของ Firebase

โค้ดตัวอย่างของ Codelab นี้มีชุดกฎ Firestore ที่ปลอดภัยในไฟล์ storage.rules ซึ่งคุณจะพบได้ที่รูทของไดเรกทอรี web

ต่อท้ายไฟล์ 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
    ]
  }
}

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

web/terraform-checkpoints/set-up-storage-checkpoint.tf

ตรวจสอบว่าคุณได้ดำเนินการต่อไปนี้หากต้องการใช้การกำหนดค่านี้

คัดลอกการกำหนดค่าจาก set-up-storage-checkpoint.tf แล้ววางลงในไฟล์ main.tf ของคุณเอง
ในไฟล์ 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 ด้วยค่าของคุณเอง
เรียกใช้ terraform apply เพื่อจัดสรรทรัพยากรและเปิดใช้ API

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

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

เปิดหน้าต่างเทอร์มินัลใหม่ แล้วเรียกใช้คำสั่ง Firebase CLI ต่อไปนี้จากไดเรกทอรี web เพื่อเริ่มโปรแกรมจำลอง
```
firebase emulators:start --project=<PROJECT_ID>
```
ในเบราว์เซอร์ ให้เปิดเว็บแอปที่ URL ในเครื่องซึ่ง CLI แสดงผล (โดยปกติคือ http://localhost:5000)

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

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

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

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

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

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

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

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

เปิดหน้าต่างเทอร์มินัลใหม่
สำคัญ: อย่าปิดเทอร์มินัลที่เรียกใช้ firebase emulators:start คุณยังคงต้องใช้เพื่อโฮสต์แอปในเครื่อง
ตรวจสอบว่าคุณอยู่ที่รูทของไดเรกทอรี web
เรียกใช้ npm install เพื่อดาวน์โหลด Firebase SDK
เรียกใช้ npm update เพื่ออัปเดตทรัพยากร Dependency
เรียกใช้ npm run start เพื่อเริ่ม webpack

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

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

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

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

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

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

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

วางการกำหนดค่าลงในไฟล์ 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 ก็ได้

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

หลังจากบล็อกนั้น ให้เพิ่มบล็อกต่อไปนี้

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", "")
  }
}

...

เนื่องจากบล็อก 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"
    }
  }
}
```
คัดลอกค่าจากภายในแผนที่ value

วางค่าเหล่านี้ (การกำหนดค่า) ลงในไฟล์ 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 แล้ว คุณสามารถลองใช้เว็บแอปที่ใช้งานได้

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

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

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

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

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

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

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

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

ที่รูทของไดเรกทอรี web ให้สร้างไฟล์การกำหนดค่า Terraform ใหม่ชื่อ main_staging.tf
คัดลอกบล็อกทรัพยากรทั้งหมดจากไฟล์ main.tf (ยกเว้นบล็อก terraform และ provider) แล้ววางลงในไฟล์ main_staging.tf
หมายเหตุ: คุณไม่จำเป็นต้องทำซ้ำบล็อก terraform และ provider ใน main_staging.tf เนื่องจากคุณกำลังสร้าง.tfไฟล์ที่ 2 ในไดเรกทอรีเดียวกับmain.tfไฟล์ (ไดเรกทอรีนี้มีการเริ่มต้น Terraform อยู่แล้ว) และคุณมีโปรเจ็กต์ Firebase ที่ยอมรับการตรวจสอบโควต้าอยู่แล้ว
จากนั้นคุณต้องแก้ไขบล็อกทรัพยากรที่จำลองแต่ละรายการใน 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>"

  # 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"
}
```
เรียกใช้ terraform apply เพื่อจัดสรรโปรเจ็กต์ Firebase "การจัดเตรียม" ใหม่ รวมถึงทรัพยากรทั้งหมด และเปิดใช้บริการของโปรเจ็กต์
ตรวจสอบว่ามีการจัดสรรและเปิดใช้ทุกอย่างตามที่คาดไว้โดยดูในคอนโซล Firebase เช่นเดียวกับก่อนหน้านี้

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

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

เปิดไฟล์ main.tf

ในบล็อกทรัพยากรแต่ละบล็อกที่ต้องการทำซ้ำ ให้เพิ่ม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

หากต้องการใช้การกำหนดค่านี้ โปรดตรวจสอบว่าคุณได้ทำสิ่งต่อไปนี้

คัดลอกการกำหนดค่าจาก main-foreach.tf แล้ววางลงในไฟล์ main.tf
ในไฟล์ 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 ด้วยค่าของคุณเอง

แทนที่จะใช้การกำหนดค่านี้ทันที คุณควรทำความเข้าใจและแก้ไขบางอย่างเกี่ยวกับวิธีที่ 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 จะลบโปรเจ็กต์ที่คุณสร้างในส่วนแรกของโค้ดแล็บนี้
เรียกใช้ terraform apply เพื่อจัดสรรโปรเจ็กต์ Firebase "การจัดเตรียม" ใหม่ รวมถึงทรัพยากรทั้งหมด และเปิดใช้บริการของโปรเจ็กต์
ตรวจสอบว่ามีการจัดสรรและเปิดใช้ทุกอย่างตามที่คาดไว้โดยดูในคอนโซล Firebase เช่นเดียวกับก่อนหน้านี้

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

ในโค้ดเบสของแอป ให้เปลี่ยน firebase-config.js เพื่อใช้การกำหนดค่า Firebase จากโปรเจ็กต์ Staging แทน

หากต้องการเตือนตัวเองถึงวิธีรับการกำหนดค่า Firebase และเพิ่มลงในแอป โปรดดูขั้นตอนก่อนหน้าของ Codelab นี้ที่เพิ่มการกำหนดค่า Firebase ลงในแอป
ที่รูทของไดเรกทอรี web ให้เรียกใช้คำสั่งต่อไปนี้เพื่อทำให้แอปใช้งานได้ในโปรเจ็กต์ Firebase สำหรับการจัดเตรียม
```
firebase deploy --only hosting --project=<STAGING_PROJECT_ID>
```
เปิดแอป Staging ในเบราว์เซอร์ผ่าน URL ที่พิมพ์ในเอาต์พุตของ firebase deploy ลองลงชื่อเข้าใช้ ส่งข้อความ และอัปโหลดรูปภาพ

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

คุณควรเห็นข้อมูลและรูปภาพปรากฏในโปรเจ็กต์เวอร์ชันที่ใช้งานจริงในคอนโซล Firebase
เมื่อโต้ตอบกับแอปทั้ง 2 แอปสำหรับโค้ดแล็บนี้เสร็จแล้ว คุณสามารถหยุดไม่ให้ 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 สำหรับกรณีการใช้งานทั่วไป รวมถึงการแก้ปัญหาและคำถามที่พบบ่อยที่เป็นประโยชน์ได้

1. บทนำ

เป้าหมาย

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

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

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

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

การตั้งค่า Terraform

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ลองใช้แอป

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

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

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

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

13. ยินดีด้วย

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

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