当前位置：首页 > news >正文

vue+springboot项目部署到服务器

news 2025/10/5 5:24:53

vue+springboot项目部署到服务器

一、安装nginx

sudo yum install epel-release -y

sudo yum install nginx -y

启动并设置开机自启：

sudo systemctl start nginx

sudo systemctl enable nginx

二、vue打包与上传

到vue项目的genb根目录下打包项目：

npm run build

打包完成后会出现dist 文件夹。

用终端连接我们租的云服务器，将dist上传到服务器，

将dist文件夹移动到/usr/share/nginx/html/ 下

三、配置 Nginx

配置文件路径一般是：

/etc/nginx/nginx.conf

修改文件

vi /etc/nginx/nginx.conf

  server {listen       80;listen       [::]:80;server_name  你云服务器的公网IP;root         /usr/share/nginx/html/dist;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}

但是，一般来说我们在开发环境下会进行跨域处理，url会加上一个/api 然后用vue的vue.config.js文件中处理，但是nginx不会发现处理vue.config.js文件，这里就需要用到他的反向代理：

server {listen       80;listen       [::]:80;server_name  你的云服务器的ip;root   /usr/share/nginx/html/dist;index  index.html;location / {try_files $uri $uri/ /index.html;}location ^~ /api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass https://127.0.0.1:9000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}error_page 404 /404.html;location = /404.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}

保存并退出，

检查配置是否正确：

sudo nginx -t

重启 Nginx：

sudo systemctl restart nginx

注意，如果你是部署在云服务器上，一定要开放80端口（nginx的默认端口）。

这里引用阿里云官方的教程：

“

1、登录到ECS云服务器管理控制台

2、左侧栏找到【实例与镜像】>>【实例】，找到目标ECS实例，点击实例ID进入到实例详情页

3、切换到【安全组】页面，点击右侧【配置规则】，如下图：

4、在入方向点击【手动添加】，端口范围选择【HTTP(80)】，授权对象选择【0.0.0.0/0】，如下图：

授权策略：允许
优先级：1
协议类型：自定义TCP
端口范围目的：HTTP(80)，系统预置了22、23、80、443、3306、3389等端口号，选择80，也可以手动输入80
授权对象源：0.0.0.0/0，代表所有IPv4地址，意思是将80端口开放给所有的IPv4地址使用
可以使用阿里云测速工具 aliyunping.com 测试一下本地到阿里云服务器各个地域节点的Ping值网络延迟。
描述：随便填，自己知道就行

详细参考：https://help.aliyun.com/document_detail/25471.html

然后点【保存】即可，不需要重启云服务器，安全组规则保存后立即生效，至此云服务器ECS的80端口就已经开通了。

”

最后，在浏览器输入网址http://你的服务器IP 如果部署成功，就会访问到你vue项目的index页面。。

四、在idea打包java项目

在maven中点击package打包，跑完后会在项目的target文件夹下生成jar包：