Skip to content
AI Learning Playground
LinkedInX
English
English

Setting Up Vercel CI/CD with AI Assistance: A Record of Automating Deployment

Shiori
Shiori

What CI/CD Is

For anyone unfamiliar with the term, I will explain it at the start of this article.

CI (Continuous Integration) is a system that automates the process of reviewing and integrating code changes. CD (Continuous Delivery) is a system that automates the process of reflecting reviewed code into the production environment (the live site).

In plain terms, “uploading code changes to GitHub automatically updates the site” describes a state where CI/CD is in place. Before setting this up, a manual publishing step was required every time code was changed.

The Manual Process Before Automation

When I first started running a site on Vercel, every time I made a code change, I repeated these steps:

  1. Make the code change
  2. Upload the change to GitHub
  3. Open the Vercel dashboard
  4. Press the “Redeploy” button
  5. Wait for deployment to complete
  6. Open the browser and verify the site

Step 4 was required every time, which made iterating through small revisions tedious. The goal of this work was to configure the setup so that uploading to GitHub would automatically update the site.

The Configuration Process with AI

Checking the Current State

I first asked the AI, “How do I automate deployment on Vercel?” According to the AI’s explanation, linking Vercel with GitHub means that every time changes are uploaded to GitHub, deployment runs automatically.

When I checked, my site already had Vercel and GitHub connected, but the automatic deployment configuration was not correctly set up.

Adding the Configuration File

I asked the AI, “What files are needed to set up automatic deployment on Vercel?” The AI presented the contents of a file called vercel.json. I asked the AI to explain what the contents meant, understood them, and then added the file to the project.

Inside the configuration file, there is a section for specifying the build command and the deployment target branch. I decided myself which branch’s changes should be reflected in the production environment.

Handling Errors

After the configuration, I uploaded code to GitHub as a test, and the deployment failed. I passed the error message to the AI, which explained “there is a problem with the build command notation” and suggested a correction.

I applied the correction and uploaded again, and the deployment succeeded. I then opened the site in a browser to confirm that the changes were reflected.

Verification Steps After Setup

To confirm that automatic deployment was functioning, I verified it with the following steps:

  1. Change one line of text and upload to GitHub
  2. Confirm in the Vercel dashboard that deployment started automatically
  3. After deployment completes, open the site in a browser and confirm the change is reflected

I did not consider the configuration complete until I had run this verification.

Connection to Google Analytics Setup

This site also has Google Analytics configured. After setting up automatic deployment, I confirmed that the Vercel environment variables (including the measurement ID) were correctly carried over in the automatic deployment. Environment variables are configured in the Vercel dashboard and are managed separately from code changes. I confirmed that the environment variable settings remained intact after setting up automatic deployment.

Summary

Setting up Vercel automatic deployment with AI assistance made it efficient to generate the configuration file and interpret errors. However, the decision of which branch to use as the production environment, verifying the behavior after setup, and confirming the environment variables were all tasks I handled myself.

With automatic deployment in place, the manual redeploy step is gone. Uploading code changes to GitHub now updates the site automatically.

Tags: