记录一次前后端项目部署到腾讯云服务器

作为一个前端，一直没机会实践下前后端部署上线的过程。所以买了腾讯云服务器。

本次实践时间为：2022-04-21

相关技术

• 前端矿建：vue.js
• 后端框架：egg.js
• web 服务器：nginx
• 服务器：腾讯云
• 操作系统：宝塔 linux

项目地址

由于公司内部经常打不开 github，为了方便学习（mo yu）所以只能用 gitee 来搞。

• gitee.com/violetjack/…
• gitee.com/violetjack/…

业务代码

简单实现了一个计数器项目：

• 前端点击按钮
• 请求后端接口，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 系统。

跟着官方文档 cloud.tencent.com/document/pr… 逐步配置，顺利进入到宝塔面板中完成初步配置。

环境搭建

一开始我试着自己通过命令行倒腾环境，后来发现宝塔 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 项目，其中有提到部署相关的内容 www.eggjs.org/zh-CN/core/… ，只要照做就能顺利部署。

首先，我们需要把 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 的数字。

半自动化部署

以上就完成了页面的手动部署，后期如果有改动需要部署，我们也不必重新进入到服务器去手动操作，写两行命令自动执行可以提高效率。

在宝塔面板中有一个计划任务，我创建了两条 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 触发自动化部署。

最后

以上就是我这两天摸索前后端项目部署到服务器的全部过程，有任何问题环境一起交流~