前后端分离项目部署到云服务器、宝塔（前端vue、后端springboot）详细教程

作者：狼烟四起2025.09.26 21:40浏览量：2

简介：本文详细介绍如何将前后端分离项目（前端Vue、后端Spring Boot）部署到云服务器，并使用宝塔面板进行高效管理，涵盖环境准备、代码上传、依赖安装、服务启动等关键步骤。

一、前期准备与云服务器选择

1.1 云服务器选购建议

选择云服务器时需关注以下核心参数：

CPU与内存：中小型项目建议2核4G配置，高并发场景需4核8G以上
带宽配置：初期1-2Mbps足够，流量增长后建议升级至5Mbps
操作系统：推荐CentOS 7.x/8.x或Ubuntu 20.04 LTS，稳定性最佳
安全组配置：开放80(HTTP)、443(HTTPS)、22(SSH)、8080(后端端口)等必要端口

1.2 服务器环境初始化

通过SSH连接服务器后执行：

# 更新系统包
sudo yum update -y  # CentOS
sudo apt update -y  # Ubuntu
# 安装基础工具
sudo yum install -y wget curl unzip  # CentOS
sudo apt install -y wget curl unzip  # Ubuntu

二、宝塔面板安装与基础配置

2.1 宝塔安装流程

# CentOS安装命令
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
# Ubuntu安装命令
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

安装完成后记录面板地址、用户名和密码。

2.2 面板环境配置

登录宝塔后：

软件商店安装：
- Nginx 1.20+（前端服务）
- MySQL 5.7+/MariaDB 10.5+（数据库）
- Java JDK 1.8/11（后端环境）
- Node.js 14.x+（前端构建）
- Redis 6.0+（缓存服务，可选）
安全设置：
- 修改默认SSH端口（建议2222）
- 配置防火墙规则
- 安装宝塔防火墙插件

三、项目部署实施

3.1 前端Vue项目部署

构建生产包：
```
# 在项目根目录执行
npm install
npm run build
```
生成dist目录，包含静态资源文件。

Nginx配置：

server {
 listen 80;
 server_name yourdomain.com;
 root /www/wwwroot/your-frontend;
 index index.html;
 location / {
     try_files $uri $uri/ /index.html;
 }
 # API代理配置
 location /api {
     proxy_pass http://127.0.0.1:8080;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
 }
}

文件上传：

通过宝塔文件管理将dist内容上传至/www/wwwroot/your-frontend
设置目录权限：chown -R www:www /www/wwwroot/your-frontend

3.2 后端Spring Boot部署

打包应用：

<!-- Maven配置示例 -->
<build>
 <plugins>
     <plugin>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-maven-plugin</artifactId>
         <configuration>
             <executable>true</executable>
         </configuration>
     </plugin>
 </plugins>
</build>

执行mvn clean package生成target/your-app.jar

Java环境优化：

# 设置JVM参数
echo "JAVA_OPTS=\"-Xms512m -Xmx1024m -XX:+UseG1GC\"" >> /etc/profile
source /etc/profile

服务管理配置：
创建/etc/systemd/system/springboot.service：
```ini
[Unit]
Description=Spring Boot Application
After=syslog.target network.target

[Service]
User=root
ExecStart=/usr/bin/java -jar /path/to/your-app.jar
SuccessExitStatus=143
Restart=always

[Install]
WantedBy=multi-user.target


4. **数据库配置**：
```sql
-- MySQL示例
CREATE DATABASE yourdb CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'appuser'@'localhost' IDENTIFIED BY 'StrongPassword123!';
GRANT ALL PRIVILEGES ON yourdb.* TO 'appuser'@'localhost';
FLUSH PRIVILEGES;

四、高级配置与优化

4.1 HTTPS配置

通过宝塔申请Let’s Encrypt证书

修改Nginx配置：

server {
 listen 443 ssl;
 ssl_certificate /path/to/cert.pem;
 ssl_certificate_key /path/to/key.pem;
 # ...其他配置
}

4.2 性能优化方案

前端优化：
- 启用Gzip压缩
- 配置CDN加速
- 实施路由懒加载
后端优化：
- 连接池配置（HikariCP示例）：
```
spring:
datasource:
hikari:
  maximum-pool-size: 20
  connection-timeout: 30000
```
- 缓存策略（Redis集成）

五、运维监控体系

5.1 日志管理方案

Spring Boot日志配置：

# application.properties
logging.file.name=/var/log/springboot/app.log
logging.level.root=INFO

Nginx日志轮转：

# /etc/logrotate.d/nginx
/var/log/nginx/*.log {
 daily
 missingok
 rotate 14
 compress
 delaycompress
 notifempty
 create 0640 www www
 sharedscripts
 postrotate
     [ -f /var/run/nginx.pid ] && kill -USR1 `cat /var/run/nginx.pid`
 endscript
}

5.2 监控告警设置

宝塔监控插件：
- 配置CPU/内存阈值告警
- 设置磁盘空间预警
Prometheus+Grafana方案（进阶）：
- 配置Micrometer暴露指标
- 设置关键业务指标看板

六、常见问题解决方案

6.1 跨域问题处理

后端配置示例：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

6.2 端口冲突解决

检查占用端口：
```
netstat -tulnp | grep :8080
```
修改Spring Boot默认端口：
```
server.port=8081
```

七、持续集成建议

GitLab CI/CD配置示例：
```yaml
stages:
- build
- deploy

frontend_build:
stage: build
image: node:14
script:

- cd frontend
- npm install
- npm run build

artifacts:
paths:

  - frontend/dist

backend_deploy:
stage: deploy
image: maven:3.6-jdk-11
script:

- cd backend
- mvn clean package
- scp target/app.jar root@your-server:/opt/app/

only:

- master

```

Jenkins自动化部署：
- 配置SSH凭据
- 创建Pipeline项目
- 设置构建后操作（重启服务）

八、安全加固措施

服务器安全：
- 禁用root远程登录
- 配置Fail2Ban防暴力破解
- 定期更新系统补丁
应用安全：
- 启用CSRF保护
- 实施JWT鉴权
- 敏感数据加密存储

九、性能测试方案

JMeter测试示例：
- 创建线程组（100用户，5秒启动）
- 添加HTTP请求采样器
- 配置监听器（聚合报告）
压测指标参考：
- 平均响应时间<500ms
- 错误率<0.1%
- 吞吐量达标计算：TPS = 并发数 / 平均响应时间

十、扩展性设计建议

微服务架构演进：
- 服务拆分原则（按业务能力）
- API网关选型（Spring Cloud Gateway）
- 服务注册发现（Nacos/Eureka）
容器化部署方案：
- Dockerfile编写规范
- Kubernetes部署策略
- 服务网格（Istio）实施路径

通过以上完整部署方案，开发者可以系统化地完成从开发环境到生产环境的迁移。建议首次部署后进行全链路压测，根据监控数据持续优化配置参数。对于中大型项目，建议逐步引入CI/CD流水线和容器编排技术，提升运维效率。

发表评论

开发者关注产品榜

最热文章

关于作者

被阅读数
被赞数
被收藏数

活动

咨询

开发者热搜