Objective

To understand and implement a modern, automated deployment pipeline for a web application using a serverless platform and a Git-based workflow. This lab will demonstrate how Platform as a Service (PaaS) abstracts away infrastructure management and how Continuous Integration/Continuous Deployment (CI/CD) automates updates, allowing developers to focus solely on code.

Start Where You Are

This lab builds directly on the concepts from Chapter 7: Let's Do Even More with my Data Temporarily, where we introduced the idea of ephemeral, serverless functions. Here, we apply that concept to hosting a complete website. You will need to setup a Github account [www.github.com] to manage the application code in this exercise, and also demonstrate how DevOps engineers now manage code updates (remember our question about multiple versions of files on your computer, in the cloud shell and in the cloud storage bucket?). We will use a popular serverless platform called Vercel for this exercise because it offers a generous free tier and seamlessly integrates with GitHub, providing a classic example of a modern developer experience.

Part 1: The "Just Ship It" Approach (PaaS/Serverless)

In this part, you'll deploy a complete website from a template in just a few clicks, experiencing the power of a high-level PaaS.

Step 0: Sign up for a GitHub Account

  1. Visit github.com
  2. Follow the instructions to sign up for an account
  3. You can also visit https://github.com/education to sign up for an education account (takes a few days in my experience, so don’t wait on this to continue).

Step 1: Sign Up for the Serverless Platform

  1. Navigate to vercel.com.
  2. Click Sign Up and choose the option to Continue with GitHub.
  3. Authorize Vercel to access your GitHub account. This step is crucial as it allows the platform to read your repositories and automate deployments. Complete the onboarding steps. You can skip any invitations to add team members.

Step 2: Deploy a Website from a Template

  1. If you are not automatically shown a window saying Lets build something new, once on your dashboard, click Add New... and select Project.
  2. Vercel will show you a variety of "Quickstart Templates." These are pre-built websites ready for deployment.
  3. Hover over the Next.js Boilerplate template (a popular web framework) and click Deploy.
  4. You will be prompted to create a Git repository. Vercel will automatically suggest a name for the new repository (e.g., nextjs-starter). Rename it to include your fnamelname. This is the key step: Vercel isn't just hosting your site; it's creating a corresponding code repository in your GitHub account.