Mastering Claude Code

What is Vercel: The Concept of One-Click Deployment

There is a singular sensation the first time you see your own website displayed on a mobile phone screen. A page that existed only on your computer's localhost now appears identically in a mobile browser you opened while sipping coffee in a cafe. What happened in between?

Localhost is an address accessible only from your own computer. When Claude Code starts a development server, you are assigned an address like localhost:3000 or localhost:51006, which opens only in a browser on the same computer. If someone else enters this address, nothing appears. Because the website's code runs only in your computer's memory.

To release this code to the world, you must upload it to a server running 24 hours a day and connect a unique address to that server. Traditionally, this process required dozens of steps: renting a server, configuring the operating system, installing web server software, issuing an SSL certificate, and connecting a domain.

Vercel is a service that compresses this complicated process into a single button click. When you select a GitHub repository and press the Deploy button, Vercel fetches the code, builds it, deploys it to servers distributed worldwide, automatically sets up an HTTPS certificate, and assigns a unique URL.

Vercel's free plan is sufficient for running personal projects and portfolio sites. Deployed sites are assigned a default domain in the format projectname.vercel.app. Anyone can access your site through this domain, and you can also connect your own custom domain.

The key to understand here is that what Vercel does is take your code and turn it into a website. When you have code on GitHub and deployment configuration on Vercel, you complete the pipeline connecting the two.

Connecting a GitHub Repository to Vercel

When you sign up for Vercel using your GitHub account, all the steps that follow become straightforward. Vercel can immediately access your list of GitHub repositories.

The connection process works as follows.

Click Add New Project in the Vercel dashboard. Your GitHub repository list appears on the screen. Find the repository you want to deploy and click the Import button. A build configuration screen appears, where it automatically detects frameworks like Next.js or React. When you click the Deploy button, the build begins.

In tens of seconds to a few minutes, the build completes and a unique URL is generated. When you enter this URL in your browser, your website appears. Whether you open it on a phone or a computer in another country, the same page appears.

However, problems can occur on the first deployment. Let me recall the website example from the previous chapter. When I deployed a Blender product landing page to Vercel, the frame image files used in the scroll animation were missing. A site that ran perfectly on my computer now displayed only text without the Blender images after deployment.

The culprit was the .gitignore file. The image frame folder was excluded from Git tracking, so it was never pushed to GitHub, and Vercel never received those files. The solution is simple. When I ask Claude Code to include the frame images in GitHub and push again, it modifies the .gitignore configuration and pushes the missing files in an additional commit.

This experience offers a lesson. Your computer environment and deployment environment are different. Files that exist on your computer but are not tracked by Git do not exist in the deployment environment. Before deploying, you need to develop the habit of checking: Does my repository include all the files needed to run the site?

In the Deployments tab of the Vercel dashboard, you can view all deployment history. Rolling back a problematic deployment to a previous version is also possible with a single click.

Real-Time Deployment Pipeline: How Code Changes Automatically Reflect

Once the connection between Vercel and GitHub is complete, a remarkably smooth workflow operates from then on.

The process works like this. You modify the website code in Claude Code. You check the changes on your localhost. If you like them, you request: push to GitHub. A new commit arrives on GitHub. Vercel automatically detects this change. A new build starts, and when it completes, the live site automatically updates.

The critical safeguard in this pipeline is explicit pushing. No matter how much you modify on your computer, the live site remains unaffected until you say push to GitHub. This is intentional design.

It is safer to write this principle into your CLAUDE.md file. For example: We will sync changes to GitHub, and GitHub will automatically push to Vercel. However, when you make changes on my computer, always validate them first on my localhost. Never reflect changes remotely until I explicitly tell you to commit or push to GitHub. With guidelines like these in place, you prevent Claude Code from accidentally pushing code while you are still working on it.

The speed of real-time reflection is also impressive. In the earlier example, after adding a glow effect to the hero button and pushing to GitHub, Vercel's deployment completed within minutes, and the glowing button appeared when I refreshed the live site.

In GitHub's commit history, the message add glowing pulse effect to hero join the community button was recorded, and a corresponding deployment record appeared in Vercel's deployment history.

Through this structure, three environments naturally take shape.

Development environment (your localhost): A space where you freely modify and test. Failures have no impact.

Staging environment (GitHub): A space where code change history is recorded. Code pushed here should be in an organized state.

Production environment (Vercel live site): The space where actual users access your site. It automatically deploys from GitHub.

Connecting a Domain and Setting Environment Variables

The default projectname.vercel.app domain that Vercel automatically assigns is functionally complete, but it falls short of conveying a professional impression. Connecting your own domain raises the credibility of your site.

The domain connection process begins in Vercel's project settings. Navigate to the Domains section under the Settings tab. You have two options: purchase a domain directly from Vercel or add a domain you already own.

To connect an existing domain, you must change your DNS settings (Domain Name System configuration). In the admin panel of the service where you purchased the domain,such as Gabia, Namecheap, or Google Domains,modify the DNS records to the values Vercel specifies. Vercel's guidance screen explicitly tells you which record to set to which value, so you can follow along even without technical background knowledge.

DNS changes can take anywhere from minutes to up to 48 hours to propagate. In most cases, the change applies within 30 minutes, but if access fails immediately after connecting the domain, there is no need to worry.

Environment variable configuration is necessary when your project integrates with external services. Sensitive information such as API keys, database connection strings, and authentication tokens should not be written directly in your code. Instead, manage them separately as environment variables.

In Vercel's project settings, you can find the Environment Variables section and register key-value pairs. For example, enter your actual API key value as the key NEXT_PUBLIC_API_KEY. This value is stored only on Vercel's servers and is not included in your GitHub repository. In your code, you reference this value as process.env.NEXT_PUBLIC_API_KEY.

The reason for using environment variables is security. Even if your GitHub repository is public, your API key remains unexposed. Additionally, you can use different values in your development and deployment environments. For instance, use a test API key on your computer and the actual API key in production.

When you change an environment variable, Vercel automatically runs a redeployment. If your site redeploys even though you did not modify the code, the cause may be an environment variable change.

Your site is now live, your domain is connected, and your environment variables are set. When you enter the URL in a browser, everyone sees the same page. Yet deployment is not the end. Over time, a live site encounters new types of problems,issues that were invisible in the development environment.

Lawyer Kim Kyungjin, Artificial Intelligence Specialist

AI Legal Policy Expert · Former Member of National Assembly · Author of Multiple Works

If this book has stayed with you for even a moment, please support it so that the next story can reach the world.

(Voluntary Donation Account: NH Bank 302-1096-0948-81 Account Holder: Kim Kyungjin)