前后端分离项目线上部署

一、前言

我们在开发了一个前后端分离项目之后，为了任何用户在不同条件下也能够访问，需要将项目部署至线上，那么我们首先需要拥有一个服务器，网上有很多教程，能够教会大家如何拥有属于自己的服务器，这里不再赘述。
本人选的是阿里云的linux/CentOs7.7服务器（据说 21 年底，CentOs 官方将不再维护 CentOs8了，大家看看要配哪个系统好吧，我之前不知情，选了 CentOs8 ，后来因为某种特殊原因决定重换系统，于是降低版本为 CentOs7）。
当大家拥有自己的服务器后，就需要配置各种环境以支持项目能够顺利运行，这也是为什么开发者会说“这个项目在我的机器上能跑”的原因了，因为“我的机器上有相关配置，你的机器上怎晓得有没有”…。网上虽然有相关的资料，但杂多繁乱，本人当初因为配置环境浪费了很多时间，这里贴下 @b站up主CodeSheep 的 pdf ，真是一个很好的配置说明，一条龙服务，很快就能配置大部分必备的环境，分享给大家：

链接：https://pan.baidu.com/s/1yKVkabO-N-MCx4UwRbbKcQ
提取码：h464

下面将会使用基础和进阶的方法部署项目，先说比较麻烦的手动部署流程，毕竟事情要一步一步来，从易到难嘛。

二、实践过程

前端的手动化部署

这里使用了 webpack ，由于本文重点不在于如何使用 webpack 配置项目，因此不详述，默认诸位看官已经学会相关知识点。

首先要将本地项目打包成 dist 包，这点通过 webpack 配置可以完成。
打开 Xshell 工具，在 nginx 已经配置好的前提下，修改 nginx 的配置文件：
- 找到【 nginx 的安装目录下的 conf】，修改 conf 下的 nginx.conf 。
- 举例：我的安装路径是 /usr/local/nginx ，所以执行 vim /usr/local/nginx/conf/nginx.conf 命令，进到文件里面后，按 i 可以进入编辑模式修改文件，修改好后按 esc 可以退出编辑模式，然后输入 :wq 保存并退出文件即可

// 修改配置如下：
// 1. 在第一行加上 user root;
// 2. 找到 server{ location / {} }，修改如下
server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;// 在这里修改喔：location / {root  nginx的安装目录/html/xxx;// eg. root /usr/local/nginx/html/dist，dist 为打包后的前端项目;index  index.html index.htm;}
}

配置好 nginx.conf 后，保存退出，重启 nginx
重启命令：nginx 的安装路径/sbin/nginx -s reload ，举例：/usr/local/nginx/sbin/nginx -s reload

打开 Xftp 工具，找到 nginx的安装路径/html/ ，例如 /usr/local/nginx/html/ ，将 dist 包上传至 html 目录下。
至此，前端项目的部署就完成了，访问 ip 地址就可以看到前端项目的静态界面了！

前端项目的部署相对来说简单一些，只要将打包后的文件夹上传到服务器即可（配置好 nginx 的前提下）。下面看下后端项目的部署。

后端的手动化部署

配置好 Tomcat ，相关教程看上文3.2 的 pdf
在 Tomcat 的安装目录下新建一个文件夹，用来存放后端项目，这里命名为 myApp 。打开 Xftp 工具，选中要上传的后端文件，拖拽实现上传
打开 Xshell 工具，用命令行进入 myApp ，安装项目所需的依赖 npm install 。提一嘴：可以用 pm2 监控项目，先全局安装 pm2 npm install pm2 -g ，然后用 pm2 启动项目入口文件 pm2 start 入口文件 ，就可以将后端服务跑起来了。
到这里，后端项目的部署也完成啦，咕咕咕~

到这里，其实本应该能成功启动前后端项目，并能够跑通服务，但绝大多数情况下总是事与愿违的，似乎老天爷不会让事情这么顺利，总要让我们经历一番磨练，所谓“天将降大任于斯人也，必先苦其心志，劳其筋骨”是也，于是总会出现各种奇奇怪怪的 bug 。我也遇到了，一度很伤脑筋，所幸没有放弃，后来终于解决了，咬牙坚持下去就是了。友情提醒一下：对服务器的操作需谨慎又谨慎，一旦删除（rm -rf）重要运行文件，将是不可恢复的，会导致系统故障等问题，运行命令时要小心操作！

如果读者已经顺利完成了项目的非自动化部署，相信能够感受到诸多的不便之处，下面我会为大家介绍自动化部署前后端分离项目的流程，最终的效果便是在本地编辑器的终端运行两次命令：npm run deploy 服务器的主机服务器的密码 ，便能够分别实现前后端分离这两个项目从打包到上传服务器再到启动项目的一条龙服务，希望对大家有所帮助。

