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

上传构建好的vue前端文件

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

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

上传ssl证书

上传ssl证书到/projects目录中

配置nginx

编辑配置文件

/etc/nginx/nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	types_hash_max_size 2048;

	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##

	##
	# Logging Settings # 设置服务器访问和错误日志  
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

        keepalive_timeout  65;


	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
#
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

/etc/nginx/sites-enabled/default

# HTTP请求自动跳转HTTPS
server {
    listen 80;
    server_name bdjw.work www.bdjw.work; # 配置域名
  # 将所有HTTP请求重定向到HTTPS 
    return  301 https://$server_name$request_uri;
}


server {
    listen 443 ssl;
    server_name bdjw.work www.bdjw.work; # 配置域名


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

    # SSL会话缓存  
    ssl_session_cache shared:SSL:1m;  
    ssl_session_timeout  5m; 

    # SSL Settings协议配置
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH'; 

    location / {
      # 指定网站文件的根目录
      root /projects/www;
      # root /projects/html;
      # 指定当访问域名根目录时要显示的文件 
      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,token';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
      add_header 'Cache-Control' 'no-cache';
      if ($request_method = 'OPTIONS') {
       return 200;
      }
      
      # 将所有请求代理到 http://localhost:3000  
      proxy_pass http://127.0.0.1:8080/; # 反向代理
    }
}

重启nginx

sudo nginx -s reload

部署springboot项目

部署springboot项目

跨域问题

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