[React x CI/CD] Build an automatic deployment environment! Instant publishing with GitHub Actions x Vercel

programming

"It's a pain to manually deploy every update to my React app."
"It takes time for changes to take effect"
Aren't there many people who have the same concerns?

actually,By combining GitHub Actions and Vercel, you can automatically deploy React apps just by pushing code.can.

In this article,From the concept of CI/CD to setting up GitHub Actions and how to integrate with Vercel, we explain with concrete code and steps that even beginners can understand.I will.

What is CI/CD and why does it matter for React?

Understanding the automated development process

Conclusion: CI/CD is essential for achieving both development efficiency and quality.

CI/CD means the following:

  • CI (Continuous Integration): Automatically merge code changes
  • CD (Continuous Delivery/Deployment): Automatically reflected in test and production environments

In React development,"Modify code → push → automatically publish"By establishing this flow,

  • Prevent deployment mistakes
  • More frequent releases
  • Speed up development

This has a huge effect.

The Ministry of Economy, Trade and Industry's "Digital Government Action Plan" also states,Accelerating development cycles = Pillar of promoting DXTherefore, the introduction of CI/CD is considered to be important (Source: https://cio.go.jp/digital_gov_action_plan).

How GitHub Actions works and how to install it

Define an automated "processing flow"

Bottom line: GitHub Actions is a feature that automatically executes actions in response to events such as pushes and merges.

The components are as follows:

  • Workflow: Processing group
  • Event: The trigger for starting the process (e.g. push)
  • Job：Execution unit (run multiple at once)
  • Step: Execute commands or scripts one by one

On GitHub.github/workflows/You can use it by adding a YAML file to the folder.

Why and how to integrate with Vercel

Why Vercel?

Bottom line: Specialized in React hosting and automatic updates, and very easy to integrate with GitHub.

Vercel has the following features:

  • Free plan available
  • Automatic deployment just by linking with GitHub repository
  • Issue a URL for each deployment (preview function available)
  • mainordevIt can be divided into branches such as

An example of GitHub Actions configuration

Introducing basic YAML configuration

Conclusion: Automate the build and deployment to Vercel when pushing.

1

point:

  • VERCEL_TOKEN must be set in GitHub Secrets
  • Vercel The CLI is installed automatically.

How to confirm successful deployment and use it

Verification procedure and failure checks

Conclusion: This can be confirmed on the Actions screen and in the Vercel log.

How to check:

  • GitHub "Actions" tab → Check execution log
  • Vercel Dashboard → If successful, a new URL will be displayed
  • If it fails, use the error message node_modules Review dependencies and token settings

Completed code and file structure

1

deploy.yml (the YAML mentioned above)

App.js (example)

1
2
3
4
5
6
(
    
      
      
    
  ); }

summary

In this article, we will introduce an app created with React.How to automate deployment using GitHub Actions and VercelWe introduced the following.

Key Takeaways:

  • GitHub ActionsAutomatically execute operations after every push or mergecan
  • By combining with Vercel,Production release possible at no cost
  • Through automation,Greatly reduces mistakes and hasslecan

If you are continuously updating your React app, we recommend you try using this CI/CD environment.

Copied title and URL