前端的自动化部署

首先我们需要搞清楚前端项目的一系列部署流程，那便是 打包–登录服务器–上传打包文件 ，那么按照这个思路，我们来具体捋清楚实现过程：

逻辑思考

①运行脚本命令；
②然后脚本读取配置文件（包含服务器host、port、web目录及本地目录等信息）；
③打包生成 dist 包 – npm run build；
④使用 scp2 连接服务器；
⑤将本地打包的 dist 上传至 /usr/local/nginx/html/ ；
⑥获取脚本命令的自定义参数，这里的参数为服务器主机和密码，并赋值给服务器配置文件（第④点的目的是防止将服务器的主机和密码泄露在项目中）。

逻辑实现

// 在 package.json 文件的 scripts 字段定义脚本命令 "deploy"
"scripts": {"build": "webpack --config webpack/webpack.prod.js", //博主这里的配置是这样的，可能跟大家有点出入"deploy": "npm run build && node ./deploy/index.js"
}// 看到上面的 deploy 中的路径，我们可以知道需要在项目根目录下新建文件夹 deploy ，并在 deploy 下新建文件 index.js ，这个文件是为了使用 scp2 连接服务器，因此里面还放有服务器的一些相关配置。现在开始编写 index.js ：
// 注：scp2 的官网有相关 API 的使用方法，需要提醒的是文件上传的路径需要特别注意，因为不同的工具，写法不同，最终的效果也是有所差别的，例如有些工具上传文件时如果发现服务器该路径下没有对应文件，会自动生成文件夹，但有些工具却不会；同时，上传的文件路径后面带不带 “/” ，也是会有不同的效果的，读者需要稍微留意一下。
// 1.引入 scp2 ，用于连接服务器
const client = require('scp2');
// 2.服务器的配置选项
const server = {host: '', // ip 地址port: 22, // 端口号username: 'root', // 用户名password: '', // 密码path: '/usr/local/nginx/html/dist'  // 存放项目的路径
}
// 4.用解构赋值获取脚本命令后面的两个参数：主机和密码
const [ , , host, password] = process.argv;
server.host = host;
server.password = password;
// 3.连接服务器并上传 dist 包到服务器的指定目录 path
client.scp('dist/', {port: server.port,host: server.host,username: server.username,password: server.password,path: server.path
}, function(err) {if (err) {console.log('文件上传失败', err)} else {console.log('文件上传成功');}
})

之后执行【 npm run deploy 服务器主机服务器密码】便可实现前端项目的自动化部署了

后端的自动化部署

与前端项目的自动化部署一样，我们也需要搞清楚后端项目的一系列部署流程，也就是 用一个文件夹单独存放需要上传的文件–登录服务器–上传文件–启动项目 ，我们同样来看看具体实现：

逻辑思考

①手动将需要上传的文件复制到一个新建文件夹里，这个文件夹博主命名为 oppService；
②运行脚本命令；
③然后脚本读取配置文件–包含服务器host、port 和 oppService 目录以及 deploy.sh 脚本等信息；
④调用 node-ssh API 连接服务器；
⑤将 oppService 文件夹上传至服务器指定目录；
⑥启动项目的方式博主是在服务器上运行自己编写的 .sh 脚本，里面编写的是项目上传之后服务器要做的后续命令 – 进入服务器上的 oppService 文件夹里以执行 deploy.sh 脚本；
⑦获取 npm scripts 命令的自定义参数

逻辑实现

