【保姆级教程】阿里云服务器部署前后端项目，SpringBoot后端+Vue3前端

【保姆级教程】阿里云服务器部署前后端项目，SpringBoot后端+Vue3前端

前置准备

• 系统后端采用SpringBoot框架开发
• 系统前端采用Vue3框架开发。
• 项目部署在阿里云服务器，采用Nginx作为代理服务器
• 利用宝塔面板实现快速部署上线

后端打包上线

• 本地配置修改
  
  若有多个配置文件，则修改为部署上线时的配置文件。若只有一个配置文件，则修改的配置应包括但不限于：

  1、数据库地址、账号、密码
  2、Redis的地址、账号、密码
  3、开发端口号
  …

• Maven打包本地项目
  
  依次使用Maven生命周期的clean和package，进行项目的清理和打包，最终得到打包完成的Jar包
  

• 后端项目上传服务器
  首先将Jar包上传至服务器任意位置，用宝塔面板可实现拖拽式上传文件
  

• 启动项目。

  注意要提前安装好Java环境

  
  

前端打包上线

• 本地修改配置
  打包前同样要先修改配置项，如请求接口地址的baseUrl等信息

• Vue项目打包
  利用build命令，打包vue项目。最后得到dist文件夹
  

• 前端项目上传服务器
  上传到Nginx目录的html文件夹中，如/www/server/nginx/html，接着将dist文件夹整个上传到此处
  

• 启动项目
  在Nginx的配置文件中添加如下代码：

server
    {
        listen [前端访问端口号];
        server_name [服务器访问网址];
        index index.html index.htm index.php;
        # 文件根目录
        root  /www/server/nginx/html/dist;

        #error_page   404   /404.html;
        include enable-php.conf;
        
        # location /api/ {
        #   proxy_pass [转发地址];        
        # }

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
    
include /www/server/panel/vhost/nginx/*.conf;
}

最后重启Nginx服务即可。

如果前后端接口有如/api/xxx的形式，需要另外添加转发配置
location /api/ {
proxy_pass [转发地址];
}

服务器设置

• 数据库内容复制到服务器
• 开放前后端访问端口
• 开放相关应用默认端口，如3306、6379等

总结

至此，项目就完成了服务器的上线部署！可以通过访问Nginx配置中的[服务器访问网址]:[前端访问端口号]进行线上访问！
部署完成还是成就感满满的，快去叫小伙伴访问自己的网站吧！