使用GitHub Actions为MERN应用搭建自动部署到本地服务器的CI/CD流水线-原创手记-慕课网

持续集成和持续部署（CI/CD）是自动化构建、测试和部署应用程序的重要实践。在此指南中，我们将引导您使用GitHub Actions为MERN栈应用项目搭建CI/CD流水线，并实现本地服务器上的自动化部署。该博客专为那些希望简化部署流程，并确保每次代码推送时自动测试和部署的开发人员而设计。

目录:

前提
设置 MERN 堆栈应用
创建 GitHub 仓库并设置 GitHub Actions
使用 GitHub Actions 构建 CI/CD 管道（持续集成/持续部署管道）
设置本地服务器进行自动部署
配置 GitHub Actions 部署
测试 CI/CD 管道（持续集成/持续部署管道）
总结

1. 先决条件

请确保您已经准备好以下内容，开始之前。

一个使用 MERN 堆栈的应用（MongoDB、Express.js、React.js、Node.js）。
一个 GitHub 账号，其中包含你的应用仓库。
你想要部署应用的 本地服务器。你可以使用本地的 Linux 机器，或者使用类似 VirtualBox 的工具来设置本地服务器。
通过 SSH 访问本地服务器以实现自动化部署。
对 GitHub Actions 的基本了解。

2. 搭建一个 MERN 堆栈应用

如果你还没有 MERN 堆栈的应用程序，下面是如何搭建起一个基本的 MERN 应用：

使用 Node.js 和 Express 的后端

创建一个 Node.js 项目：

创建一个名为mern-app的目录  
进入mern-app目录  
使用npm初始化项目并自动确认所有设置

确保安装好所有必需的依赖项：

    npm install express mongoose dotenv

创建一个基本的 server.js 文件，例如。

const express = require("express");  
const app = express();  
const port = process.env.PORT || 5000;  

app.get("/", (req, res) => {  
    res.send("后端向您问好!");  
});  

app.listen(port, () => {  
    console.log(`控制台显示: '服务器正在端口 ${port} 上运行'`);  
});

前端（React），

创建React前端应用。

运行下面的命令来创建一个名为 client 的 React 应用程序:`npx create-react-app client`

在 client/src/App.js 文件中加入一个简单的 API 请求：

    import React, { useEffect, useState } from "react";  

    function App() {  
      // 定义一个状态变量 message 用于存储从服务器请求回来的信息
      const [message, setMessage] = useState("");  

      // 当组件挂载完成时，useEffect 会执行下面的代码，这里我们不依赖任何外部变量，因此空数组 []
      useEffect(() => {  
        // 使用 fetch 方法发起一个网络请求到本地服务器 http://localhost:5000
        fetch("http://localhost:5000")  
          // 当请求成功时，response.text() 会将响应体转换为文本格式
          .then((response) => response.text())  
          // 将转换后的文本赋值给 message 变量
          .then((data) => setMessage(data));  
      }, []);  

      // 返回一个包含 h1 标签的 div 元素，其内容是 message 变量的值
      return (  
        <div className="App">  
          <h1>{message}</h1>  
        </div>  
      );  
    }  

    // 导出默认组件 App
    export default App;

同时运行（前后端并行运行）：

同时安装 nodemon:

