如何使用一台服务器自动化部署多个项目,前端(vue)+后端(koa)+数据库(mysql)

野猪亨利258
141 阅读13分钟

前言

你是不是也遇到过这些麻烦？买了一台服务器，只部署一个项目总觉得浪费资源；想多放几个前端、后端和数据库，又不知道怎么配置才能避免冲突，担心改着改着把整个服务器搞崩？别慌，这篇博客就是你的 “保姆级指南”—— 从环境准备到最终上线，我会手把手带你用一台服务器，搞定 Vue 前端、Koa 后端和 MySQL 数据库的多项目部署，让每一分服务器资源都用在刀刃上。

话不多说,让我们直接开始实操吧

一.购买并配置服务器

云服务器我们可以有很多的选择：阿里云、腾讯云、华为云。 我选择目前使用更加广泛的阿里云

我们需要注册阿里云账号

[https://www.aliyun.com/](url)

注册即可，非常简单

1.购买服务器

随后我们进入控制台购买服务器

image.png

在更多中找到云服务器ecs

image.png

image.png

我们创建一台服务器(也就是一台实例)

image.png 注意:如果使用的是试用的服务器,创建步骤会有所不同,需要更换操作系统,正常购买的可以继续按照教程走

2.配置服务器

来到创建购买服务器界面后,需要选好配置

选择付费模式: 使用按量付费,这边平时可能包年包月做活动会有特惠,我就是想把自己建立的网站正常做一个展示,这样就比较便宜,自己按需选择

image.png 选择操作系统:

由于linux比较稳定,这边选择Centos Stream,并且是最新版,最好是和我选择一样,不然使用vscode管理服务器可能因为没有图形化界面连接失败.

注意: 使用试用ecs的,请更换操作系统为Centos Stream,不然会连接失败

image.png

选择安全组: 这边把80端口勾选上,后续项目就可以通过公网自动访问这个端口

image.png 创建服务器密码: 选择root,并且自定义密码,创建好服务器的密码

image.png 其他配置 有需要的可以自己配置好自己的实例名称(服务器名称),还有主机名(操作系统的用户名)

image.png 最后关于其他服务器的配置自己按照自己的需求来,可以自己按照要部署的项目个数,按照需求配置服务器的性能

确认下单即可

image.png

随后我们便可以在实例中看到自己服务器的公网ip了,需要记住公网ip,很多配置都需要它

image.png

二.连接服务器

在vscode中找到remote-ssh并安装,使用这个插件来连接管理服务器

image.png 来到ssh连接处,选择Linux并输入

ssh root@你的公网ip
image.png

选择更新第一个配置文件,配置ssh连接服务器

image.png 随后就可以在ssh窗口看见连接了,点击箭头进行连接

image.png

输入你刚才创建服务器的密码

image.png

暂时还没打开root文件夹,vscode左下角显示服务器的公网IP即代表已经连接上了服务器,现在所有的操作都将在服务器进行

image.png

然后打开我们的root文件夹,我所有的项目都布置在服务器的root文件夹下,操作服务器文件可以使用复制粘贴方便很多

直接点击上方中间的搜索框就可以找到root文件夹打开,打开需要再输入一次服务器密码,输入以后下一次就不用再输入

image.png

root目录

image.png

接着我们新建一个终端,

image.png

三.服务器环境准备

首先确保服务器已安装必要依赖，通过VS Code Remote连接服务器后，执行以下命令：

1. 安装基础工具

# 更新系统(可跳过),为了加强服务器安全性
yum update -y

# 安装Nginx（用于部署前端）
yum install -y nginx

#检查nginx版本是否正确：
nginx -v# 输出对应的 nginx 版本nginx version: nginx/1.20.1

# 安装Node.js（koa依赖）和npm
curl -sL https://rpm.nodesource.com/setup_20.x | bash -# 选择Node.js 16版本（适配多数koa项目）
yum install -y nodejs

#检查 Node.js 和 npm 版本是否安装：

node -v  # 输出最新版版本号，如 v20.18.0
npm -v   # 输出对应的 npm 版本，如 10.8.2

# 安装pm2（用于管理koa后端进程，确保断开SSH后仍运行）
npm install pm2 -g

#检查nginx版本是否安装：
pm2 -v # 输出对应的 nginx 版本，如 6.0.13

systemctl restart nginx
systemctl enable nginx  # 设置Nginx开机自启

# 安装数据库（以MySQL为例，若用其他数据库替换对应命令）
yum install -y mysql-server

#检查mysql版本是否安装：
mysql --version #输出类似mysql  Ver 8.0.43 for Linux on x86_64 (Source distribution)
# 2. 启动MySQL服务并设置开机自启
systemctl start mysqld
systemctl enable mysqld

接着在本地浏览器输入你的公网ip,出现以下界面代表你的服务器可以正常访问

image.png 我这边使用了两个项目进行举例,可按照教程布置多个项目

2. 数据库配置（创建两个项目的独立数据库）

# 登录MySQL（首次登录无密码，直接回车）
mysql -u root -p

# 为项目1创建数据库和用户（home库）
CREATE DATABASE home DEFAULT CHARACTER SET utf8mb4;
CREATE USER 'home_user'@'localhost' IDENTIFIED BY '你的复杂密码';  # 替换为实际密码
GRANT ALL PRIVILEGES ON home.* TO 'home_user'@'localhost';#将权限授予用户 home_user，且该用户只能从 localhost（服务器本机）登录。

# 为项目2创建数据库和用户（blog库）
CREATE DATABASE blog DEFAULT CHARACTER SET utf8mb4;
CREATE USER 'blog_user'@'localhost' IDENTIFIED BY '你的复杂密码';  # 替换为实际密码
GRANT ALL PRIVILEGES ON blog.* TO 'blog_user'@'localhost'; # 将权限授予用户 blog_user，且该用户只能从 localhost（服务器本机）登录。

# 刷新权限并退出
FLUSH PRIVILEGES;
exit;

#创建mysql暂时储存表的文件夹
mkdir -p /root/mysql

随后上传在本地导出的sql文件到我们创建的mysql文件夹中,也就是直接把本地mysql文件复制粘贴到服务器的mysql文件夹中,可以把所有的项目mysql上传一下,方便操作

image.png

image.png

四、项目1部署（前端80端口/Nginx，后端koa(3000端口)，数据库home）

1. 前端部署（假设为Vue/React等打包项目）

首先打包前需要确认项目中前端请求后端端口号是不是3000,确认完毕后

image.png

注意这里的locahost替换为你的公网ip

本地打包前端代码：在本地项目根目录执行打包命令（以Vue为例）：
npm run build  # 生成dist目录（若为React则是build目录）
上传前端代码到服务器：

通过VS Code Remote直接拖拽本地dist目录到服务器的前端目录（建议路径）：

# 服务器端创建项目1前端目录
mkdir -p /root/project1/frontend

# 拖拽本地dist文件到服务器的/project1/frontend

完成之后frontend文件夹差不多是这样的

image.png

2. 后端部署（koa框架）

导入home数据库的表结构
-- 登录MySQL（无密码，直接回车）
mysql -u root -p

-- 1. 切换到home数据库
use home;

-- 2. 执行导入（替换路径为实际文件路径）
source /root/mysql/home.sql;

-- 3. 验证结果
show tables;

-- 4.退出数据库
exit
上传后端代码到服务器：
# 服务器端创建项目1后端目录
mkdir /root/project1/backend
# 通过VS Code Remote将本地koa项目代码（除node_modules）上传到该目录

上传完成之后就是这样的

image.png

配置后端并启动：
# 进入后端目录
cd /root/project1/backend

# 安装依赖
npm install

# 修改后端数据库配置（关键！）在服务器上传的项目中
# 用VS Code打开后端配置文件（如config/db.js你自己项目的数据库配置），修改为：
#    示例（koa连接MySQL的配置）：
#    {
#      host: 'localhost',
#      user: 'home_user',#之前配置的用户名称
#      password: '123456',#之前配置的数据库密码
#      database: 'home',
#      port: 3306
#    }

# 确认项目一后端启动端口（假设koa默认用3000端口，若需修改在代码中指定，如app.listen(3000)）

# 用pm2启动后端（确保后台运行）
pm2 start /root/project1/backend/index.js --name "project1-backend"  # index.js替换为你的入口文件

# 设置pm2开机自启
pm2 startup
pm2 save

安全组开放3000端口

来到你的阿里云,管理安全组,在原有安全组的基础上添加3000端口 image.png

3. Nginx配置（关键：绑定端口与反向代理,项目1前端80端口）

创建Nginx配置文件：

# 新建配置文件
vim /etc/nginx/conf.d/project1.conf

输入以下内容（按i进入编辑模式，替换路径为实际项目路径）：

#ctrl+c复制ctrl+v粘贴

server {
    listen 80;  # 项目1前端端口
    server_name 120.222.111.111;  # 你的公网ip,这里也可以替换成你买的域名

    # 前端静态资源路径（指向项目1的dist目录）
    root /root/project1/frontend/dist;
    index index.html;

    # 解决Vue/React单页应用刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理：将/api请求转发到项目1后端（3000端口）
    location /api {
        proxy_pass http://localhost:3000;  # 后端实际端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

按Esc保存退出（:wq），

然后检查Nginx配置

nginx -t  # 检查配置是否有误（显示success即可）

执行权限配置

# 给/root目录添加其他用户执行权限（让nginx能进入目录）
chmod o+x /root

执行后验证：ls -ld /root，输出权限应显示 drwxr-xr-x（最后一位x表示其他用户可执行，即 nginx 能进入）。

4.给前端相关目录添加 “nginx 用户可读取” 权限

# 1. 允许nginx进入project1及frontend目录
chmod o+rx /root/project1
chmod o+rx /root/project1/frontend

# 2. 允许nginx读取dist目录下的所有文件和子目录
chmod -R o+rx /root/project1/frontend/dist

5.验证权限是否生效

# 切换到nginx用户（-s /bin/bash 表示使用bash终端）
su - nginx -s /bin/bash

# 测试1：进入前端dist目录（无报错则说明能进入）
cd /root/project1/frontend/dist

# 测试2：读取index.html文件（能输出内容则说明权限正常）
cat index.html

# 退出nginx用户，回到root
exit

6.重启 Nginx

# 重启Nginx，让权限变更生效
systemctl restart nginx

五、项目2部署（前端81端口/Nginx，后端3001端口，数据库blog）

1.开放81端口

来到实例的更多操作

image.png 更换一个安全组,让其开放80(项目一)和81(项目二)端口 image.png

image.png

image.png

image.png 创建完成后更换过来即可

2. 前端部署（Vue项目）

本地打包前端代码：

在本地Vue项目根目录执行：

npm run build  # 生成dist目录
上传前端代码到服务器：
# 服务器端创建项目2前端目录
mkdir -p /root/project2/frontend
# 通过VS Code Remote将本地dist目录文件上传到该目录

3. 后端部署（koa框架，指定3001端口）

先导入blog数据库的表结构到创建的mysql文件夹中

#-- 登录MySQL（无密码，直接回车）
mysql -u root -p

#-- 1. 切换到blog数据库
use blog;

#-- 2. 执行导入（替换路径为实际文件路径）
source /root/mysql/blog.sql;

#-- 3. 验证结果
show tables;

#-- 4.退出数据库
exit

上传后端代码到服务器：

# 服务器端创建项目2后端目录
mkdir -p /root/project2/backend
# 通过VS Code Remote上传本地koa项目代码

配置后端并启动（指定3001端口）：

# 进入后端目录
cd /root/project2/backend

# 安装依赖
npm install

# 修改后端配置文件：在服务器上传的项目中
# 1. 端口设置：建议用3001（与项目1后端区分）
# 2. 数据库连接：修改为blog库信息
#    示例：
#    {
#      host: 'localhost',
#      user: 'blog_user',
#      password: '123456',
#      database: 'blog',
#      port: 3306
#    }

# 确认项目二后端启动端口（假设koa默认用3001端口，若需修改在代码中指定，如app.listen(3001)）

# 用pm2启动后端
pm2 start /root/project2/backend/index.js --name "project2-backend"  # index.js入口文件替换为实际文件名
pm2 save  # 保存pm2进程配置

4. Nginx配置（项目2前端81端口）

创建Nginx配置文件：

vim /etc/nginx/conf.d/project2.conf

写入以下内容：

server {
    listen 81;  # 项目2前端端口
    server_name 120.22.111.111;  # 公网ip

    # 前端静态资源路径（指向项目2的dist目录）
    root /root/project2/frontend/dist;
    index index.html;

    # 解决单页应用刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理：将/api请求转发到项目2后端（3001端口）
    location /api {
        proxy_pass http://localhost:3001;  # 后端实际端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

按Esc，输入:wq保存退出。

# 检查配置是否有误
nginx -t  # 显示"nginx: configuration file /etc/nginx/nginx.conf test is successful"则正确

给前端相关目录添加 “nginx 用户可读取” 权限

# 1. 允许nginx进入project2及frontend目录
chmod o+rx /root/project2
chmod o+rx /root/project2/frontend

# 2. 允许nginx读取dist目录下的所有文件和子目录
chmod -R o+rx /root/project2/frontend/dist

验证权限是否生效

# 切换到nginx用户（-s /bin/bash 表示使用bash终端）
su - nginx -s /bin/bash

# 测试1：进入前端dist目录（无报错则说明能进入）
cd /root/project2/frontend/dist

# 测试2：读取index.html文件（能输出内容则说明权限正常）
cat index.html

# 退出nginx用户，回到root
exit

重启 Nginx

# 重启Nginx，让权限变更生效
systemctl restart nginx

访问项目

到这里两个项目就已经完全布置完了 项目一可直接通过公网访问 项目二可通过公网的81端口访问,也就是 公网:81,进行访问

制作不易,如果我的教程对你有帮助,还请留下一个小小的赞吧

下面是一些可以选择的操作,不选择也可以

六.防火墙开放服务器端口,加强安全（防火墙配置）

CentOS默认启用firewalld，需开放80、81、8090端口（后端3000端口仅内部访问，无需开放公网）

# 开放端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --zone=public --add-port=81/tcp --permanent
firewall-cmd --zone=public --add-port=3000/tcp --permanent
firewall-cmd --zone=public --add-port=3001/tcp --permanent
firewall-cmd --zone=public --add-port=3306/tcp --permanent  # 仅允许本地连接时可省略

# 重新加载防火墙规则
firewall-cmd --reload

# 验证端口是否开放
firewall-cmd --list-ports  # 应包含上述端口

七、域名解析

在域名解析平台（如阿里云 DNS、腾讯云 DNS）为两个域名添加 A 记录，指向服务器公网 IP 101.201.175.61：

  • 项目 1 域名（如project1.com）→ 解析到101.201.175.61
  • 项目 2 域名（如project2.com）→ 解析到101.201.175.61

以上就是我们使用一台服务器部署多个项目的全流程了,感兴趣的小伙伴赶紧去试试吧,别忘记留下你的点赞哦

avatar
文章
阅读
粉丝