Reactjs - CF Learning - Part 1 - Làm quen với GCP Part 1

firebase-hosting-gcp-cloud-build.md

Firebase hosting

1. Kiểm tra, init firebase vào project của bạn

//install firebase cli
npm install -g firebase-tools

firebase login

firebase init hosting

2. Ví dụ về thông số firebase.json

{
  "hosting": [
    {
      "target": [target-production],
      "public": "build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    },
    {
      "target": [target-stg],
      "public": "build",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    }
  ]
}

3. Ví dụ về thông số của .firebaserc

{
  "projects": {
    "default": [project-id]
  },
  "targets": {
    "[project-id]": {
      "hosting": {
        "[target-production]": [
          "[target-production]"
        ],
        "[target-stg]": [
          "[target-stg]"
        ]
      }
    }
  }
}

4. Triển khai mã nguồn lên hosting

yarn install
yarn build:stg or yarn build: production

firebase deploy --only hosting:[target-stg]
firebase deploy --only hosting:[target-production]

}

Sử dụng cloud build để tự động deploy hosting khi có trigger từ một nhánh của repository

Các event có thể được trigger

Repository event that invokes trigger
- Push to a branch
- Push new tag
- Pull request (Not available for Cloud Source Repositories)

Or in response to

- Manual invocation
- Pub/Sub message
- Webhook event

1. Ví dụ về file cloudbuild.yaml

steps:
  - name: node:14-alpine
    entrypoint: yarn
    args:
      - install
  - name: node:14-alpine
    entrypoint: yarn
    args:
      - run
      - build:production
  - name: 'gcr.io/classfunc-com/firebase'
    args: [ 'deploy','--only','hosting:[target-production]' ]
    timeout: 600s
    env:
      - '_FIREBASE_TOKEN=$_FIREBASE_TOKEN' (Để lấy firebase token của mình: firebase login:ci)
options:
  machineType: 'N1_HIGHCPU_8'

2. Truy cập vào cloud build triggers

https://console.cloud.google.com/cloud-build/triggers?project=[project-id]

3. Tạo mới triggers, điền các tham số, env _FIREBASE_TOKEN.

4. Thử nghiệm run triggers và tham chiếu kết quả.