// 同样在 package.json 文件的 scripts 字段定义脚本命令 "deploy"
"scripts": {"deploy": "node ./deploy/index.js"
}// 在项目根目录下新建文件夹 deploy ，并在 deploy 下新建文件 index.js 。开始编写 index.js ：
// 1.引入 node-ssh 模块 ，准备调用内置 API
// 这里有个小问题，貌似官方有个 bug 没解决，不能直接 const node_ssh = require('node-ssh'); ，而是得改成下面的形式去导入
const node_ssh = require('node-ssh').NodeSSH;
const ssh = new node_ssh();
// 6.用解构赋值获取脚本命令后面的两个参数：主机和密码，并存入 config 中
const [ , , host, password] = process.argv;
// 2.服务器的配置选项
const config = {path: {localPath: 'oppService/',romotePath: '/usr/local/apache-tomcat-8.5.71/Online-programming-platform_service',},romote: {host: '',port: 22,username: 'root',password: ''}
}
function uploadFile() {// 3.连接服务器ssh.connect(config.romote).then(() => {// 4.上传 dist 包到服务器的指定目录 pathssh.putDirectory(config.path.localPath, config.path.romotePath).then(() => {// 5.执行脚本，完成文件上传后服务器的后备工作ssh.execCommand('sh deploy.sh', { cwd: config.path.romotePath }).then((res) => {if (!res.stderr) {process.exit(0);}})}).catch(err => {console.log(err)})}).catch(err => {console.log('服务器连接失败！！')})
}
uploadFile();// 编写 deploy.sh 脚本
#!/bin/bash# ①先关闭之前的服务，安装依赖之后再重启
pm2 stop src/app.ts# ②查看文件中是否已经包含 node_modules ，如果有则先删除
file='node_modules'
if [ -e $file ]; thenrm -rf $filenpm cache clean --force
fi
# ③重新安装依赖
cnpm install# ④查看8080端口是否被占用，有则 kill ，防止项目无法开启
port=8080
pid=$(netstat -nlp | grep :$port | awk '{print $7}' | awk -F"/" '{ print $1 }')
if [ -n "$pid" ]; thenkill -9 $pid;
fi# ⑤重新启动 pm2
pm2 start ./src/app.ts

三、总结思考

在实现了项目自动化部署之后，部署过程不再那么繁琐，效率一下子就提上来了，一条命令就搞定一切，但我觉得，其实还有优化空间，例如后端项目需要事先将要上传的文件抽离出来，那我们每次编写完代码之后都得把文件更新一遍，不是很方便，这个问题就等后续再完善吧(=￣ω￣=)。如果读者觉得有什么好的解决方案或者是其他可以优化的地方，也可以在评论区提出来哩，先谢过诸位啦~

后续等有空了会回头来完善的哈

从对服务器一窍不通，到掌握线上项目的部署，再到命令行的熟练操作，以及对解决问题能力的锻炼，这些都是博主在完成这个前后端分离项目线上部署带来的好处，毫无疑问收获是颇丰的。但实现的过程却并不轻松，有时候一个 bug 一卡就是两三天（终究还是能力不够吧 T^T），浪费了很多时间，但坚持总会有作用的，至少排查问题的能力或多或少能有所提高，真心希望读者能顺利完成项目的部署，直接通关【妖魔鬼怪（bug）快离开，妖魔鬼怪（bug）快离开】。

以上 ^_

前后端分离项目线上部署相关推荐

Vue第三部分(2)：Vue-CLI构建前后端分离项目以及打包部署
通过上一节,我们学习了vue脚手架的相关概念以及构建过程,那么开始我们的前后端项目吧 Vue-CLI构建前后端分离项目 1.项目环境初始化 1.安装 axios vue-axios(记得执行命令要进入 ...
前后端分离项目的服务器部署
https://www.jianshu.com/p/cbb21c6f3427 前几天我的个人网站终于部署上线了,趁现在还记得,赶紧把流程记录下来.本文讲的是前后端分离的项目的服务器部署,这里就以我的个 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
Springboot+Vue前后端分离项目打包并部署到服务器
一.打包前端项目打开前端项目,使用npm run build命令进行打包,打包成功后结果如下这时,该项目目录下有一个build目录是打包好的文件将该目录下的所有文件复制到后端Springboot ...
(一)专题介绍：移动端安卓手机改造成linux服务器linux服务器中安装软件、部署前后端分离项目实战
快捷目录前言一.涉及到的相关技术简介二.具体实现过程及踩坑杂谈 1.安卓手机改造成linux系统实现方案 2.改造后的手机Linux中软件的安装 3.手机Linux中安装MySQL5.7踩坑实录 ...
若依前后端分离项目部署最简单的方式（推荐）
对应若依前后端分离项目来说,部署的方式有很多种: 第1种方式:可以将前端打包整合到后端部署第2种方式:可以使用tomcat部署(后端打war包+前端打dist包) 第3种方式:可以使用tomcat+ ...
在Docker 上完成对Springboot+Mysql+Redis的前后端分离项目的部署（全流程，全截图）
本文章全部阅读大约2小时,包含一个完整的springboot + vue +mysql+redis前后端分离项目的部署在docker上的全流程,比较复杂,请做好心理准备,遇到问题可留言或则私信目录 ...
前后端分离项目部署(部署在同一台服务器)
前后端分离项目部署(部署在同一台服务器) 博主现在参与的项目是前后端分离的,前端是用vue写的并用npm构建的,后端是用java写的用maven构建的,但是前端和后端在同一个项目中,之前的部署方式是前 ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...