继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用GitHub Actions为MERN应用搭建自动部署到本地服务器的CI/CD流水线

临摹微笑
关注TA
已关注
手记 331
粉丝 32
获赞 170

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

目录:
  1. 前提
  2. 设置 MERN 堆栈应用
  3. 创建 GitHub 仓库并设置 GitHub Actions
  4. 使用 GitHub Actions 构建 CI/CD 管道(持续集成/持续部署管道)
  5. 设置本地服务器进行自动部署
  6. 配置 GitHub Actions 部署
  7. 测试 CI/CD 管道(持续集成/持续部署管道)
  8. 总结
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:

在开发环境中,可以使用以下命令安装concurrentlynodemon:```
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. 结尾

或者简化为:

  1. 最后来总结一下

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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP