前后端分离项目（Vue + Java）云服务器部署

前后端分离项目Vue Java云服务器部署完整版文档文档说明本文档适用于前端Vue2 / Vue3项目后端SpringBoot项目服务器Linux 云服务器CentOS7 / CentOS8 / Ubuntu部署方式Docker Nginx最稳定、最常用线上方案目标一键部署、外网可访问、支持域名访问一、部署前准备1. 服务器要求系统LinuxCentOS 7.8 推荐配置2 核 2G 起步已开放端口80前端443HTTPS8080~8090后端 Java8848Nacos如果你用3306MySQL6379Redis2. 本地准备Vue 前端代码SpringBoot 后端代码服务器公网 IPXshell / FinalShell连接服务器工具二、服务器环境安装Docker 一键安装所有环境通过Docker安装避免环境冲突1. 安装 Dockerbashyum install -y yum-utils yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo yum install -y docker-ce docker-ce-cli containerd.io启动 Dockerbashsystemctl start docker systemctl enable docker2. 配置 Docker 国内镜像加速bashsudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json -EOF { registry-mirrors: [ https://docker.mirrors.ustc.edu.cn, https://mirror.baidubce.com ] } EOF重启 Dockerbashsudo systemctl daemon-reload sudo systemctl restart docker三、后端 SpringBoot 项目部署步骤 1本地打包后端Maven 命令plaintextclean package -Dmaven.test.skiptrue得到xxx.jar步骤 2上传 jar 到服务器上传路径/root/server/步骤 3创建 Dockerfile在/root/server/下创建DockerfiledockerfileFROM openjdk:11-jre-slim WORKDIR /app COPY *.jar app.jar ENTRYPOINT [java,-jar,app.jar]步骤 4构建镜像bashdocker build -t backend:latest .步骤 5启动后端容器bashdocker run -d \ --name backend \ -p 8080:8080 \ --restart always \ backend:latest步骤 6测试后端是否启动bashdocker logs -f backend看到Started Application说明成功。四、前端 Vue 项目部署步骤 1本地打包前端bashnpm run build得到dist文件夹步骤 2上传 dist 到服务器上传路径/root/nginx/html/步骤 3使用 Nginx 部署前端启动 Nginxbashdocker run -d \ --name nginx \ -p 80:80 \ -v /root/nginx/html:/usr/share/nginx/html \ -v /root/nginx/conf:/etc/nginx/conf.d \ --restart always \ nginx创建 Nginx 配置文件/root/nginx/conf/default.confnginxserver { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; # 前端路由模式 location / { try_files $uri $uri/ /index.html; } # 代理后端接口 location /api/ { proxy_pass http://服务器IP:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }重启 Nginxbashdocker restart nginx五、MySQL / Redis 中间件部署MySQLbashdocker run -d \ --name mysql \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -v /root/mysql:/var/lib/mysql \ --restart always \ mysql:5.7Redisbashdocker run -d \ --name redis \ -p 6379:6379 \ --restart always \ redis六、最终访问方式前端plaintexthttp://你的服务器IP后端接口plaintexthttp://你的服务器IP:8080前端通过 /api 调用后端plaintexthttp://你的服务器IP/api/user/login七、部署常见问题必看1. 前端页面空白原因Nginx 没指向 dist解决检查-v /root/nginx/html:/usr/share/nginx/html2. 前端无法访问后端原因后端没启动防火墙没开 8080Nginx 代理路径错误3. 后端连不上 MySQL解决IP 填写服务器公网 IP防火墙开放 33064. 跨域问题解决必须用 Nginx 代理 /api不要前端直接访问后端八、一键部署脚本可选你可以创建deploy.sh实现一键更新bashdocker stop backend docker rm backend docker build -t backend . docker run -d --name backend -p 8080:8080 backend九、总结最简单记忆版后端打 jar 包 → Docker 运行前端打包 dist → Nginx 运行Nginx 配置 /api 代理后端外网访问 IP 即可打开项目所有环境用 Docker永不翻车