作为一个前端，一直没机会实践下前后端部署上线的过程。所以买了腾讯云服务器。
本次实践时间为：2022-04-21
相关技术
- 前端矿建：vue.js
- 后端框架：egg.js
- web 服务器：nginx
- 服务器：腾讯云
- 操作系统：宝塔 linux
项目地址
由于公司内部经常打不开 github，为了方便学习（mo yu）所以只能用 gitee 来搞。
业务代码
简单实现了一个计数器项目：
- 前端点击按钮
- 请求后端接口，2 秒后端返回一个累加的数字。
- 前端进行展示。
前端
项目通过 vue-cli 简单的搭建了一个 vue 2.0 的项目。
<template>
<div id="app">
<el-button type="primary" @click="commit" class="commit-button" :loading="loading">say hello</el-button>
<div class="result">{{ result }}</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
value: "",
result: "让我们开始吧！",
loading: false
};
},
methods: {
commit() {
this.loading = true;
axios
.get("/api/hello")
.then(res => {
this.result = res.data
})
.finally(() => {
this.loading = false;
});
}
}
};
</script>
后端
后端采用了 egg.js 搭建的项目，一下是业务代码实现。
// egg router
module.exports = app => {
const { router, controller } = app
router.get('/', controller.home.index)
router.get('/api/hello', controller.home.index)
}
// egg controller
const Controller = require('egg').Controller
let index = 1
class HomeController extends Controller {
async index () {
await new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 2000);
})
this.ctx.body = 'hello world ' + index
index++
}
}
module.exports = HomeController
部署
下面到了关键的一步，部署。
服务器选择
我选择的是宝塔 linux 系统。
跟着官方文档 https://cloud.tencent.com/document/product/1207/54078 逐步配置，顺利进入到宝塔面板中完成初步配置。
环境搭建
一开始我试着自己通过命令行倒腾环境，后来发现宝塔 linux 可以傻瓜式一键配置。于是我还是偷了懒。
访问宝塔面板 http://101.35.111.111:面板端口/tencentcloud ，进入【软件商店】安装所需环境。（其实后来我没用上 pm2，不过一般 node 都用的 pm2 就装上了）
安装完毕后测试是否安装成功~
node -v
npm -v
nginx -v
git --version
启动 nginx 服务
查看 nginx 状态
systemctl status nginx
发生报错:
nginx.service - LSB: starts the nginx web server
Loaded: loaded (/etc/rc.d/init.d/nginx; bad; vendor preset: disabled)
Active: failed (Result: exit-code) since Thu 2022-04-21 12:34:56 CST; 1min 36s ago
Docs: man:systemd-sysv-generator(8)
Process: 22303 ExecStart=/etc/rc.d/init.d/nginx start (code=exited, status=1/FAILURE)
Apr 21 12:34:56 VM-16-10-centos systemd[1]: Starting LSB: starts the nginx web server...
Apr 21 12:34:56 VM-16-10-centos nginx[22303]: Starting nginx... nginx (pid 24150 24149 24148) already running.
Apr 21 12:34:56 VM-16-10-centos systemd[1]: nginx.service: control process exited, code=exited status=1
Apr 21 12:34:56 VM-16-10-centos systemd[1]: Failed to start LSB: starts the nginx web server.
Apr 21 12:34:56 VM-16-10-centos systemd[1]: Unit nginx.service entered failed state.
Apr 21 12:34:56 VM-16-10-centos systemd[1]: nginx.service failed.
发现 nginx 报错了，我们试着重启它。
# 查看 nginx 占用的 80 端口
netstat -ntlp
# 杀掉当前进程
kill 24148
# 启动 nginx
sudo systemctl start nginx #systemd
# 查看 nginx 状态
systemctl status nginx
OK nginx 成功启动~
前端项目部署
我们可以将静态资源文件放到 /www/server/nginx/html/ 路径下，于是我们开始部署前端项目。
cd /www/wwwroot/
git clone https://gitee.com/violetjack/system-fe.git
cd system-fe/
npm install
npm run build
cp -r dist/* /www/server/nginx/html
后端项目部署
后端项目采用的是 egg.js 生成的 node 项目，其中有提到部署相关的内容 https://www.eggjs.org/zh-CN/core/deployment ，只要照做就能顺利部署。
首先，我们需要把 egg-scripts 模块作为 dependencies 引入：
$ npm i egg-scripts --save
添加 npm scripts 到 package.json：
{
"scripts": {
"start": "egg-scripts start --daemon",
"stop": "egg-scripts stop"
}
}
这样我们就可以通过 npm start 和 npm stop 命令启动或停止应用。
cd /www/wwwroot/
git clone https://gitee.com/violetjack/system-node.git
cd system-node/
npm install
npm run start
nginx 代理
找到 nginx 代理的配置文件，因为我们要访问的是 80 端口，所以需要在 80 端口上加上反向代理后端，来解决前后端访问跨域的问题。
首先要找到 nginx 配置文件。
# 找到 nginx 配置文件
ps aux|grep ngin
# 打开配置文件
vi /www/server/nginx/conf/nginx.conf
# 通过 include 找到引用的配置文件
vi /www/server/panel/vhost/nginx/*.conf
找到 80 端口，加上配置项：
server
{
listen 80;
...
location /ping {
default_type application/json;
return 200 '"pong"';
}
location /api {
proxy_pass http://localhost:7001;
}
}
这里我加了个 /ping 路径来验证是否改动成功。最后将 nginx 重启，就可以完成后端接口代理。
nginx -s reload
成果
可以访问 http://101.35.108.180/ 我的服务器 IP 来查看计数器的效果。每次点击按钮数字，接口两秒后就会返回 +1 的数字。
image.png
半自动化部署
以上就完成了页面的手动部署，后期如果有改动需要部署，我们也不必重新进入到服务器去手动操作，写两行命令自动执行可以提高效率。
在宝塔面板中有一个计划任务，我创建了两条 shell 命令脚本。可以实现自动或者手动执行。以下是前后端发布脚本：
cd /www/wwwroot/system-node/ && git pull && npm install && npm run stop && npm run start
cd /www/wwwroot/system-fe/ && git pull && npm install && npm run deploy
其实这还不是很优雅，之后我打算研究下通过 gitee 的 CI/CD 来实现 git push 触发自动化部署。
最后
以上就是我这两天摸索前后端项目部署到服务器的全部过程，有任何问题环境一起交流~
网友评论