持续集成和持续部署(CI/CD)是自动化构建、测试和部署应用程序的重要实践。在此指南中,我们将引导您使用GitHub Actions为MERN栈应用项目搭建CI/CD流水线,并实现本地服务器上的自动化部署。该博客专为那些希望简化部署流程,并确保每次代码推送时自动测试和部署的开发人员而设计。
目录:- 前提
- 设置 MERN 堆栈应用
- 创建 GitHub 仓库并设置 GitHub Actions
- 使用 GitHub Actions 构建 CI/CD 管道(持续集成/持续部署管道)
- 设置本地服务器进行自动部署
- 配置 GitHub Actions 部署
- 测试 CI/CD 管道(持续集成/持续部署管道)
- 总结
请确保您已经准备好以下内容,开始之前。
- 一个使用 MERN 堆栈的应用(MongoDB、Express.js、React.js、Node.js)。
- 一个 GitHub 账号,其中包含你的应用仓库。
- 你想要部署应用的 本地服务器。你可以使用本地的 Linux 机器,或者使用类似 VirtualBox 的工具来设置本地服务器。
- 通过 SSH 访问本地服务器以实现自动化部署。
- 对 GitHub Actions 的基本了解。
如果你还没有 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 密文。
现在,修改名为 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流程。每当向主分支推送代码时,流程会自动进行测试、构建和部署应用程序到本地的服务器。您可以利用这种设置确保应用程序总能保持最新并正常运行,无需手动操作,从而简化开发和部署过程。