vue3+nodejs+express将前后端的代码发布到腾讯云服务器上

下载FinalShell

1。官网下载地址：http://www.hostbuf.com/

在这里插入图片描述

点击第一行到如下页面下载第一个
在这里插入图片描述

下载成功
在这里插入图片描述
下一步，选择安装路径，下一步，安装
在这里插入图片描述
首次打开页面就是在这里插入图片描述
点击顶部文件夹图标（新建连接按钮，在 “新标签页” 左边）
在这里插入图片描述
点击左上角白色背景绿色加号，点击之后页面下是如下点击ssh连接
在这里插入图片描述
在这里插入图片描述
确定完成之后页面，双击图下打开黑色命令行终端窗口
在这里插入图片描述
在这里插入图片描述

一、第一阶段：安装全套运行环境（刚连上先做这个）也叫服务器环境一键安装

1.更新系统软件源

apt update && apt upgrade -y

2.安装 Nginx（承载 Vue 前端 + 转发 Node 接口）

apt install nginx -y
systemctl start nginx
systemctl enable nginx

3.安装 MySQL 数据库（存舞曲、用户、收藏数据）

apt install mariadb-server -y
systemctl start mariadb
systemctl enable mariadb
# 初始化数据库，设置root密码
mysql_secure_installation

安装mysql，出现下面弹框需要enter,不然一直卡着不动
弹窗弹出来后你没有回车确认，安装程序停在等待用户确认的步骤，进度条就会卡住不动
在这里插入图片描述
输入命令

mysql_secure_installation

图片回车就好
在这里插入图片描述
后面依次，如果你们要修改服务器密码前两个就是y
在这里插入图片描述
创建项目数据库 dance_db

mysql -uroot -p

输入你刚设置的 MySQL 密码，执行 SQL：

CREATE DATABASE dance_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
exit;

在这里插入图片描述
在这里插入图片描述

4.安装 Node.js 20 + npm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20
nvm alias default 20

Cloning into ‘/root/.nvm’ 是从 Github 克隆代码，国内服务器访问 Github 网速极差，很容易卡住不动。
在这里插入图片描述
1.按 Ctrl + C 终止当前卡住的克隆
放弃 nvm，一步到位安装 Node20，不会出现 Github / 镜像克隆卡死问题，复制整条执行：

apt update && apt install -y ca-certificates curl gnupg
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/trusted.gpg.d/nodesource.gpg
echo "deb https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
apt update && apt install -y nodejs

验证是否成功

node -v
npm -v

安装好了node如图下
在这里插入图片描述

5.安装 PM2（后台常驻运行 Node 后端，关软件服务不宕机）

npm install pm2 -g

二、本地数据库迁移：把本地表传到云 MySQL

本地 Navicat 操作：
本地 dance_db 右键 → 转储 SQL 文件 → 仅结构 + 数据，导出 dance.sql
在这里插入图片描述
会生成一个数据库sql文件
在这里插入图片描述

FinalShell 会自动在下方打开 SFTP 文件管理窗口。

  1. 左侧显示本地文件系统
  2. 右侧显示服务器文件系统
  3. 支持拖拽上传/下载文件
  4. 双击服务器文件可在内置编辑器中打开并保存

此功能极大简化了代码部署、日志下载等日常操作。

然后点击上传数据库文件
在这里插入图片描述
上传 dance_db.sql 到服务器根目录
在这里插入图片描述
在这里插入图片描述

mysql -uroot -p dance_db < dance_db.sql

需要输入一次数据库密码

在这里插入图片描述

三、Node.js 后端部署（dance-server）

删除
压缩后端代码，在上传后端代码压缩文件
解压缩

unzip dance-server.zip

解压完成进入目录装依赖：

cd dance-server
npm install

一定要刷新才会有解压缩的文件
在这里插入图片描述
有一个接口报错了，重新上传一直不动，
解决：

  1. 关闭当前 SSH 标签页
  2. 重新双击「项目服务器」
  3. 连接 再打开文件面板上传，就成功了

在这里插入图片描述
Vue3 前端打包 & 上传

  1. 本地打包
npm run build

在这里插入图片描述
上传dist文件夹
切换到上方命令行，输入查看文件是否存在

ls /root

在这里插入图片描述

Nginx代理

1.编辑配置：

nano /etc/nginx/sites-available/dance

复制下面全部配置粘贴进去

