手把手教你部署的node前后端程序

前言

这篇文章将手把手教你使用宝塔面板部署自己的node前后端服务。至于为什么用宝塔，不敲一行命令实现前后端部署，相对于他原生部署方式，比如Nginx、Apache、Docker简单省事，对前端使用者更友好。

实验环境

云服务器：ubuntu18.4
PC：windows10

宝塔部署node后端服务

宝塔工具安装

pc上安装堡塔远程工具，ssh连上服务器。其他ssh工具也可以，比如putty、xshell等，
运行堡塔面板安装命令
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

如果是其他linux版本系统安装命令则不同：https://www.bt.cn/new/download.html，在这里找

安装完出现：
外网面板地址: http://47.113.185.74:12482/95ea64dd
内网面板地址: http://172.19.143.18:12482/95ea64dd
username:ysipxkuw
password:249605086229

忘记username和password，则执行sudo /etc/init.d/bt default或者bt default显示地址和账号密码

若无法访问面板，请检查自己云服务器的防火墙/安全组是否有放行面板[12482]端口

部署node后端

进入面板它会提示你安装一整套软件，直接按照推荐安装即可，
再去软件商店安装Node.js版本管理器

Node.js版本管理器是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单方便。

在文件上传写好的node后端程序

这是我的node后端程序，实现接受post，响应图片的url和序号index。我这里使用了express模块和cors模块，需要在服务器中安装这个模块。

可以选择局部安装必须安装到后端服务的文件夹内，全局安装npm install -g express

// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()
const cors = require('cors') //跨域
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: false }))  //解析表单中间件配置

app.post('/image', (req, res) => {
    let imgs = ['https://gitee.com/mei_long_chen/img_bed/raw/master/images/1.jpg','https://gitee.com/mei_long_chen/img_bed/raw/master/images/2.jpg','https://gitee.com/mei_long_chen/img_bed/raw/master/images/3.jpg','https://gitee.com/mei_long_chen/img_bed/raw/master/images/4.jpg','https://gitee.com/mei_long_chen/img_bed/raw/master/images/5.jpg']
    let ids = [1,2,3,4,5]
    res.send({state:1,data:{id:ids[req.body.index],img:imgs[req.body.index]}})
})
// 3. 启动 web 服务器
app.listen(8887, () => {
  console.log('express server running at http://127.0.0.1')
})

局部安装node后端模块
这里进入terminal

如果使用webpack管理的项目，直接执行npm i 即可
npm i express cors
安装完成刷新目录会发现这都些文件

找到刚才的服务器目录,上传node文件或者项目，添加项目
打开8887防火墙端口

前端

测试后端

前端程序注意修改请求IP地址和端口，这里的前端程序改另存为client.html文件使用浏览器打开，并在同级目录加入axios.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton">点击</button>
    <div id = 'imgs'>
        <ul></ul>
    </div>
    <script src="axios.js"></script>
    <script>
        document.querySelector('#myButton').addEventListener('click', clickFn)
        async function clickFn(){
            let imgList =[]
            for(let i=0 ;i<5; i++){
                // imgList.push(MyAPI(i))
                let receiveData = await MyAPI(i)
                // console.log(receiveData);
                imgList.push(receiveData)
            }
            console.log(imgList);
            imgList.sort((a,b)=> b.id-a.id)  //倒序排列
            console.log(imgList);
            let myUl =  document.querySelector('#imgs ul')

            imgList.forEach((imgObj)=>{
                // console.log(imgObj);
                let newLi = document.createElement('li');
                let newImg = document.createElement('img')
                myUl.appendChild(newLi);
                newLi.appendChild(newImg);
     
                newImg.src = imgObj.img
                newImg.title = imgObj.id
            })
        }
       
        async function MyAPI(index){
            //axios从后端获取
            const res = await axios({
                method: 'POST',
                data: {
                    index
                },
                url: 'http://47.xxx.188.74:8887/image',
            })
            return res.data.data
        }
    </script>
</body>
</html>