前言

如果从没进行过将自己的个人项目部署到服务器的话，想要能够部署项目成功并且让别人访问到自己的项目还是比较难的。再加上我查找搜索别人的教程，要么就是互相复制抄步骤，要么就是不全，或者部署过程不明确，让人很难懂如何去做，以及需要注意什么，那么本着简单教学的原则，本次依旧将我从购买服务器到将项目部署成功的步骤一步步发出来。

本次教学，只需要服务器和自己的项目即可，不需要域名
且部署的项目为vue+springboot项目

另外我给大家提供一个我部署成功的项目
个人项目

题外话，这个项目后端为我制作，前端为另一个人，我教的对方，目前还未开发完成

需要注意的是，我是从2023-02-17购买的服务器，买了3个月，看情况续期吧，如果过了时间访问不了，那么我肯定是没有续期
在这里插入图片描述

部署前准备

想要成功的部署自己的项目，你需要准备做这几个相关准备。
注意，当你需要进行部署服务器，那么你肯定是已经是会vue或者springboot项目，
你的项目是能够正常运行的，以下不会教你怎么制作vue和springboot，但是会在打包配置上进行详情说明

服务器

第一步，肯定要有一个服务器的，一般情况在阿里云和腾讯云进行购买服务器，如果你是学生，或者新人甚至能以很便宜的价格就能买到一年甚至两三年的服务器。
以下为腾讯云购买服务器地址
腾讯云
以下为阿里云购买服务器地址
阿里云

以阿里云为例，我购买的是云服务器 ECS,
在这里插入图片描述

找到想购买的云服务器点击立即购买即可
购买完成后，在首页的控制台能够找到自己购买的服务器

在这里插入图片描述

找到资源管理的实例
在这里插入图片描述

至于相关的配置，我后面的篇幅会讲到，这边就只教大家如何进行购买

有一个很重要的点:不管是阿里云还是腾讯云，购买后的服务器，都能在控制台找到

其实能够购买服务器的地方不止这两个，但是一般找知名大企业会更有保障。

vue项目

除了服务器，那么也需要一个开发完成的vue前端项目，其实开发未完成也行，只要能够项目不出错，以及能够正常打包就可以。不过一般走到部署服务器这一步大概率也是完成了自己的前端项目

springboot项目

springboot项目同vue项目一样需要开发完成，并且能够打包jar包以及打包后能够正常的运行，后续步骤会讲打包配置

宝塔

安装宝塔，是在你购买服务器之后。
当你购买服务器后，（本次依旧以阿里云ecs云服务器为例）
可以通过控制台–>实例界面的远程连接进行连接服务器
在这里插入图片描述

假如你是第一次登录，可以点击重置密码

登录之后的界面为这样
在这里插入图片描述

让人感觉无从下手，因为它就是一个linux服务器，需要什么执行对应的命令行进行操作服务器。

于是这个情况下就轮到我们的宝塔出场了。
首先，我们百度搜索宝塔，进入官网为这样的界面，点击立即免费安装即可
在这里插入图片描述
然后它会跳转到安装的地方

因为我们是linux服务器，所以可以点击linux面板的在线安装

在这里插入图片描述
在此处服务器你购买的公网服务器ip和密码就会执行安装命令。
等待安装完成之后，会弹窗给你

1.登录宝塔的链接: 一般为你的服务器公网ip+8888端口+随机后缀码
2.登录宝塔账号:注意记录下来
3.登录宝塔密码:注意记录下来

需要注意的是登录宝塔的链接后缀可以在登录宝塔之后在设置进行修改

但是，到这一步你是没有办法访问登录宝塔的界面的，因为你的服务器这个时候还没开放安全策略
我们往后继续讲服务器相关配置和概念

服务器相关配置及概念

首先我们需要明确一个概念:

想把项目部署到服务器，就需要把对应的启动项目的端口对外开放
并且只有通过公网ip才能进行部署访问

前面我们发现，它宝塔默认部署在8888端口上，但是我们服务器默认是不开放8888端口的。
所以是需要我们在服务器控制台里的安全组进行设置调整

在这里插入图片描述

右边操作有一个配置规则
点击之后跳转页面如下:

在这里插入图片描述

它有一个入方向和出方向
都要进行开放
点击手动添加

在这里插入图片描述

目的端口：设置想开放的端口
源:统一选择:0.0.0.0/0

