Angular Universal SSR w/Google Cloud Run

Learn to deploy Angular Universal SSR app on Google Cloud Run Service, pair Firebase Hosting with Cloud Run.

Create Dockerfile

Filename: Dockerfile

FROM node:16

# Create and change to the app directory.
WORKDIR /usr/src/app

# Copy application dependency manifests to the container image.
# A wildcard is used to ensure both package.json AND package-lock.json are copied.
# Copying this separately prevents re-running npm install on every code change.
COPY package*.json ./

# Install production dependencies.
RUN npm install --omit=dev

# Copy local code to the container image.
COPY . ./

# Run the web service on container startup.
CMD ["npm", "run", "start"]

Set Google Cloud Project to add application to

gcloud config set project PROJECT_ID

Build container image with Cloud Run

gcloud builds submit --tag gcr.io/<PROJECT_ID>/<SERVICE_NAME>

Upon success, you will see a SUCCESS message containing the image name
(gcr.io/<PROJECT_ID>/<SERVICE_NAME>).

Deploy the container image to Cloud Run

gcloud run deploy --image gcr.io/<PROJECT_ID>/<SERVICE_NAME>

Direct hosting requests to the containerized app

Filename: firebase.json

"hosting": {
    "public": "dist/browser",
    "rewrites": [
      {
        "source": "**",
        "run": {
          "serviceId": "<SERVICE_NAME>",
          "region": "us-central1"
        }
      }
    ]
  },

Set Firebase project

firebase use <FIREBASE_PROJECT_ID>

Deploy Firebase Hosting confiiguration

firebase deploy --only hosting -m "Run on Google Cloud Service"

Deploy new update to the app

gcloud config set project <PROJECT_ID>
gcloud builds submit --tag gcr.io/<PROJECT_ID>/<SERVICE_NAME>
gcloud run deploy --image gcr.io/<PROJECT_ID>/<SERVICE_NAME>:latest
firebase use <FIREBASE_PROJECT_ID>
firebase deploy --only hosting -m "update to deployed app"

References

• https://firebase.google.com/docs/hosting/cloud-run