Overview

I am actively using GCP, but I thought that Cloud run + Firebase would be good if I wanted to make a service cheaply and easily, so I summarized it. In terms of maintainability, I think Cloud run is better than Cloud run and Cloud Functions.

Development environment list

Source Repositry
Cloud build
Cloud run
Firebase(hosting)

Introduction

First, enable the service in the above environment. In addition, the minimum IAM required for gcloud is as follows.

--Firebase admin --Cloud run administrator

Since Cloud build is used this time, give the following permissions to "[email protected]" in IAM.

--Cloud Run administrator --Cloud Run Service Agent --Storage Object Administrator

Constitution

The configuration assumes the following. Back-end developers can push to the repository, and Front-end developers don't care about back-ends and keep in mind to use Cloud run as their API server.

Here, Firestore is in the configuration, but I won't cover it in this article (I might write it in another article). Also, if you simply think about processing based on Firestore, you can use "Cloud Functions", but considering the use of your own library and the maintainability of the source code, "Cloud Functions" was inconvenient, so " "Cloud run" is selected.

Back-end side

Bask-end Developer directory structure

I think that the directory structure on the Back-end side should be at least as follows. You can add more files as needed, but ** keep in mind that you need to add processing to the dockerfile described below **.

/root
  |-app.py
  |-requirements.txt
  |-cloudbuild.yaml
  '-dockerfile

Source Repository settings

As you can see in the image below, there is "Create Repository", so click on it to create it. Also, if you press the three-point mark, select "Manage SSH Keys", and then select "Register SSH Authentication Key", an SSH authentication key will be generated. This is used when pushing to the repository.

Cloud Build settings

If you have Cloud Build enabled, you can create a trigger by selecting the Cloud Build tab-> Triggers tab. The settings should look like the following.

--Event: Push to branch --Source: Created repository --Branch: You don't need to set it, but you can set it for "production" / "test" for each branch. --Build configuration: /cloudbuild.yaml

"Cloudbuild.yaml" looks like the following. By changing substitutions, you can change the settings.

--_PLATFORM: Cloud run service type setting --_REGION: Location setting --_SERVICE_NAME: Service name --_AUTHENTICATION: Access authority setting

`cloudbuild.yaml`


steps:
  - name: 'gcr.io/cloud-builders/docker'
    id: 'build-docker-image'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}', '.']
  - name: 'gcr.io/cloud-builders/docker'
    id: 'push-docker-image'
    args: ['push', 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}']
  - name: 'gcr.io/cloud-builders/gcloud'
    id: 'deploy-cloud-run'
    args: ['beta', 'run', 'deploy', '${_SERVICE_NAME}', '--image', 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}', '--platform=${_PLATFORM}', '--region', '${_REGION}']
  - name: 'gcr.io/cloud-builders/gcloud'
    id: 'apply-member-role-cloud-run'
    args: ['beta', 'run', 'services', 'add-iam-policy-binding', '${_SERVICE_NAME}', '--region', '${_REGION}', '--platform=${_PLATFORM}', '--member', '${_AUTHENTICATION}', '--role', 'roles/run.invoker']
substitutions:
  _PLATFORM: managed # full manage
  _REGION: asia-northeast1 # tokyo
  _SERVICE_NAME: <_SERVICE_NAME> # service name
  _AUTHENTICATION: allUsers #See Google IAM documentation overview
images:
  - gcr.io/$PROJECT_ID/${_SERVICE_NAME}

Cloud run The contents of the image file to be deployed to Cloud run are generated by the following docker file. The contents will be changed accordingly.

`dockerfile`


# Use the official Python image.
# https://hub.docker.com/_/python
FROM python:3.7

# Copy local code to the container image.
ENV APP_HOME /app
WORKDIR $APP_HOME

# Install production dependencies.
COPY requirements.txt ./
COPY app.py ./
RUN pip install --no-cache-dir -r requirements.txt

# Service must listen to $PORT environment variable.
# This default value facilitates local development.
ENV PORT 8080

# Run the web service on container startup. Here we use the gunicorn
# webserver, with one worker process and 8 threads.
# For environments with multiple CPU cores, increase the number of workers
# to be equal to the cores available.
CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 app:app

After doing so, if you push it to the repository, it will be automatically deployed to "Cloud run". In the Build state, you can check it on the Cloud console.

Front-end side

Firebase(hosting)

This is the environment on the Front-end side, but the directory structure is not described in particular. Basically, Vue cli will automatically generate the file. I have written an article about Vue, but if you want to know something, please refer to the following article.

--Handle Vue.js without thinking as much as possible: https://qiita.com/StrayDog/items/eceb96f14e5647428942

Development environment

The Javascript framework is as follows.

Vue.js
Bootstrap-vue

I also checked React and Angular.js, but personally Vue.js was the easiest to get to.

If you are not very particular about the design, it is better to reduce the CSS description with Bootstrap.

Send a request from Firebase to your Cloud run container

「firebase.json」の「hosting」に「rewrites」を追加する。リクエストは「projectID.web.app/」「projectID.firebaseapp.com/」「カスタムドメイン/」から可能となる（例えば、get）。projectIDはGCPのプロジェクトホーム画面から確認できる。

`firebase.json`


"hosting": {
 // ...

 // Add the "rewrites" attribute within "hosting"
 "rewrites": [ {
   "source": "**", //Allow all client-side requests
   "run": {
     "serviceId": "<service name>", //Service name(Cloud run container name)
     "region": "us-central1" //Location settings
   }
 } ]
}

reference

--Delivery of dynamic content and hosting microservices using Cloud Run: https://firebase.google.com/docs/hosting/cloud-run?hl=ja#direct_requests_to_container .com / docs / hosting / cloud-run? hl = ja # direct_requests_to_container) --Configure hosting behavior: https://firebase.google.com/docs/hosting/full-config#direct_requests_to_a_cloud_run_container --Google IAM Document Overview: [https://cloud.google.com/iam/docs/overview?hl=ja#concepts_related_identity](https://cloud.google.com/iam/docs/overview?hl=ja# concepts_related_identity) --Super easy. Automatically deploy Go apps to GCP's serverless environment Cloud Run! : [Https://www.apps-gcp.com/deploy-go-app-to-cloud-run-by-cloud-build/](https://www.apps-gcp.com/deploy-go- app-to-cloud-run-by-cloud-build /)

[PYTHON] About Cloud run + Firebase development [Web application development]