阿里云部署Vue3+SpringBoot全攻略

最新推荐文章于 2025-12-13 10:13:56 发布

原创最新推荐文章于 2025-12-13 10:13:56 发布 · 298 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#阿里云 #spring boot #云计算 #csdn

环境准备

阿里云服务器需要安装必要的软件环境，包括 Node.js、Java、MySQL 和 Nginx。以下为具体步骤：

Node.js 安装
使用 nvm 管理 Node.js 版本，确保安装 Vue3 所需的 Node 版本（建议 16+）。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install 16

Java 环境
Spring Boot 需要 JDK 8 或更高版本，推荐使用 OpenJDK 11。
```
sudo apt update
sudo apt install openjdk-11-jdk
```

MySQL 安装
安装 MySQL 并配置远程访问权限。

sudo apt install mysql-server
sudo mysql_secure_installation

Nginx 安装
用于反向代理和静态资源托管。
```
sudo apt install nginx
```

前端部署（Vue3）

项目打包
在本地开发环境下，进入 Vue3 项目目录，执行以下命令生成静态文件：

npm run build

打包后的文件默认位于 dist 目录。

上传文件到服务器
使用 scp 或 SFTP 工具将 dist 目录上传到阿里云服务器，例如：

scp -r dist/ root@your-server-ip:/var/www/vue-app

配置 Nginx
修改 Nginx 配置文件，将请求代理到 Vue3 静态资源目录。

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/vue-app;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启 Nginx 生效：

sudo systemctl restart nginx

后端部署（Spring Boot）

项目打包
在本地使用 Maven 或 Gradle 打包 Spring Boot 项目为 JAR 文件：

mvn clean package

生成的 JAR 文件位于 target 目录。

上传并运行 JAR 文件
将 JAR 文件上传到服务器，并通过 nohup 后台运行：

scp target/your-app.jar root@your-server-ip:/opt/spring-app
nohup java -jar /opt/spring-app/your-app.jar --server.port=8080 &

配置 Nginx 反向代理
修改 Nginx 配置，将 API 请求转发到 Spring Boot 服务：

server {
    listen 80;
    server_name api.your-domain.com;
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
    }
}

重启 Nginx：

sudo systemctl restart nginx

数据库配置（MySQL）

创建数据库和用户
登录 MySQL，创建项目所需的数据库和用户：

CREATE DATABASE your_db;
CREATE USER 'your_user'@'%' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON your_db.* TO 'your_user'@'%';
FLUSH PRIVILEGES;

导入数据
将本地数据库导出为 SQL 文件，上传到服务器并导入：

mysqldump -u local_user -p local_db > dump.sql
scp dump.sql root@your-server-ip:/tmp
mysql -u your_user -p your_db < /tmp/dump.sql

配置 Spring Boot 数据库连接
修改 application.properties 或 application.yml 文件，确保数据库连接信息正确：

spring.datasource.url=jdbc:mysql://localhost:3306/your_db
spring.datasource.username=your_user
spring.datasource.password=password

域名与 HTTPS 配置

域名解析
在阿里云控制台将域名解析到服务器公网 IP。
申请 SSL 证书
使用 Let's Encrypt 免费证书或阿里云 SSL 证书服务，配置 Nginx 支持 HTTPS：

server {
    listen 443 ssl;
    server_name your-domain.com;
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    location / {
        root /var/www/vue-app;
        index index.html;
    }
}

HTTP 强制跳转 HTTPS
在 Nginx 配置中添加以下规则：

server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri;
}

常见问题排查

端口占用
使用 netstat -tulnp 检查端口冲突，修改 Spring Boot 或 Nginx 配置。
权限问题
确保 /var/www 和 /opt/spring-app 目录权限正确：
```
sudo chown -R www-data:www-data /var/www
```
日志查看
Spring Boot 日志默认输出到 nohup.out，Nginx 日志位于 /var/log/nginx。