秒速部署ReactJs项目，这个指南你必须收藏！

前端

2023-12-01 04:46:36

当然，我准备了一篇关于“使用Github Action 部署ReactJs项目”的博文，您可以查看：

前言

在软件开发中，部署是一个非常重要的环节。部署是指将开发好的代码发布到生产环境，以便用户能够访问和使用。对于ReactJs项目，我们可以使用GitHub Actions来实现自动化的部署。

创建GitHub仓库

首先，我们需要创建一个GitHub仓库来存放我们的ReactJs项目。登录GitHub，点击右上角的“+”号，选择“New repository”。在弹出的对话框中，输入仓库的名称，然后点击“Create repository”。

使用create-react-app创建一个React项目

接下来，我们需要使用create-react-app在本地创建一个React项目。在终端中，输入以下命令：

npx create-react-app my-react-app

其中，my-react-app是项目名称，您可以根据自己的喜好修改。

编写action

接下来，我们需要编写一个action来构建和部署我们的ReactJs项目。在项目根目录下，创建一个名为.github/workflows/deploy.yml的文件，并输入以下内容：

name: Deploy ReactJs project

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: actions/upload-artifact@v3
        with:
          name: build-artifacts
          path: build
      - uses: akhaledsadi/firebase-action@v3
        with:
          token: ${{ secrets.FIREBASE_TOKEN }}
          project_id: ${{ secrets.FIREBASE_PROJECT_ID }}
          build_artifacts_path: build
          deploy_function: main

在上面的代码中，我们首先定义了action的名称和触发条件。然后，我们定义了构建和部署步骤。在构建步骤中，我们使用npm install安装项目依赖，然后使用npm run build构建项目。在部署步骤中，我们使用akhaledsadi/firebase-actionaction将项目部署到Firebase。