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再做跨域设置,两种方式同时使用会有冲突。

相关推荐
啊吧怪不啊吧4 分钟前
SQL之表的增删
服务器·数据库·sql·1024程序员节
gfdgd xi19 分钟前
Wine运行器3.4.0——虚拟机安装工具支持设置UEFI启动
android·windows·python·ubuntu·架构
zhaotiannuo_199833 分钟前
【Linux kali 更换yum源】
linux·运维·服务器
草莓熊Lotso44 分钟前
模板进阶:从非类型参数到分离编译,吃透 C++ 泛型编程的核心逻辑
linux·服务器·开发语言·c++·人工智能·笔记·后端
ybb7046304 小时前
linux第二次作业
linux·运维·服务器
大白同学4215 小时前
【Linux】进程间通信
linux·运维·服务器
无聊的小坏坏8 小时前
从零开始:C++ 多线程 TCP 服务器实战(续篇)
服务器·c++·tcp/ip
利刃大大8 小时前
【高并发服务器】十、Connection连接管理模块设计与实现
服务器·c++·高并发·项目
JIngJaneIL8 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟10 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js