如何利用宝塔部署前后端分离项目（vue+springboot (保姆级教学)

如何利用宝塔部署前后端分离项目（vue+springboot）

一、前后端项目进行打包

注意事项

• 后端跨域代码配置：

  package com.quanxiaoha.weblog.web.config;
  
  import org.springframework.context.annotation.Bean;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.cors.CorsConfiguration;
  import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  import org.springframework.web.filter.CorsFilter;
  import org.springframework.web.servlet.config.annotation.CorsRegistry;
  import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  
  /**
   * @author: hhn
   * @url: www.quanxiaoha.com
   * @date: 2024-05-30 9:08
   * @description: 跨域访问配置
   **/
  @Configuration
  public class CrosConfig implements WebMvcConfigurer {
  
      public class CorsConfig {
          @Bean
          public CorsFilter corsFilter() {
              //1.添加CORS配置信息
              CorsConfiguration config = new CorsConfiguration();
              //1) 允许的域,不要写*，否则cookie就无法使用了
              config.addAllowedOrigin("http://114.132.87.233:5101"); //这里填写请求的前端服务器
              //2) 是否发送Cookie信息
              config.setAllowCredentials(true);
              //3) 允许的请求方式
              config.addAllowedMethod("OPTIONS");
              config.addAllowedMethod("HEAD");
              config.addAllowedMethod("GET");
              config.addAllowedMethod("PUT");
              config.addAllowedMethod("POST");
              config.addAllowedMethod("DELETE");
              config.addAllowedMethod("PATCH");
              // 4）允许的头信息
              config.addAllowedHeader("*");
  
              //2.添加映射路径，我们拦截一切请求
              UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
              configSource.registerCorsConfiguration("/**", config);
  
              //3.返回新的CorsFilter.
              return new CorsFilter(configSource);
          }
      }
  }
  
  

  

二、将前后端打的包上传到宝塔

三、后端项目部署

1. 进入宝塔的网站页面，选择Java项目，然后进行配置

   

2.进行nginx代理配置

通过宝塔面板进入到nginx配置

注意事项

nginx配置代码

#-------------------------------------------------------------------
server {
    listen 5101; #这是配置的前端访问端口 
    server_name 114.132.87.233; 服务器IP

    location / {
        root /www/wwwroot/app/web-blog/dist; ###配置应用的文件夹（这里是根文件）
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    ###代理后端API的配置
    location /api/ {
        proxy_pass http://114.132.87.233:5402/; ###z这里就填写我后端的url地址路径
    }
  }

#-------------------------------------------------------------------

四、项目访问