หน้านี้ได้รับการแปลโดย 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 นี้และเข้าสู่ระบบโดยใช้ บัญชีผู้ใช้ หรือ บัญชีบริการ

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

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

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

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

2. รับรหัสเริ่มต้น

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

โคลน ที่เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:

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

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

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

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

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

ไดเร็กทอรีต่อไปนี้ใช้ใน codelabs อื่น:

📁 เริ่มต้นเว็บ

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 ก่อน ไวยากรณ์ alias ของ Terraform ช่วยให้คุณแยกความแตกต่างระหว่างการตั้งค่าผู้ให้บริการ 2 รายได้ในขั้นตอนถัดไปของ Codelab นี้

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

The Terraform FriendlyChat Codelab project selected on the Firebase console

หากคุณติดขัดและไม่สามารถทำให้การกำหนดค่า 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

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

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

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

หากต้องการตั้งค่า Firebase Authentication โดยใช้คอนโซล Firebase โปรเจ็กต์ของคุณไม่จำเป็นต้องอยู่ในแผนการกำหนดราคา Blaze

ต่อไปนี้เป็นวิธีตั้งค่า Firebase Authentication และลงชื่อเข้าใช้ด้วย Google:

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

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

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

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

หากคุณยังไม่มีบัญชี Cloud Billing ขั้นตอนแรกคือการสร้างบัญชีใหม่ใน 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> คือ 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 ให้ค้นหาส่วน Build ในแผงด้านซ้าย
คลิก การรับรองความถูกต้อง แล้วคลิกแท็บ วิธีการลงชื่อเข้าใช้ (หรือ คลิกที่นี่ เพื่อไปยังที่นั่นโดยตรง)
คุณควรเห็น 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 และกฎความปลอดภัย

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

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

โปรดทราบว่าการบล็อกทรัพยากรเหล่านี้ทำได้เทียบเท่ากับการคลิกปุ่ม เผยแพร่ ในคอนโซล Firebase หรือการ firebase deploy --only storage

main.tf

...

# Create a ruleset of Cloud Storage Security Rules from a local file.
resource "google_firebaserules_ruleset" "storage" {
  provider = google-beta

  project  = google_firebase_project.default.project
  source {
    files {
      # Write security rules in a local file named "storage.rules".
      # Learn more: https://firebase.google.com/docs/storage/security/get-started
      name    = "storage.rules"
      content = file("storage.rules")
    }
  }

  # Wait for the 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 ให้ค้นหาส่วน Build ในแผงด้านซ้าย
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 นี้ก็จะเชื่อมต่อได้!

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

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

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

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

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

ติดตั้ง Firebase SDK และเริ่มสร้าง webpack ของคุณ

คุณต้องรันคำสั่งสองสามคำสั่งเพื่อเริ่มบิลด์แอปของคุณ

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

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

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

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

สำหรับ Codelab นี้ คุณมีสองตัวเลือกที่แตกต่างกันในการรับการกำหนดค่า 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 ของแอปด้วยข้อมูลต่อไปนี้:

ดัชนี js

...

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

ลองใช้แอปของคุณ

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

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

11. จำลองการกำหนดค่าของคุณข้ามสภาพแวดล้อม

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

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

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

ตัวเลือกที่ 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 ไฟล์ที่สองนี้ในไดเร็กทอรีเดียวกับไฟล์ 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 meta-argument ในภาษา Terraform

เปิดไฟล์ main.tf ของคุณ

ลงในแต่ละบล็อกทรัพยากรที่คุณต้องการจำลอง ให้เพิ่ม for_each meta-argument ดังนี้:

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 meta-argument ในที่เก็บ 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
google_firebase_project.default
google_firebase_android_app.default
```
```
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 ดังต่อไปนี้
2. เรียกใช้ terraform plan เพื่อดูว่าการกระทำใดที่ Terraform จะต้องใช้สถานะปัจจุบัน
  
  ผลลัพธ์ควรแสดงให้เห็นว่า Terraform จะลบโครงการที่คุณสร้างขึ้นในส่วนแรกของ codelab นี้และสร้างสองโครงการใหม่ นี่เป็นเพราะ 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 จะลบโครงการที่คุณสร้างขึ้นในส่วนแรกของ Codelab นี้
Run terraform apply เพื่อจัดเตรียมโครงการ "Staging" ใหม่ของคุณและทรัพยากรทั้งหมดและเปิดใช้งานบริการ
ตรวจสอบว่าทุกอย่างได้รับการจัดเตรียมและเปิดใช้งานตามที่คาดไว้โดยการตรวจสอบพวกเขาใน คอนโซล Firebase เหมือนเดิม

12. ขั้นตอนโบนัส: ปรับใช้แอพการแสดงละครและ Prod ของคุณ

ใน codebase ของแอปของคุณเปลี่ยน firebase-config.js เพื่อใช้ Firebase Config จากโครงการ Staging ของคุณแทน

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

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

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

13. ขอแสดงความยินดี!

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

สิ่งที่เราได้กล่าวถึง

การใช้ Terraform CLI เพื่อจัดการทรัพยากรคลาวด์
การใช้ Terraform เพื่อกำหนดค่าผลิตภัณฑ์ Firebase (การรับรองความถูกต้อง, Firestore, ที่เก็บข้อมูลบนคลาวด์และกฎความปลอดภัย)
การรันและทดสอบเว็บแอพในพื้นที่โดยใช้ Firebase Local Emulator Suite
การนำเข้าฐานไฟไปยังเว็บแอปพลิเคชัน
การใช้ Terraform เพื่อทำซ้ำการกำหนดค่าในหลาย ๆ สภาพแวดล้อม

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

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

1. บทนำ

เป้าหมาย

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

สิ่งที่คุณต้องการ

2. รับรหัสเริ่มต้น

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

ตั้งค่า Terraform แล้ว

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

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

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

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

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

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

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

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

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

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

6. ตั้งค่าการรับรองความถูกต้องของ Firebase

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

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

เปิดใช้งานการเรียกเก็บเงินผ่าน 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. ขั้นตอนโบนัส: ปรับใช้แอพการแสดงละครและ Prod ของคุณ

13. ขอแสดงความยินดี!

สิ่งที่เราได้กล่าวถึง

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