最后点击保存即可

当添加完需要开放的端口后，需要重启服务器进行生效
当添加完需要开放的端口后，需要重启服务器进行生效
当添加完需要开放的端口后，需要重启服务器进行生效
包括后续的部署服务器需要开放的端口也是需要做重启操作
在这里插入图片描述

宝塔界面和部署准备

当我们输入账号密码登录之后，你会看到如下的宝塔界面
在这里插入图片描述
为了能够部署起来vue+springboot项目，你最少需要添加如下应用

jdk:部署springboot的环境
mysql:后端访问的数据库

为了更方便简单的部署我们的项目推荐在软件商店进行下载
在这里插入图片描述
搜索java

选择 java项目一键部署进行安装

至于mysql数据库的话，直接点击数据库初始是没有的，它会提示你进行安装
假如没有提示安装数据库，在软件商店搜索mysql安装即可

在这里插入图片描述

安装之后点击添加数据库

在这里插入图片描述

注意新建的数据库用户名不能为root，密码自定义即可,其他配置默认

就会出现如上的界面
然后点击导入
在这里插入图片描述

将导出的sql文件导入到该创建的数据库进行新增表

在这里插入图片描述
新增完成之后，点击右边的权限

修改为所有人

到这个时候你的服务器数据库就已经创建完成，但是依旧不能访问
原因在于你没有开放端口,mysql默认启动在端口3306,你需要在服务器的界面进行开放对应3306端口
并且,宝塔的端口也需要进行开放才可以访问
注意: 开放服务器的端口一定不要忘记重启，不然可能导致开放端口未生效访问不了

点击安全–>添加端口规则
在这里插入图片描述

输入需要开放的端口进行访问保存就可以了

在这里插入图片描述

ok之后你就可以使用数据库工具，如navicat进行访问数据库

但是这个时候，你会发现访问数据库响应的特别慢

你需要在监控功能栏把监控打开

在这里插入图片描述

vue部署

终于到我们的项目部署了

在开始之前需要确定我们的前后端开放哪些端口
在服务器和宝塔都要开放端口
开放完记得重启服务器，以下不会讲如何开放端口了，上面已经讲的很清楚了

首先看看我的vue项目结构
在这里插入图片描述

我的这个项目是使用的webpack进行构建的，所以不是使用vue.config.js进行配置
当然我两种配置方式都会讲解出来配置的方法

webpack构建的vue配置方式

我有对axios进行封装为js，代码如下:

import axios from 'axios'// 创建axios实例
const service = axios.create({// baseURL: 'http://192.168.0.198:9000', // api的base_Url//baseURL: 'http://localhost:9000', // 本机// baseURL: 'http://127.0.0.1:9000', // 本机baseURL: 'http://47.92.53.108:9000', // 部署到服务器放开本代码，请求路径为服务器公网ip+后端启动端口timeout: 50000 // 请求超时时间
})// 请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 响应拦截器
axios.interceptors.response.use(function (config) {// 对响应数据做点什么return config},function (error) {// 对响应错误做点什么return Promise.reject(error)}
)
// 暴露方法，暴露之后vue才能检测到
export default service

以上，我如果需要部署到我的服务器，应该把基础路径进行设置为

http://服务器公网ip+后端启动端口
如上面的http://47.92.53.108:9000

然后webpack有config配置文件
在这里插入图片描述
打开index.js，代码如下:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',// assetsPublicPath: '/',proxyTable: {},// Various Dev Server settingshost: 'localhost', // can be overwritten by process.env.HOST// 本机开放port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined// 服务器开放// port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: 'cheap-module-eval-source-map',// If you have problems debugging vue-files in devtools,// set this to false - it *may* help// https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting: true,cssSourceMap: true},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',//assetsPublicPath: '/',// 打包部署到服务器放开本代码，在服务器上将static文件夹放到shop文件夹下，index.html和shop文件夹齐平assetsPublicPath: '/shop/',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#source-map',// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}
}

以上我们需要看两个位置
一个是port：你设置上面什么端口，你对应在宝塔和服务器需要开放什么端口
一个是build下的assetsPublicPath,你最好是指定一个路由作为文件路径
如我写的是shop

然后使用命令行npm run build执行打包命令
打包之后的文件为:
在这里插入图片描述
即index.html文件和static资源文件夹

在宝塔上，点击文件,任意创建或者选择一个文件夹作为前端部署的位置

