上传构建好的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项目
跨域问题
使用nginx反向代理解决跨域问题,就不需要springboot再做跨域设置,两种方式同时使用会有冲突。