server {
    listen 80;
    server_name 124.220.40.227; # 换成你的服务器公网IP，有域名就填域名

    # 1. 前端静态资源（dist文件夹放这里 /root/dist）
    root /root/dist;
    index index.html;

    # 解决Vue/Uniapp前端路由刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 2. 接口反向代理 /api 转发到Node后端3030端口
    location /api/ {
        proxy_pass http://127.0.0.1:3030/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;`在这里插入代码片`
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

粘贴完成：
Ctrl+O 保存 → 回车确认文件名 → Ctrl+X 退出编辑

三、启用站点配置

创建软链接启用配置

# 创建软链接启用配置
ln -s /etc/nginx/sites-available/dance /etc/nginx/sites-enabled/

# 校验配置是否写错
nginx -t

出现 test is successful 代表配置无错误。
在这里插入图片描述
四、重载 Nginx 生效

systemctl reload nginx

全部弄完毕，打开网址，出现无法访问
在这里插入图片描述

解决：
一、最高优先级：腾讯云安全组放行 80 端口（90% 的人卡在这里）
登录腾讯云控制台 → 云服务器 CVM
1.点击防火墙，点击添加规则
在弹出的配置窗口填写参数：
应用类型：可以选「自定义」
来源：全部 IPv4 地址
协议：TCP
端口：填写80
策略：允许
备注：可填「网页 80 端口访问」方便后续识别
在这里插入图片描述
后续操作
规则保存生效后，登录服务器执行内部防火墙放行命令：

ufw allow 80/tcp
ufw reload

回到 PowerShell 重新执行端口测试命令：

Test-NetConnection 124.220.40.227 -Port 80

在这里插入图片描述
报500，/root 目录顶层权限限制，单纯改 dist 内部权限没用
在这里插入图片描述

  1. 把 dist 从 /root 移到 /home
mv /root/dist /home/
  1. 修改 Nginx 配置文件，更换静态文件路径
nano /etc/nginx/sites-available/dance

root /root/dist; 改成 root /home/dist;

按 Ctrl+O 回车保存，Ctrl+X 退出。
3. 给新目录开放读取权限

chmod -R 755 /home/dist

4.执行下面 4 条命令

mv /root/dist /home/
chmod -R 755 /home/dist
nginx -t
systemctl restart nginx
  1. 刷新浏览器测试
    访问 http://124.。。。.40.227，500 错误直接消失。
    页面可以打开了
    在这里插入图片描述
    接口报错500不存在
curl http://127.0.0.1:3030/api/dance/getAllDanceMusic?userId=1

将接口地址加上/api/dance
在这里插入图片描述
上一个500好了，又来了504
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
按下面填，放开 3030 端口外网访问
应用类型：自定义（保持不变）
来源：输入 0.0.0.0/0（允许所有外网 IP 访问）
协议：TCP（保持不变）
端口：输入 3030
策略：允许（不变）
备注：后端 3030 接口端口（随便写，方便识别）
服务器内部防火墙放行 3030
SSH 登录执行：

ufw allow 3030/tcp

后端监听地址改为 0.0.0.0:3030，不能是 127.0.0.1:3030
改完重启 pm2 后端：

pm2 restart dance-api

执行接口

curl http://124.220.。0.227:3030/api/dance/chat

就解决了
现在线上的页面就可以正常掉接口了

有数据库接口一直报错
重载 PM2 让新.env 配置正式生效

# 重启项目进程加载最新环境变量
pm2 restart dance-api
# 保存当前pm2配置，保障服务器重启之后可以自动拉起服务
pm2 save
# 清空旧日志，便于后续查看全新的运行输出
pm2 flush dance-api
# express # 腾讯云 # 服务器
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

基于大数据+Hadoop+深度学习的淘宝用户购物可视化与行为预测系统设计与开发

avatar 亚马逊云科技技术品牌专区
cover

基于大数据爬虫+Hadoop+深度学习的旅游推荐系统设计与开发

avatar 亚马逊云科技技术品牌专区

学Linux选学校：一线城市还是老家？

而二线城市很多机构的老师，自己都没进过大厂，技术停留在五年前的水平，甚至对着PPT照本宣科。而二线机构缺乏企业合作资源，项目案例永远是“搭建博客系统”“配置个LAMP环境”——这些在现在的云计算岗位面试中，连初筛都过不了。在一线城市学习，你接触的同学、老师、企业内推资源，都是二线城市没法比的。而老家机构的学员，最好的结果也就是去本地小公司做网管，月薪五六千，天花板肉眼可见。在IT培训这行干了快十年

avatar 亚马逊云科技技术品牌专区