ubuntu服务器部署vue springboot前后端分离项目

上传构建好的vue前端文件

vscode构建vue项目,会生成dist目录

bash 复制代码
npm run build

在服务器root目录新建/projects/www目录,把dist目录下的所有文件,上传到此目录中

上传ssl证书

上传ssl证书到/projects目录中

配置nginx

编辑 /etc/nginx/sites-enabled/default 配置文件

1.此配置通过http和https访问
bash 复制代码
server {
# http
    listen 80 default_server;
    listen [::]:80 default_server;

# https
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
       
# SSL Settings
    ssl_certificate /projects/bdjw.work_bundle.pem;#你的证书
    ssl_certificate_key /projects/bdjw.work.key;#你的key
    
# 域名    
    server_name bdjw.work www.bdjw.work; # 配置域名 
    
# 代理    
    location / {
      root /projects/www; # 前端代码文件位置
      index index.html;
      try_files $uri $uri/ /index.html; # 解决vue刷新404的问题
    }

    location /api/ {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
      add_header 'Cache-Control' 'no-cache';

      if ($request_method = 'OPTIONS') {
        return 200;
      }
       proxy_pass http://127.0.0.1:8080/; # 反向代理
    }
}
2.此配置http自动跳转到https
bash 复制代码
server {
# https
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
    server_name bdjw.work www.bdjw.work; # 配置域名

# SSL Settings
    ssl_certificate /projects/bdjw.work_bundle.pem;#你的证书
    ssl_certificate_key /projects/bdjw.work.key;#你的key

    location / {
      root /projects/www; # 前端代码文件位置
      index index.html;
      try_files $uri $uri/ /index.html; # 解决vue刷新404的问题
    }

    location /api/ {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
      add_header 'Cache-Control' 'no-cache';

      if ($request_method = 'OPTIONS') {
        return 200;
      }
       proxy_pass http://127.0.0.1:8080/; # 反向代理
    }
}


# HTTP请求自动跳转HTTPS
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name bdjw.work www.bdjw.work; # 配置域名
    return  301 https://$server_name$request_uri; # 把HTTP的域名请求转成HTTPS
}
部署springboot项目

部署springboot项目

跨域问题

使用nginx反向代理解决跨域问题,就不需要springboot再做跨域设置,两种方式同时使用会有冲突。

相关推荐
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
勤奋的凯尔森同学1 小时前
webmin配置终端显示样式,模仿UbuntuDesktop终端
linux·运维·服务器·ubuntu·webmin
月光水岸New2 小时前
Ubuntu 中建的mysql数据库使用Navicat for MySQL连接不上
数据库·mysql·ubuntu
莫忘初心丶2 小时前
在 Ubuntu 22 上使用 Gunicorn 启动 Flask 应用程序
python·ubuntu·flask·gunicorn
丁卯4042 小时前
Go语言中使用viper绑定结构体和yaml文件信息时,标签的使用
服务器·后端·golang
chengooooooo2 小时前
苍穹外卖day8 地址上传 用户下单 订单支付
java·服务器·数据库
晴空万里藏片云3 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
人间打气筒(Ada)4 小时前
MySQL主从架构
服务器·数据库·mysql
落笔画忧愁e5 小时前
FastGPT快速将消息发送至飞书
服务器·数据库·飞书
小冷爱学习!5 小时前
华为动态路由-OSPF-完全末梢区域
服务器·网络·华为