在开发环境中，可以使用以下命令安装concurrently和nodemon：```
npm install concurrently nodemon --save-dev

其中，`concurrently`（并发运行）和`nodemon`（自动重启服务器）。

在 `package.json` 中添加脚本任务：

"scripts": {  
  "start": "并发地运行 \"npm run server\" 和 \"npm run client\"，启动：同时运行服务器和客户端",  
  "server": "nodemon server.js，服务器启动：使用nodemon监视和重启server.js",  
  "client": "npm run start --prefix client，客户端启动：在client目录下运行npm start"  
}


## **3\. 创建 GitHub 仓库并启用 GitHub Actions**

**把代码推送到 GitHub 上**

先初始化 Git，然后提交你的 MERN 应用代码，最后推送到 GitHub 上。

git init  
git add .  
git commit -m "首次提交"  
git branch -M main （将分支重命名为main）  
git remote add origin https://github.com/yourusername/mern-app.git （将远程仓库添加到origin）  
git push -u origin main （将本地仓库推送到远程main分支并设置为上游）


**设置 GitHub 动作：**

打开你的 GitHub 仓库页面，点击 **Actions** 标签，然后点击 **“自己设置工作流程”**。

## 4\. 使用 GitHub Actions 构建 CI/CD 流水线

我们将创建一个 GitHub Actions 工作流来自动完成任务，自动运行测试，构建应用，再部署到本地服务器。

**在你的项目中创建 `.github/workflows/ci-cd.yml`**

这里有一个基本的持续集成和持续交付（CI/CD）流程。

name: MERN 应用的 CI/CD 管道

on:  
  push:  
    branches:  
      - main  

jobs:  
  build:  
    runs-on: ubuntu-latest  

    steps:  
    - name: 检出代码  
      uses: actions/checkout@v2  

    - name: 设置 Node.js  
      uses: actions/setup-node@v2  
      with:  
        node-version: '14'  

    - name: 安装后端依赖项  
      run: npm install  

    - name: 安装前端依赖项  
      run: |  
        切换到 client 目录  
        npm install  

    - name: 运行测试  
      run: npm test  

    - name: 构建前端  
      run: |  
        切换到 client 目录  
        执行 npm run build  

    - name: 上传构建产物  
      uses: actions/upload-artifact@v2  
      with:  
        name: build  
        path: ./client/build


## **5. 设置本地服务器进行自动部署**

接下来，我们需要设置本地服务器来接收 GitHub 的自动部署。

**在本地服务器上装上Node.js和PM2：**

通过 SSH 连接到你的本地服务器上并安装相应版本的 Node.js

更新软件包列表并安装Node.js和npm：
sudo apt update
sudo apt install nodejs npm -y


安装 **PM2** 来运行 Node.js 应用程序：

运行以下命令来全局安装 pm2:\n```\nsudo npm install -g pm2\n```

**为 GitHub Actions 配置 SSH**

为了使GitHub Actions能够自动部署到你的本地服务器，我们需要配置SSH。

你可以用你的本地服务器生成一个SSH密钥对。

运行这个命令来生成一个RSA密钥对：```
ssh-keygen -t rsa -b 4096 -C "github-actions"

复制这个公钥：

    cat ~/.ssh/id_rsa.pub

查看SSH密钥的内容

将你的公钥添加到服务器的用户主目录下的 ~/.ssh/authorized_keys 文件中。

把私钥放到 GitHub Secrets 里

复制私钥 (~/.ssh/id_rsa)，并在你的仓库设置中将其命名为 SSH_PRIVATE_KEY 并添加为 GitHub 密文。

6. 在 GitHub Actions 中配置部署设置

现在，修改名为 ci-cd.yml 的文件，并在其中加入部署步骤：

更新一下: .github/workflows/ci-cd.yml:

    jobs:  
      build:  
        runs-on: ubuntu-latest  
        steps:  
         - name: 检出代码  
           uses: actions/checkout@v2  

         - name: 配置 Node.js  
           uses: actions/setup-node@v2  
           with:  
             node-version: '14'  

          - name: 安装后端依赖  
            run: npm install  

          - name: 安装前端依赖  
            run: |  
              切换到客户端目录  
              npm install  

          - name: 执行测试  
            run: npm test  

          - name: 构建前端  
            run: |  
              切换到客户端目录  
              npm run build  

          - name: 上传构建产物  
            uses: actions/upload-artifact@v2  
            with:  
              name: build  
              path: ./client/build  

          - name: 将应用部署到测试服务器  
            uses: appleboy/ssh-action@v0.1.2  
            with:  
              host: ${{ secrets.SERVER_IP }}  
              username: your-server-username  
              key: ${{ secrets.SSH_PRIVATE_KEY }}  
              script: |  
                切换到应用目录  
                git pull origin main  
                npm install  
                npm run build --prefix client  
                重启所有进程

7. 测试 CI/CD 流水线

推送代码到 GitHub:

在你的 MERN 应用中做任何改动（例如，修改 App.js 文件中的信息），并将其推送到主分支上去。

    git add .  
    git commit -m "更新信息"  
    git push origin main.

查看 GitHub Actions 工作流：

进入你仓库的操作标签页，并监控CI/CD流水线的进展。如果一切设置正确，流水线应该顺利运行，你的本地服务器会自动拉取更新，安装依赖，构建前端并重启应用程序。

8. 结尾

或者简化为：

最后来总结一下

在这份指南里，我们为一个使用GitHub Actions的MERN栈技术实现了一个CI/CD流程。每当向主分支推送代码时，流程会自动进行测试、构建和部署应用程序到本地的服务器。您可以利用这种设置确保应用程序总能保持最新并正常运行，无需手动操作，从而简化开发和部署过程。