【前端&后端部署】将前后端项目部署到云服务器-EW帮帮网

现在AI太强大，开发个人产品的门槛和成本太低了，只要你有好的想法都可以很快速的开发一款产品

1. 获得服务器

服务器最重要的就是稳定还有便宜；

这里推荐雨云，便宜且稳定。我们公司生产环境一直用的也是雨云；
【专属优惠链接，新用户更便宜】https://www.rainyun.com/NjQ0NjI5_

优惠专享链接：雨云 - 新一代云服务提供商
输入优惠码【NjQ0NjI5】再减15%

2.连接到云服务器

使用连接工具连接即可

3.配置环境

3.1.Java（运行后端所需）

安装 OpenJDK （以 JDK8 为例）

sudo yum install java-1.8.0-openjdk -y

验证 Java 安装

java -version

如果显示 Java 版本信息，则安装成功

3.2.MySQL数据库

安装 MySQL

sudo yum install mysql-server -y

启动 MySQL

sudo systemctl start mysqld

配置安全选项

sudo mysql_secure_installation

mysql -u root -p

3.3.Nginx（前端访问后端需要）

安装 Nginx

sudo yum install nginx -y

启动并检查 Nginx 服务

sudo systemctl start nginx  #启动 Nginx
sudo systemctl enable nginx #设置自启动
nginx -v  #查看版本

3.4. Nodejs（构建前端所需）

安装 Node.js


curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

验证安装

node -v
npm -v

4.打包项目

4.1.打包后端项目

mvn clean package

jar 包在 target 目录下

4.2.打包前端项目

npm run build:prod

Vite 默认会将打包后的静态资源生成在 dist 文件夹中

5.上传项目到服务器

5.1.上传后端项目

将 .jar 文件上传到服务器

假设 .jar 文件路径为 target/employment.jar，服务器目标路径为 /opt/employment/：

scp target/employment.jar user@your-server-ip:/opt/employment/

将 user 替换为你的服务器用户名，your-server-ip 替换为服务器 IP 地址。

确保 .jar 文件已经成功上传到目标路径 /opt/employment/

5.2.上传前端项目

将前端打包后的 dist 目录上传到服务器上：

scp -r dist user@your-server-ip:/var/www/html/

此命令会将前端项目的静态资源上传到服务器的 /var/www/html/ 目录，这个目录是 Nginx 的默认访问根目录

6.配置后端服务

6.1.启动后端应用

在服务器上进入后端 .jar 文件所在目录：

cd /opt/employment/

启动后端应用：

java -jar employment.jar

后端服务会启动并监听相应的端口，默认情况下是 8080。可以根据需要修改端口

配置后端服务开机自启动（使用 systemd）：

创建一个新的 systemd 服务文件 /etc/systemd/system/employment.service，内容如下：

[Unit]
Description=Employment System Backend
After=network.target
 
[Service]
User=root
ExecStart=/usr/bin/java -jar /opt/employment/employment.jar
SuccessExitStatus=143
TimeoutStopSec=10
Restart=always
 
[Install]
WantedBy=multi-user.target

6.2.配置防火墙

确保服务器的防火墙允许访问所需端口（如 8080 端口）：


sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent
sudo firewall-cmd --reload

7.配置 Nginx 反向代理

7.1.编辑 Nginx 配置

打开 Nginx 配置文件：

sudo vim /etc/nginx/nginx.conf

添加反向代理配置，将请求转发到后端 Java 应用。假设后端应用运行在 8080 端口，配置如下：

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或 IP
 
    location / {
        root /var/www/html;   # 指向前端项目所在目录
        index index.html;
    }
 
    location /api/ {
        proxy_pass http://localhost:8080;  # 将 /api 请求转发到后端服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

保存并退出后，检查 Nginx 配置是否正确：

sudo nginx -t

重新加载 Nginx 配置使更改生效：

sudo systemctl reload nginx

8.访问应用

在浏览器中访问你的服务器 IP 或域名，前端页面应该能够正常加载
后端 API 请求（如 /api/）会通过 Nginx 反向代理转发到后端应用

【前端&后端部署】将前后端项目部署到云服务器