返回

使用 GitHub Actions 和 Nginx 将 React 应用部署到云服务器

前端

前言

React 是一个用于构建用户界面的 JavaScript 库，凭借其强大的优势，React 成为开发人员创建复杂交互式应用的热门选择。在将应用推向生产环境时，通常会考虑将应用部署到云服务器，并利用 GitHub Actions 实现持续集成和持续交付 (CI/CD)。

本文将指导您完成将 React 应用部署到云服务器的详细过程，并介绍使用 GitHub Actions 设置 CI/CD 流程。

准备工作

在开始部署之前，确保您具备以下准备工作：

  • 一个 GitHub 账户和一个云服务器。
  • React 应用代码。
  • Nginx 配置文件。
  • SSH 密钥对。

步骤 1：构建 React 应用

使用以下命令构建 React 应用：

npm run build

这将创建一个名为 "build" 的文件夹，其中包含您应用的生产版本。

步骤 2：设置 Nginx 配置文件

创建 Nginx 配置文件，以指定应用程序的根目录和允许访问的域。例如：

server {
  listen 80;
  server_name example.com www.example.com;
  root /var/www/myapp/build;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

将此配置文件保存在您服务器上的 /etc/nginx/sites-available/myapp.conf 路径中。

步骤 3：设置 GitHub Actions

前往 GitHub 仓库的 "Actions" 标签页，单击 "New workflow" 创建一个新的工作流。

在工作流编辑器中，粘贴以下 YAML 代码：

name: Deploy React App

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@v2
      - run: scp -r build/* user@example.com:/var/www/myapp
      - run: ssh user@example.com "sudo nginx -t && sudo nginx -s reload"

此工作流将监控 "main" 分支的提交，并在有新提交时触发构建和部署任务。

步骤 4：部署应用

将应用部署到服务器，需要执行以下步骤：

  1. 将构建后的应用代码复制到服务器上的指定目录。
  2. 重新加载 Nginx 配置。

可以使用以下命令完成此过程：

scp -r build/* user@example.com:/var/www/myapp
ssh user@example.com "sudo nginx -t && sudo nginx -s reload"

步骤 5：测试应用

在浏览器中访问您的应用，以确保其已成功部署。您还可以在服务器上运行以下命令，以查看应用是否正在运行：

curl http://example.com

如果一切正常，您将看到您的应用正在运行。

结语

恭喜您，您已成功将 React 应用部署到云服务器并实现了 CI/CD 流程。在本文的引导下，您能够构建、测试和部署应用程序的自动化过程，同时利用 Nginx 优化应用的性能与安全性。希望这篇文章对您有所帮助！