阿里云服务器10分钟快速部署vue项目

阿里云服务器10分钟快速部署vue项目 腾讯云服务器10分钟快速部署vue项目

前置条件

• 随意一台云服务器（实例主机）（腾讯云阿里云首次使用都会送一个月不等可以拿来练手）
  • 操作系统 选择centerOS 本篇主要围绕该操作系统，小白依然可以快速上手没必要选择windows操作系统
• 电脑上安装 xshell 软件 去官网下载即可 用于进行远程连接用
• 一份写好打包好的源代码 地址：后台管理项目自行下载
• 需要注意的是 当前文章介绍了 nodejs 接口的部署 和 前端项目的部署 不需要部署接口可以跳过接口的部署

在阿里云中打开你的实例 （服务器参数）复制你的公网ip地址

• 实例
  
• 公网IP地址
  

打开 xshell 创建会话

• 登录名为 root 默认
• 密码为创建实例的时候你抒写的密码 忘记可以自己改 （找到重置实例密码即可）
• 创建成功关联上后 最后显示 `[root@xiaobaga ~]# 并且会话窗口为绿色
  

给服务器安装宝塔面板

• 宝塔面板地址：宝塔面板 使用什么操作系统就下载对应的版本
• 这里下载 centerOS版本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec
• 复制粘贴到 xshell 中 右键粘贴 回车执行 等待下载完毕 碰到选项时选 y即可
  
• 下载完毕后 最后面会展示出访问地址 和登录名以及密码 复制保存一下
  

访问宝塔面板

• 如果无法访问 如上提示 在安全组中添加放行端口
• 可以根据如下把所有端口都添加一下
  
• 进入前有一系列琐碎事前自行弄好就可以了 没有账号就注册即可
• 来到主页后 会弹出 推荐配置安装 选择第一个即可 等待安装完毕即可
  
• 就此 基础事项都成功完成

后端 nodeJs 接口的部署 （只部署项目自行跳过接口的部署）

在宝塔面板中添加数据库

• 在下载的项目中 vue-shop-serve\db\mydb.sql 将其导入
  
  

在宝塔面板中 安全 添加端口

上传 后端接口文件

• 上传成功后 我这里将 vue-shop-serve 文件 重命名为了 api
  

修改 文件中的ip地址和端口号

• 端口为 8889
• 地址为 自己的服务器ip地址
• /www/wwwroot/api/config/default.json修改当前文件中的配置
  
• 同时修改 /www/wwwroot/api/app.js中的端口号 8888改为8889
  

在商店安装 PM2管理器 并放到首页

• 使用pm2管理器运行项目 但是因为 接口文件中没有 node_modules 文件 需要安装依赖
• 因为截图在前面截的 vue-shop-serve 改为了 api 选择的时候 转变一下就好了
  
• 在 xshell面板中进行安装依赖
• cd / 回到根目录
• cd /www/wwwroot/api 来到后端接口的根目录处
• npm i 安装依赖 （安装前先查看是否有node 分别输入 node -v 和 npm -v 显示出版本既存在 ）
• 需要注意 如果安装了PM2后 查看 node 和 npm版本时 不显示版本号 需要重启服务
  

至此接口部署完毕 打开项目中的 接口文档 使用测试工具检测接口是否成功启用

• 可以使用 apifox 或 postman 软件进行测试接口
• 接口的基准地址为 http://127.0.0.1:8888/api/private/v1/
• 将当前接口ip地址和端口进行修改得到：http://47.101.133.111:8889/api/private/v1
• 根据文档接口 http://47.101.133.111:8889/api/private/v1/login?username=admin&password=123456 进行登录（get）
  

前端项目的部署

修改前端项目中的基准api接口 并进行打包

• npm i 安装依赖
• npm run serve 查看是否可以运行
• vue_shop-master\src\main-prod.js 找到当前文件 将其接口改为 部署好的接口
  
• npm run build 进行打包项目 得到 dist文件备用

添加站点

• 域名直接使用 公网ip地址即可
  
• 创建成功后 在地址栏 直接打开该域名地址 同下既创建成功
  
• 将当前文件中的所有文件全部删除 （有一个删不掉不用管）
  

上传前端打包文件

• 只要把 dist 中的所有文件拖拽到当前 ip地址文件的里面即可
  

• 直接访问公网ip地址 项目可以显示既成功了
  

• 当然 你可以简单测试一下 直接创建一个index.html 的文件 直接打开公网ip地址
  

其他

关闭 xshell 后忘记复制地址和密码

- xshell 连接服务器后 在终端 	输入  `/etc/init.d/bt default`  得到初始用户名和密码
- 如果无法登录 密码或账号名错误 输入 `bt ` 根据指令 重置用户名和密码
- [忘记密码如何操作](https://www.bt.cn/bbs/thread-1172-1-1.html)

如何更换操作系统

• 首先关闭 当前运行的服务器 停止实例
  

xshell连接服务器时忘记密码 或如何改变实例密码

🤕到此所有部署就完毕了

• 纯属个人己见，前端路还长，接受所有建议