《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

二、服务器基础环境安装

推荐系统：

bash 复制代码

Ubuntu 22.04

三、连接服务器

Windows：

推荐工具：

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

Mac/Linux：

bash 复制代码

ssh root@服务器IP

四、Linux 基础命令

bash 复制代码

pwd
ls
cd
mkdir
rm -rf
cp
mv
vim

五、安装 Nginx

官网：

https://nginx.org/

安装：

bash 复制代码

sudo apt update
sudo apt install nginx -y

启动：

bash 复制代码

systemctl start nginx

开机启动：

bash 复制代码

systemctl enable nginx

查看状态：

bash 复制代码

systemctl status nginx

浏览器访问：

bash 复制代码

http://服务器IP

六、部署 Vue + Java 项目

架构：

text 复制代码

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

七、Vue 项目部署

1. 打包项目

bash 复制代码

npm run build

生成：

text 复制代码

dist/

2. 上传 dist

上传到：

bash 复制代码

/var/www/vue-project

3. 配置 Nginx

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. 打包

bash 复制代码

mvn clean package

2. 上传 jar

bash 复制代码

/opt/project/app.jar

3. 安装 Java

bash 复制代码

apt install openjdk-17-jdk -y

查看版本：

bash 复制代码

java -version

启动：

bash 复制代码

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

查看日志：

bash 复制代码

tail -f app.log

九、React + Java 部署

React 和 Vue 部署方式类似。

1. 打包 React

bash 复制代码

npm run build

生成：

text 复制代码

build/

2. Nginx 配置

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

bash 复制代码

apt install php php-fpm php-mysql -y

查看：

bash 复制代码

php -v

配置 Nginx + PHP

nginx 复制代码

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/

安装：

bash 复制代码

apt install mysql-server -y

启动：

bash 复制代码

systemctl start mysql

bash 复制代码

mysql -u root -p

创建数据库：

sql 复制代码

CREATE DATABASE test;

十二、域名解析

购买域名：

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

解析：

text 复制代码

A记录 → 服务器IP

十三、HTTPS 配置

十四、常见问题

1. 页面刷新 404

nginx 复制代码

try_files $uri /index.html;

2. 跨域问题

后端：

java 复制代码

@CrossOrigin

3. 502 错误

原因：

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

十五、企业级推荐架构

text 复制代码

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/

十七、推荐学习路线

text 复制代码

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