菜鸟教程
教程 react tutorial

部署到 Vercel / Netlify / GitHub Pages

当你完成 React 项目的开发，并构建了生产版本之后，接下来就是将项目部署到线上环境。Vercel、Netlify 和 GitHub Pages 是目前流行的前端部署平台。下面将分别介绍如何将你的 React 项目部署到这些平台。

部署到 Vercel

Vercel 是一个非常简便的部署平台，特别适合前端项目。它支持自动化部署，并且与 GitHub、GitLab、Bitbucket 等代码托管平台集成。

部署步骤

  1. 登录 Vercel: 首先，你需要创建一个 Vercel 账户，并登录 Vercel官网。如果你没有账户，可以使用 GitHub 等方式登录。

  2. 连接代码仓库: 点击 “New Project” 按钮，Vercel 会要求你授权它访问你的 GitHub 仓库。选择你想要部署的 React 项目仓库。

  3. 选择部署设置: Vercel 会自动检测到你的项目是 React 项目，并为你推荐合适的构建命令。你可以直接点击 “Deploy” 进行部署。

  4. 查看部署结果: 部署完成后，Vercel 会提供一个生成的域名，你可以直接在浏览器中查看你的应用。部署过程中，Vercel 会自动处理构建、优化和 CDN 配置。

部署到 Netlify

Netlify 是另一个流行的静态网站托管服务，支持自动化部署、构建、CI/CD 集成等功能，且与 GitHub 集成非常方便。

部署步骤

  1. 登录 Netlify: 访问 Netlify官网 并登录。如果你没有账户，可以使用 GitHub 登录。

  2. 连接代码仓库: 在 Netlify 仪表盘中，点击 “New site from Git”，选择 GitHub 仓库，并授权 Netlify 访问你的 GitHub 仓库。

  3. 设置构建命令与发布目录: Netlify 会自动识别到 React 项目，并默认填写构建命令为 npm run build，发布目录为 build。如果没有自动填写，你可以手动设置。

  4. 部署应用: 点击 “Deploy Site” 按钮，Netlify 会开始从 GitHub 获取项目源代码，执行构建命令并将构建产物部署到 Netlify。

  5. 查看部署结果: 部署成功后，Netlify 会提供一个临时的域名，你可以通过该域名访问你的网站。你也可以在 Netlify 仪表盘中自定义域名。

部署到 GitHub Pages

GitHub Pages 是 GitHub 提供的静态网站托管服务。你可以通过 GitHub Pages 将 React 应用部署到 GitHub 仓库中，并通过 username.github.io 访问。

部署步骤

  1. 安装 gh-pages: 首先，你需要安装 gh-pages 包，用于将构建产物发布到 GitHub Pages：
bash 
   npm install gh-pages --save-dev

`

  1. 修改 package.json: 在 package.json 文件中，添加以下字段：

    • homepage: 设定你的项目主页 URL，通常是 https://username.github.io/repository-name
    • scripts: 添加 predeploy 和 deploy 脚本，分别在构建前和部署后执行。
json 
   {
     "homepage": "https://username.github.io/repository-name",
     "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build"
     }
   }
  1. 构建和部署应用: 使用以下命令来构建和部署你的 React 应用：
bash 
   npm run deploy
  1. 查看部署结果: 构建和部署完成后，你可以通过浏览器访问 https://username.github.io/repository-name 来查看你的应用。

总结

Vercel、Netlify 和 GitHub Pages 都是优秀的前端部署平台，各自有不同的特点和适用场景：

  • Vercel: 适合需要自动化部署和 CI/CD 流程的开发者，尤其适用于 Next.js 和 React 项目。
  • Netlify: 提供了强大的静态站点托管服务，支持自动化构建和简单的 Git 集成。
  • GitHub Pages: 适合个人项目和小型网站，免费并且与 GitHub 仓库紧密集成。

选择适合你的部署平台，快速将 React 应用发布到线上！

相关内容