Ensuring Seamless Deployment: Hands-On Guide for Integrating Backend a

In Part 1 of our series on ensuring seamless deployment using Google Cloud and GitHub Actions, we explored the conceptual framework and why sequencing deployments is critical for application reliability. Now, let's dive into the practical aspects. This hands-on guide will walk you through setting up a sequential deployment process for a Nest.js backend and a Next.js frontend hosted on Google Cloud.

Prerequisites

Before we start, ensure you have:

Two GitHub repositories set up for your backend (Nest.js) and frontend (Next.js).
A Google Cloud Platform (GCP) account.
The Google Cloud SDK installed and configured on your machine.

Step 1: Configuring Google Cloud Build

Backend Deployment

Create a Build Trigger:
- Go to the Google Cloud Console.
- Navigate to Cloud Build > Triggers.
- Click on "Create Trigger."
- Connect your GitHub repository for the backend.
- Set the trigger to activate on push to the main branch.
Configure the Build Steps:
- Use the inline editor to define the steps for building a Docker image and deploying it to Cloud Run. Here’s an example cloudbuild.yaml for the backend:

steps:
- name: 'gcr.io/cloud-builders/docker'
  args: ['build', '-t', 'gcr.io/$PROJECT_ID/nest-backend', '.']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
  entrypoint: gcloud
  args: ['run', 'deploy', 'nest-backend', '--image', 'gcr.io/$PROJECT_ID/nest-backend', '--platform', 'managed', '--region', 'us-central1', '--allow-unauthenticated']
timeout: '1600s'

Frontend Deployment

Repeat the steps for the frontend, adjusting the Docker build and deployment commands for the Next.js application.

Step 2: Setting Up Google Cloud Pub/Sub

Create a Pub/Sub Topic:
- Go to the Pub/Sub section in the Google Cloud Console.
- Click "Create Topic" and name it backend-ready.
Set Up a Subscription:
- Create a subscription to this topic.
- Configure it to trigger a Google Cloud Function or use a webhook that points to an external service to handle the event.

Step 3: Google Cloud Function for Handling Backend Readiness

Write a Cloud Function:
- Navigate to Cloud Functions.
- Create a new function triggered by Pub/Sub messages.
- Implement logic to trigger a repository dispatch event on GitHub when a message is received. Here's a simple example in Node.js:

const {Octokit} = require("@octokit/rest");

exports.triggerFrontendDeployment = async (message, context) => {
  const octokit = new Octokit({ auth: `token ${process.env.GITHUB_TOKEN}` });

  const repo_owner = 'your-github-username';
  const repo_name = 'your-frontend-repo';

  await octokit.repos.createDispatchEvent({
    owner: repo_owner,
    repo: repo_name,
    event_type: 'backend-deployed',
    client_payload: { ref: 'main' },
  });
};

Securely Add Your GitHub Token:
- Add your GitHub token to the environment variables of the Cloud Function for authentication.

Step 4: GitHub Actions for Frontend Deployment

Configure GitHub Actions:
- In your frontend repository, create a .github/workflows/deploy.yml file.
- Set it up to trigger on the repository dispatch event backend-deployed. Here’s a basic workflow:

name: Deploy Frontend
on:
  repository_dispatch:
    types: [backend-deployed]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Build and deploy to Google Cloud Run
      run: |
        gcloud builds submit --tag gcr.io/${{ secrets.GCP_PROJECT_ID }}/next-frontend
        gcloud run deploy next-frontend --image gcr.io/${{ secrets.GCP_PROJECT_ID }}/next-frontend --platform managed --region us-central1 --allow-unauthenticated

Step 5: Testing and Validation

Test the Entire Flow:
- Make changes to the backend and push to GitHub.
- Monitor the Cloud Build for successful deployment.
- Ensure the Pub/Sub message triggers the Cloud Function.
- Verify that the frontend deployment starts automatically after the backend is ready.

This hands-on guide outlines each step necessary to set up a fully automated deployment pipeline using Google Cloud and GitHub Actions. By following these steps, you can ensure that your deployments are reliable, and your application components are always in sync.

Ensuring Seamless Deployment: Hands-On Guide for Integrating Backend and Frontend with Google Cloud and GitHub Actions (Part 2)