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

爱吃糖的猫

1398人浏览 · 2023-06-14 15:52:29

爱吃糖的猫 · 2023-06-14 15:52:29 发布

本文节选自我的博客：手把手教你部署的 node 前后端程序

💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
📝 CSDN主页：爱吃糖的猫🔥
📣 我的博客：爱吃糖的猫
📚 Github主页: MilesChen
🎉 支持我：点赞👍+收藏⭐️+留言📝
💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

这篇文章将手把手教你使用宝塔面板部署自己的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版本系统安装命令则不同

安装完出现：
外网面板地址: http://47.113.195.74:12482/95ea64dd
内网面板地址: http://172.19.163.18:12482/95ea64dd
username:ysipxkuw
password:249605086269

忘记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>

通过上满的方式打开client.html可在浏览器显示如下效果

若测试失败
检查IP和端口是否连通
tcping可以ping ip+端口

进去后，直接下载tcping.exe那个文件就行。然后把下载好的工具放到电脑的C盘>Vindows>:System32下面就行。
然后我们直接重新打开CMD窗口，输入命令输入完回车就可以查看这个IP的端口是否是通着的。
比如：tcping10.20.66378090

部署前端服务

1.打包项目 yarn build
2.全局安装serve包。yarn global add serve
3.到打包的目录下terminal执行serve即可开启服务
或者直接再上层目录下执行 serve build

总结

一定要把开宝塔面板和云服务器防火墙都关闭
后端的端口号与前端保持一致

*有任何疑问和想法，欢迎在评论区与我交流。*

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模