部署Vue+Java Web应用到云服务器完整指南

宏观上来讲，一个Web网页项目是由三部分组成，前端的页面，后端的服务器，然后就是数据库了。前端通过http网络给后端发请求要数据或者发指令，后端可以根据指令对数据库操作并返回给前端它要的数据。

我们部署的目的就是在云厂商的云服务器上分别让后端，前端，数据库服务器跑起来并且能互相沟通数据，并且前端发起RESTful API请求→后端处理业务逻辑→操作数据库→返回JSON格式数据→前端渲染呈现。这种分层架构既保证了职责分离，又通过标准化接口实现模块化协作。

项目架构概述

前端: Vue.js应用
后端: Java Spring Boot REST API
数据库: MySQL
部署环境: 阿里云云服务器

部署配置信息

服务器地址 : [SERVER_IP]
域名 : [DOMAIN_NAME]
数据库端口：3306
前端端口: 80 (Nginx)
后端端口: 1212
部署目录 :
- 后端jar包: /home/app
- 前端静态文件: /home/web

服务器部署准备

1. 选择操作系统

推荐使用 Ubuntu 20.04 LTS 或 CentOS 8，这个教程是按照centOS操作系统教学的。
确保有足够的存储空间和内存资源

2. 确定IP地址与安全组管理

在云服务商控制台配置安全组规则：
- 开放端口 80 (HTTP)
- 开放端口 1212 (后端API)

3. 选择域名与备案（没有域名也照常拿IP地址访问）

购买并解析域名 [DOMAIN_NAME]
完成ICP备案流程（针对中国大陆服务器）

核心部署步骤

你可以用阿里云的服务器后台，也可以自己找个终端远程连接ssh root@[SERVER_IP],输入服务器密码即可远程登入服务器，对服务器进行操作。

1. 数据库部署

1. 安装MySQL

bash 复制代码

# 更新系统包
sudo yum update -y

# 下载MySQL官方仓库
sudo wget https://dev.mysql.com/get/mysql80-community-release-el8-1.noarch.rpm

# 安装仓库
sudo rpm -ivh mysql80-community-release-el8-1.noarch.rpm

# 安装MySQL服务器
sudo yum install mysql-server -y

2. 启动MySQL服务

bash 复制代码

# 启动MySQL服务
sudo systemctl start mysqld

# 设置开机自启
sudo systemctl enable mysqld

# 检查服务状态
sudo systemctl status mysqld

3. 安全配置

bash 复制代码

# 运行安全配置脚本
sudo mysql_secure_installation

# 系统会提示你进行以下配置：
# 1. 设置root密码
# 2. 删除匿名用户
# 3. 禁止root远程登录
# 4. 删除测试数据库
# 5. 重新加载权限表

4. 创建应用数据库

bash 复制代码

# 获取临时root密码（CentOS 8中MySQL初始密码会随机生成）
sudo grep 'temporary password' /var/log/mysqld.log

# 登录MySQL（使用临时密码）
mysql -u root -p

# 在MySQL命令行中执行以下操作：
# 修改root密码
ALTER USER 'root'@'localhost' IDENTIFIED BY 'YourNewStrongPassword123!';

# 创建应用数据库
CREATE DATABASE finisho_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 创建专用用户（推荐做法）
CREATE USER 'finisho_user'@'localhost' IDENTIFIED BY 'StrongUserPassword123!';
GRANT ALL PRIVILEGES ON finisho_db.* TO 'finisho_user'@'localhost';

# 刷新权限
FLUSH PRIVILEGES;

# 退出MySQL
EXIT;

5. 配置防火墙（如需要）

bash 复制代码

# 开放MySQL默认端口
sudo firewall-cmd --permanent --add-port=3306/tcp
sudo firewall-cmd --reload

6. 验证安装

bash 复制代码

# 测试数据库连接
mysql -u finisho_user -p finisho_db

# 查看数据库列表
SHOW DATABASES;

# 退出
EXIT;

完成以上步骤后，MySQL数据库就成功部署在你的服务器上了，并且开机自启。为了便于对服务器的操作，记住服务器的主机ip地址，mysql端口，用户名和密码你可以使用Navicat等数据库图形化操作软件对数据库进行查看编辑等操作了。

2. 后端部署

首先将你的后端项目打包（可以使用Idea Maven的package工具或者命令行 mvn package）,随后根目录下就会出现target文件夹，cd到target文件夹进行如下操作

bash 复制代码

# 传输jar包到服务器
scp finisho-backend-1.0.0.jar root@[SERVER_IP]:/home/app/

# 登入服务器
ssh root@[SERVER_IP]

# 服务器上运行后端服务
nohup java -jar /home/app/finisho-backend-1.0.0.jar > backend.log 2>&1 &

# 验证服务启动
ps aux | grep java

3. 前端部署

API配置调整

前端API基础URL配置:

javascript 复制代码

// src/api/config.js
const BASE_URL = 'http://[SERVER_IP]:1212/api';  
export default BASE_URL;

bash 复制代码

# 构建生产环境版本
npm run build

# 传输前端文件到服务器
scp -r dist/* root@[SERVER_IP]:/home/web/

4. Nginx反向代理配置

创建 /etc/nginx/sites-available/finisho:

nginx 复制代码

server {
    listen 80;
    server_name [DOMAIN_NAME] www.[DOMAIN_NAME];
    
    # 前端静态文件服务
    location / {
        root /home/web;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # API请求代理到后端Java服务
    location /api/ {
        proxy_pass http://127.0.0.1:1212/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 日志配置
    access_log /var/log/nginx/finisho_access.log;
    error_log /var/log/nginx/finisho_error.log;
}

启用配置：

bash 复制代码

# 创建软链接
sudo ln -s /etc/nginx/sites-available/finisho /etc/nginx/sites-enabled/

# 测试并重载Nginx
sudo nginx -t
sudo systemctl reload nginx

至此，随便一台设备打开浏览器，访问你的IP地址或者网站域名，你就可以看到你的前端界面，操作一下，如果没有404，说明后端也没有问题，恭喜你，你的应用上线了。