Record the deployment of front-end and back-end projects to Tencent Cloud Server once

As a front-end, I have never had the opportunity to practice the process of deploying the front-end and back-end. So I bought Tencent Cloud Server.

The practice time is: 2022-04-21

Related Technology

• Front-end mining construction: vue.js
• Backend framework: egg.js
• web server: nginx
• Server: Tencent Cloud
• Operating system: pagoda linux

project address

Since the company often cannot open github, in order to facilitate learning (mo yu), it can only be done with gitee.

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

Business code

Simple implementation of a counter project:

• Front-end button click
• The backend interface is requested, and the backend returns an accumulated number in 2 seconds.
• Display on the front end.

front end

The project simply builds a vue 2.0 project through vue-cli.

<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>
复制代码

rear end

The back-end adopts the project built by egg.js, and the following is the implementation of business code.

// 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
复制代码

deploy

Now comes the crucial step, deployment.

server selection

I chose the pagoda linux system.

Follow the official document cloud.tencent.com/document/pr... to configure step by step, and successfully enter the pagoda panel to complete the initial configuration.

Environment construction

At first, I tried to flip the environment through the command line, and later found that Pagoda linux can be configured with one click in a fool's way. So I was still lazy.

Visit the pagoda panel http://101.35.111.111:panel port/tencentcloud and enter the [Software Store] to install the required environment. (In fact, I didn't use pm2 later, but pm2 that is generally used by node is installed)

After the installation is complete, test whether the installation is successful~

node -v
npm -v
nginx -v
git --version
复制代码

Start the nginx service

View nginx status

systemctl status nginx
复制代码

An error occurred:

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.
复制代码

Found that nginx reported an error, we tried to restart it.

# 查看 nginx 占用的 80 端口
netstat -ntlp

# 杀掉当前进程
kill 24148

# 启动 nginx
sudo systemctl start nginx #systemd

# 查看 nginx 状态
systemctl status nginx
复制代码

OK nginx successfully started~

Front-end project deployment

We can put static resource files under the /www/server/nginx/html/path , so we start deploying the front-end project.

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
复制代码

Backend project deployment

The back-end project uses the node project generated by egg.js, which mentions deployment-related content www.eggjs.org/zh-CN/core/… , as long as you follow the instructions, you can deploy it smoothly.

First, we need to  import the egg-scripts module as  dependencies :

$ npm i egg-scripts --save
复制代码

Add  npm scripts to  package.json:

{
  "scripts": {
    "start": "egg-scripts start --daemon",
    "stop": "egg-scripts stop"
  }
}
复制代码

This way we can   start or stop the application via the npm start and  command.npm stop

cd /www/wwwroot/
git clone https://gitee.com/violetjack/system-node.git
cd system-node/
npm install
npm run start
复制代码

nginx proxy

Find the configuration file of the nginx proxy. Because we want to access port 80, we need to add a reverse proxy backend to port 80 to solve the problem of cross-domain access between front and back ends.

The first thing to do is to find the nginx configuration file.

# 找到 nginx 配置文件
ps aux|grep ngin

# 打开配置文件
vi /www/server/nginx/conf/nginx.conf

# 通过 include 找到引用的配置文件
vi /www/server/panel/vhost/nginx/*.conf
复制代码

Find port 80 and add configuration items:

server
{
    listen 80;
    ...
    
    location /ping {
       default_type application/json;
       return 200 '"pong"';
    }

    location /api {
          proxy_pass http://localhost:7001;
    }
}
复制代码

Here I added a /pingpath to verify if the change was successful. Finally, restart nginx to complete the back-end interface proxy.

nginx -s reload
复制代码

achievement

You can visit http://101.35.108.180/myserver IP to see the effect of the counter. Each time the button number is clicked, the interface returns a +1 number after two seconds.

Semi-Automated Deployment

The above completes the manual deployment of the page. If there are changes that need to be deployed later, we do not have to re-enter the server to perform manual operations. Writing two lines of commands to automatically execute can improve efficiency.

There is a scheduled task in the pagoda panel and I created two shell command scripts. It can be performed automatically or manually. The following are the front-end and back-end publishing scripts:

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
复制代码

In fact, this is not very elegant, and then I plan to study the implementation of git push triggering automatic deployment through gitee's CI/CD.

At last

The above is the whole process of my exploration of the front-end and back-end projects deployed to the server in the past two days. If there are any problems, we can communicate with each other~