部署毕设项目，让毕业设计变得更加完整

前言

随着毕业季的到来，大学生计算机类答辩临近，这里，我将演示将毕设上传到服务器，助力各位大学生通过答辩。如果你还差一台服务器，我的建议是白嫖，点击查看【部署毕设项目用白嫖的(免费试用)服务器更香】。

注意：我这里演示的部署项目主要为前、后端以及数据库的部署，仅适合部署毕设，个人小项目，其中不涉及到域名、CDN内容分发，Ddos防护等。

部署

首先，你得拥有一部服务器，没有可以点击查看【部署毕设项目用白嫖的(免费试用)服务器更香】。其次这里主要演示采用宝塔面板部署的形式，减少小白的学习命令的成本。

演示的技术栈为Vue +Node。如果你的后端采用的是Java，需要将项目打包成jar包，上传到服务器，并在软件商店下载对应jdk版本。前端用React，也是打包上传，和vue区别不大。

本文可以给不同技术栈项目提供借鉴，所以如果本文对你或者未来有帮助的，可以点赞收藏一下。

准备工作

打开宝塔面板，并绑定宝塔账号后，会弹出推荐安装。按照你的项目技术栈选择，一般使用第一种就可以了。后续需要什么都可以在软件商店进行下载。

至于如何安装宝塔面板，点击查看天翼云弹性云主机远程连接以及手工安装宝塔面板。

数据库部署

首先将数据库转储为SQL文件。结构和数据是会将数据一起保存，仅结构则只会保存表等，数据则不会。

将准备好的SQL文件，导入到宝塔的数据库中，数据库需要再软件商店安装好。点击工具后可以查看导入到数据库的表。

后端部署

配置服务器后端环境，首先查看你本地项目的运行环境，本文以Express为例。
在终端或者CMD(命令提示符)，输入Node.js查看版本。

node -v

在宝塔面板中 网站 -> Node项目 如果没有环境则点击安装，安装完成后等待刷新。

点击Node版本管理器，安装对应Node版本。

点击 文件 并创建后端项目目录，一般在www/wwwroot目录下创建后端项目目录。将本地后端项目去除node_modules压缩好上传(宝塔支持拖拽到文件目录内上传)，上传结束后，开始解压。

接下来我们需要给项目安装依赖，但是node并没有设置为全局，所以为了能够在其他目录下使用npm，我们需要先获取安装的node的路径。

软件商店->node.js版本管理器点击设置->安装好的node点击环境变量->复制路径。

点击终端，添加一个主机信息，添加完成后，在右侧列表会显示刚刚添加的服务器主机IP点击进去，在左侧终端输入命令将node设置为全局可用。

输入以下两条命令，并创建一个指向另一个文件或目录的快捷方式（即将node、npm命令全局设置）。

注意：在服务器上粘贴应该用 ctrl + shift + v

ln -s /www/server/nodejs/v12.18.4/bin/node /usr/bin/node

ln -s /www/server/nodejs/v12.18.4/bin/npm /usr/bin/node

输入node -v以及npm-v 查看是否全局成功。成功后，键入cd 后端项目目录，并开始安装依赖。

cd /www/wwwroot/vue_mall_express/vue2-mall-express

npm install

安装完依赖后，需要修改后端项目文件，比如数据库的配置文件，找到项目内的数据库配置文件，双击编辑内容。

用户名和密码填写在宝塔创建数据库时填写的信息。修改完成后记得保存。

最后开放端口，端口号是在后端项目运行主入口文件(main.js/app.js)内设置的，在服务器上安全组或防火墙开放端口号。例如本文使用的后端端口是8083。

创建node网站，开启后端API服务(网站->Node项目->添加Node项目)

项目目录选择你上传到服务器的目录,项目名称可以随便写，端口号记得勾选放行端口，包管理器就使用你本地的包管理器，本文采用npm。在启动选项中，可以点击选择到你的运行主入口文件，该项目是main.js。

点击启动服务，并在浏览器输入服务器IP地址：域名来访问，查看后端服务是否开启成功。

至此，后端服务就成功部署了。

前端部署

项目打包前，你需要将配置弄好，比如打包路径等。如果你有使用到Proxy代理，需要注释掉。在打包前，你需要将接口api对接好。

打开前端项目，在根目录找到 .env.production文件，修改接口地址。

Vue中的环境变量：
Vue项目中有三个模式，production、development、test
通过根目录创建.env.development（开发模式），.env.production（生产模式）
使用 npm run serve 默认使用.env.development（即本地时会使用这个）
使用 npm run bulid 默认使用.env.production（即线上时会使用这个）
vue可以通过process.env.xxx 访问到模式下xxx 例如：process.env.VUE_APP_BASE_API

# 生产环境  .env.production文件
ENV = 'production'
VUE_APP_BASE_API="http://111.111.11.111:8083"

准备工作结束后，在终端输入，输入打包命令生成dist文件夹。

npm run build

使用宝塔面板创建站点，点击网站根目录可以进入网站跟目录，把里面的文件全部删除后，将生成好的dist文件夹上传到站点。

添加站点的时候，域名处如果添加了端口号，需要再服务器的安全组或者防火墙处添加规则，如同部署后端项目时开放端口一样。如果没有端口号则默认是80端口。

知识点：http默认端口号是80，https默认端口号是443。

点击网站设置->网站目录。设置网站目录和运行目录。

接下来在浏览器访问IP地址：域名，查看网站是否部署成功。

需要设置伪静态，防止除首页外的页面刷新后变白屏。解决方法在下方遇到问题处。

遇到问题

问题：宝塔部署vue项目刷新跳404

找到相应项目的nginx配置文件,然后在配置中添加 try_files $uri $uri/ /index.html; (可以解决vue或react框架的history路由模式报404或500问题)

try_files $uri $uri/ /index.html;

或者设置伪静态

if (!-e $request_filename) {
    rewrite ^/(.*) /index.html last;
    break;
}

问题：图片不显示(多数在图片使用相对路径出现)

方法一：通过nginx配置反向代理解决

^~ /uploads/表示匹配前缀是/uploads/的请求，将/uploads/后面的路径直接拼接到 /http://111.111.11.111:8083/uploads/后。

location ^~ /uploads/
{
    proxy_pass http://111.111.11.111:8083/uploads/;
}

方法二：采用路径拼接，将图片用的url前缀保存为一个变量，在写一个公共方法其参数为图片相对路径，在需要的地方直接调用变量即可。

报错：ValidationError: webpack Dev Server Invalid Options

解决方法：将proxy: {}注释掉。