在这里插入图片描述

以上我在根路径下的www/wwwroot/下进行创建了一个http文件夹
然后在该文件夹放入index.html文件
在该文件夹下新建了一个shop文件夹,该文件夹名称跟着你前端vue配置的名称来
在shop文件放入static文件夹

ps：选择部署前端的文件夹路径可和我不同

在这里插入图片描述

然后点击宝塔的网站功能栏,选择PHP项目

在这里插入图片描述
点击添加站点

点击创建站点后会出现如上图
域名:填写你服务器公网ip
根目录:选择刚刚创建的http文件夹
其他配置不变
点击提交即可

vue.config.js进行配置vue方式

接下来讲一下使用vue.config.js进行打包的配置
基本上部署的步骤都是一样的，区别就在于项目配置而已
以我的另一个为例。我的另一个项目是使用的vue.config.js进行配置的。

这个情况下，只要你是有开放端口，你的项目就已经可以通过公网ip访问到你的项目了。
我的另一个项目截图
在这里插入图片描述

其中，我的axios一样做了封装，代码如下:

import axios from 'axios'// 创建axios实例
const service = axios.create({baseURL: '/HtSchoolEnd', // api的base_Url----打包时候使用timeout: 50000 // 请求超时时间
})// 请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 响应拦截器
axios.interceptors.response.use(function (config) {// 对响应数据做点什么return config},function (error) {// 对响应错误做点什么return Promise.reject(error)}
)export default service

在上面的代码，只需要看baseURL
该值需要配置为后端路由路径

即后端yml配置代码为:
如下:

server:port: 9031servlet:context-path: /HtSchoolEnd

vue.config.js配置代码如下:

module.exports = {// 打包时启用publicPath: './',lintOnSave: false,devServer: {disableHostCheck: true,open: true,port: 9019,proxy: {'^/': {ws: false,target: 'http://47.92.53.108:9031/HtSchoolEnd',changeOrigin: true,secure: false,pathRewrite: {'^/': '/'}}}},
};

即publicPath值设置为./
target值设置为公网ip+后端启动端口+后端启动路由
同样不要忘记，前端端口需要进行开放

打包之后为:
在这里插入图片描述
即

css文件夹、fonts文件夹、js文件夹和index.html齐平
在宝塔的文件功能栏，任意找一个文件夹部署项目
所有文件夹放在同一个文件夹即可
其他步骤和上面相同

springboot项目部署

springboot项目部署很简单，关键在于打包为jar的方式
我的项目是有作xml文件配置的，但是打包后总不能运行，提示找不到对应的配置文件
即我在resources下有建立文件夹mapper，在mapper下有建MysqlDb文件夹专门存我的sql语句文件

打包后怎么也找不到，我就算打包配置加了包含配置文件代码也没有用，
最终用了一个折中的办法，把所有配置文件移动到resources文件夹下，才打包运行成功，
如果有知道的可以告诉我怎么修改配置

打包分为两种方式，
一种是带依赖的打包
一种是不带依赖的打包
我都会提怎么做

我的后端项目结构截图
在这里插入图片描述

带依赖的打包

在pom.xml添加如下代码:

<build>
<!-- 打包依赖组件 --><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><!-- 打包包含配置资源文件--><resources><resource><directory>src/main/java</directory><includes><include>**/*.yml</include><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource><resource><directory>src/main/resources</directory><includes><include>**/*.yml</include><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource></resources>
</build>

以上代码，执行打包命令，会把所有的maven依赖打进jar包

依赖和jar分离打包

在pom.xml添加如下代码:

    <build><!-- 打包后文件名称 --><finalName>shop</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-jar-plugin</artifactId><version>3.1.0</version><configuration><archive><manifest><addClasspath>true</addClasspath><!-- 主入口文件位置 根据自己项目修改--><mainClass>com.hxc.shop.ShopApplication</mainClass><!-- 关联依赖到libs文件夹下 --><classpathPrefix>libs/</classpathPrefix></manifest></archive></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-dependency-plugin</artifactId><version>3.1.0</version><executions><execution><id>copy-dependencies</id><phase>package</phase><goals><goal>copy-dependencies</goal></goals><configuration><!-- 打包到libs文件夹下--><outputDirectory>${project.build.directory}/libs</outputDirectory></configuration></execution></executions></plugin><!--跳过junit--><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>