《Vue + React + Java + PHP 项目部署到服务器完整指南》

前后端项目部署到服务器完整指南（Vue + Java、React + Java、PHP）

一、部署前需要掌握的知识

1. 服务器是什么

服务器本质上是一台长期联网的 Linux 电脑。

常见云服务器：

• 阿里云 ECS：https://www.aliyun.com/product/ecs
• 腾讯云 CVM：https://cloud.tencent.com/product/cvm
• 华为云 ECS：https://www.huaweicloud.com/product/ecs.html
• AWS EC2：https://aws.amazon.com/ec2/

推荐配置：

二、服务器基础环境安装

推荐系统：

Ubuntu22.04

三、连接服务器

Windows：

推荐工具：

• Xshell：https://www.xshell.com/zh/xshell/
• FinalShell：https://www.hostbuf.com/

Mac/Linux：

sshroot@服务器IP

四、Linux 基础命令

pwdlscdmkdirrm-rfcpmvvim

五、安装 Nginx

官网：

https://nginx.org/

安装：

sudoaptupdatesudoaptinstallnginx-y

启动：

systemctl start nginx

开机启动：

systemctlenablenginx

查看状态：

systemctl status nginx

浏览器访问：

http://服务器IP

六、部署 Vue + Java 项目

架构：

Vue（前端） ↓ Nginx ↓ Java SpringBoot ↓ MySQL

七、Vue 项目部署

1. 打包项目

npmrun build

生成：

dist/

2. 上传 dist

上传到：

/var/www/vue-project

3. 配置 Nginx

server { listen 80; server_name 域名; location / { root /var/www/vue-project; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

八、Java SpringBoot 部署

官网：

https://spring.io/projects/spring-boot

1. 打包

mvn clean package

2. 上传 jar

/opt/project/app.jar

3. 安装 Java

aptinstallopenjdk-17-jdk-y

查看版本：

java-version

启动：

nohupjava-jarapp.jar>app.log2>&1&

查看日志：

tail-fapp.log

九、React + Java 部署

React 和 Vue 部署方式类似。

1. 打包 React

npmrun build

生成：

build/

2. Nginx 配置

server { listen 80; server_name 域名; location / { root /var/www/react-project; index index.html; try_files $uri /index.html; } location /api { proxy_pass http://127.0.0.1:8080; } }

十、PHP 项目部署

官网：

• PHP：https://www.php.net/
• Laravel：https://laravel.com/
• ThinkPHP：https://www.thinkphp.cn/

安装 PHP

aptinstallphp php-fpm php-mysql-y

查看：

php-v

配置 Nginx + PHP

server { listen 80; server_name 域名; root /var/www/php-project/public; index index.php index.html; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php8.1-fpm.sock; } }

十一、MySQL 安装

官网：

https://www.mysql.com/

安装：

aptinstallmysql-server-y

启动：

systemctl start mysql

登录：

mysql-uroot-p

创建数据库：

CREATEDATABASEtest;

十二、域名解析

购买域名：

• 阿里云域名：https://wanwang.aliyun.com/
• 腾讯云域名：https://dnspod.cloud.tencent.com/

解析：

A记录 → 服务器IP

十三、HTTPS 配置

推荐：

Let’s Encrypt

官网：

https://certbot.eff.org/

安装：

aptinstallcertbot python3-certbot-nginx-y

生成证书：

certbot--nginx

十四、常见问题

1. 页面刷新 404

try_files $uri /index.html;

2. 跨域问题

后端：

@CrossOrigin

3. 502 错误

原因：

• Java 没启动
• 端口错误
• Nginx 配置错误

十五、企业级推荐架构

CDN ↓ Nginx ↓ Vue/React ↓ SpringBoot ↓ Redis ↓ MySQL

十六、推荐学习资源

• Vue：https://cn.vuejs.org/
• React：https://react.dev/
• Spring：https://spring.io/guides
• Docker：https://www.docker.com/
• Linux：https://www.kernel.org/doc/html/latest/

十七、推荐学习路线

Linux ↓ Nginx ↓ MySQL ↓ Vue/React 打包 ↓ Java/PHP 部署 ↓ Docker ↓ CI/CD ↓ K8S