自学内容网 自学内容网

828华为云征文 | 云服务器Flexus X实例,搭建上线前后端项目

828华为云征文 | 云服务器Flexus X实例,搭建上线前后端项目

项目搭建

演示使用华为云服务器Flexus X实例搭建上线前后端项目黑马vue电商后台管理系统

项目GitHub链接:https://github.com/Minori-ty/vue_shop.git

1、购买华为云 Flexus X 实例

Flexus云服务器X实例-华为云 (huaweicloud.com)

2、宝塔面板配置数据库(添加数据库设置账号密码即可)

在这里插入图片描述

3、导入数据库(导入-从本地上传数据库文件)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、开放端口8889和3306

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5、上传服务器文件(将服务器文件压缩并上传)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

6、将服务器压缩文件解压到当前目录

在这里插入图片描述

7、点击进入刚刚解压的文件(server/config)修改json文件修改端口

在这里插入图片描述

修改ip地址为服务器ip地址,修改数据库的账号密码为自己配置的账号密码,然后按ctrl+s保持即可

在这里插入图片描述

8、回到服务器文件夹修改app.js文件的端口号为8889

在这里插入图片描述

在这里插入图片描述

9、软件商城中下载pm2管理器

在这里插入图片描述

开启页面显示

在这里插入图片描述

10、启动pm2管理器添加项目

在这里插入图片描述

在这里插入图片描述

找到服务器文件app.js文件即可

在这里插入图片描述

如果此处提交有报错提示,说明node.js版本有问题(新版的pm2默认的node版本是4.x,而pm2需要node@10以上的版本,到pm2面板中修改node版本到14.x以上就行了)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

11、项目文件中修改main-prod.js文件的ip,并且通过vscode打包dist文件

在这里插入图片描述

npm run build

在这里插入图片描述

将dist文件压缩

在这里插入图片描述

12、在http目录中上传dist压缩文件,并且将文件解压到当前目录中

在这里插入图片描述

在这里插入图片描述

13、浏览器访问服务器ip地址即可访问项目

在这里插入图片描述

体验感受

在这里插入图片描述

华为云服务器Flexus X实例搭建并上线前后端项目黑马Vue电商后台管理系统,极大地提升了部署效率与便捷性,Flexus X云服务器凭借其高性能的计算资源,使得项目从搭建到上线的整个过程变得非常迅速和方便,对于同样有需求的小伙伴,无论是个人学习还是企业开发,选择这样一台服务器都是不错的选择,此外,当前华为云正在进行828 Flexus X实例大促优惠活动不容错过!

华为云828 Flexus X实例


原文地址:https://blog.csdn.net/weixin_62765017/article/details/142357705

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!