《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/

推荐配置：

类型	推荐
系统	Ubuntu 22.04
CPU	2核
内存	4GB
磁盘	40GB SSD
带宽	5M

---

二、服务器基础环境安装

推荐系统：

Ubuntu 22.04

---

三、连接服务器

Windows：

推荐工具：

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

Mac/Linux：

ssh root@服务器IP

---

四、Linux 基础命令

pwd
ls
cd
mkdir
rm -rf
cp
mv
vim

---

五、安装 Nginx

官网：

https://nginx.org/

安装：

sudo apt update
sudo apt install nginx -y

启动：

systemctl start nginx

开机启动：

systemctl enable nginx

查看状态：

systemctl status nginx

浏览器访问：

http://服务器IP

---

六、部署 Vue + Java 项目

架构：

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

---

七、Vue 项目部署

1. 打包项目

npm run 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

apt install openjdk-17-jdk -y

查看版本：

java -version

启动：

nohup java -jar app.jar > app.log 2>&1 &

查看日志：

tail -f app.log

---

九、React + Java 部署

React 和 Vue 部署方式类似。

1. 打包 React

npm run 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

apt install php 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/

安装：

apt install mysql-server -y

启动：

systemctl start mysql

登录：

mysql -u root -p

创建数据库：

CREATE DATABASE test;

---

十二、域名解析

购买域名：

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

解析：

A记录 → 服务器IP

---

十三、HTTPS 配置

推荐：

Let's Encrypt

官网：

https://certbot.eff.org/

安装：

apt install certbot 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