Google Cloud Platform (GCP) has recently unveiled Cloud Run, a game-changing service that transforms how developers approach serverless application deployment. It enables you to convert any backend code into a fully managed microservice that can automatically scale based on demand, and you only pay for the resources consumed. In this article, we will dive into how to effectively use Cloud Run to deploy a containerized application, specifically using a server-side rendered JavaScript application as a reference.

What is Cloud Run?

Cloud Run is a serverless computing platform that allows you to deploy applications written in any programming language with any dependencies. Unlike traditional implementations that might limit you to specific runtimes or required infrastructure, Cloud Run offers flexibility and ease of use by letting you package your application in a Docker container. This encapsulation ensures that your app functions the same, regardless of where it’s deployed.

Why Should You Care About Cloud Run?

• Cost Efficiency: You only pay for the resources you use, avoiding the overhead of keeping virtual machines running.
• Automatic Scaling: Cloud Run can scale applications automatically, accommodating varying levels of traffic without requiring manual intervention.
• Language Agnosticism: Deploy code in any programming language, using any dependencies, which is a significant advantage over typical serverless architectures.

With that in mind, let’s explore how to deploy a microservice with Cloud Run step-by-step.

Getting Started with Cloud Run

To follow along with this tutorial, make sure you have the following prerequisites:

• Docker installed on your local machine.
• Google Cloud SDK set up and authenticated.

Step 1: Create Your Application

For this demonstration, we will be working with a Nuxt.js application, which is optimized for server-side rendering. Begin by creating a new Nuxt.js project:

npx create-nuxt-app my-nuxt-app

Choose the default settings, ensuring that you select Universal as the rendering mode. Once the setup is complete, navigate into your project directory:

cd my-nuxt-app

Run your application locally to verify it functions correctly:

npm run dev

You should see the app running at http://localhost:3000.

Step 2: Dockerize the Application

Next, we’ll containerize the application using Docker. Create a Dockerfile in the root of your project directory. Here’s a simple example of what it should look like:

FROM node:10

# Set working directory
WORKDIR /usr/src/app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the application for production
RUN npm run build

# Expose the port that the app runs on
ENV PORT=3000

# Command to run the application
CMD [ "npm", "start" ]

This Dockerfile outlines the steps to create the application’s container environment, installing dependencies and building the production app.

Step 3: Build and Test the Docker Image

Now, let’s build the Docker image:

docker build -t my-nuxt-app .

After building, you can run your container locally to test:

docker run -p 8080:3000 my-nuxt-app

Verify by accessing http://localhost:8080. If all goes well, you should see your Nuxt.js application.

Step 4: Upload to Google Container Registry

To deploy your image, first tag it:

docker tag my-nuxt-app gcr.io/YOUR_PROJECT_ID/my-nuxt-app

Then push it to the Google Container Registry:

docker push gcr.io/YOUR_PROJECT_ID/my-nuxt-app

Step 5: Deploy to Cloud Run

With your Docker image pushed, navigate to the Cloud Run section in the GCP Console. Click on Create Service and select your image under Container Image URL. Make sure to allow unauthenticated invocations if you want your application to be publicly accessible.

Once you deploy, Cloud Run will provide you with a service URL. Open this URL in a browser, and you should again see your Nuxt.js app running live on the cloud!

Integrating with Firebase Hosting

To fully utilize Firebase hosting in conjunction with Cloud Run, you can set up your project for Firebase Hosting by running:

firebase init hosting

Follow the prompts to configure your Firebase project, but remember to delete the index.html file that Firebase creates in the public directory. We will establish rewrites to direct all traffic to the Cloud Run service by adjusting the firebase.json file:

{  
  "hosting": {    
    "rewrites": [      
      {        
        "source": "**",       
        "run": "my-nuxt-app"      
      }    
    ]  
  }
}

Deploy the Firebase Hosting configuration:

firebase deploy --only hosting

Now your application should be accessible through the Firebase Hosting domain with full server-side rendering capabilities.

Conclusion

Cloud Run represents a significant advancement in serverless computing, removing the limitations that many developers face while building scalable applications. With its robust architecture, flexibility, and cost-effectiveness, it opens up a world of possibilities for application deployment. Whether constructing server-side rendered applications with frameworks like Nuxt.js, building RESTful APIs, or leveraging any programming language, Cloud Run is an exciting solution for modern web development.

If you’re looking to explore more about deploying applications seamlessly or want assistance with your cloud infrastructure, consider becoming a member at Fireship.io for in-depth tutorials and resources. Harness the full potential of Google Cloud Run and elevate your development projects today!