阿里云服务器如何管理vue3+node项目？
Admin 2023-05-29 群英技术资讯 386 次浏览
很多朋友都对“阿里云服务器如何管理vue3+node项目？”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！一、前言
最近在B站学习了一下全栈开发，使用到的技术栈是Vue+Element+Express+MongoDB，为了让自己学的第一个全栈项目落地，于是想着把该项目部署到阿里云服务器。经过网上一番搜索和自己的一顿操作后，我在这里记录一下自己的部署过程，方便以后查阅。
参考博客：
https://segmentfault.com/a/1190000012186563?utm_source=tag-newest
https://blog.csdn.net/weixin_43503511/article/details/86670937
二、环境
阿里云服务器（轻量应用服务器）——保证安装好node和vue3
vue3
node(express框架)
三、部署过程
1.本地测试
要想全栈项目能在云服务器上正常运行，必须要先保证全栈项目在本地可以跑通！
全栈项目结构：
后端：
前端：
注意：
把前端项目放进后端项目目录下的原因主要是为了方便本地调试。在本地调试时，只运行一条命令 npm run dev，就同时启动前后端工程项目了，如下所示：
本地跑通后，修改一些配置就可以部署到云服务器了！
2.服务器部署
2.1 本地修改文件
2.1.1 在client=>src目录下修改文件 router.js 内容：（设置 mode 属性值）
2.1.2 在client目录下修改文件 vue.config.js 内容：
注意：因为还没有域名，所以后面的访问都是以阿里云服务器的公网ip为准
2.1.3 进入client目录下，执行打包命令： npm run build ，会在client目录下生成 dist 文件夹
2.1.4 将client目录下生成的 dist 文件夹拷贝到 node-app 目录下
2.1.5 提前备份一下node-app目录下的client文件夹，然后删除node-app目录下的client文件夹和node_modules文件夹，接着将 node-app 文件夹压缩成 zip 文件，然后准备上传到阿里云服务器
压缩后：
2.2 服务器配置
2.2.1 将前面的项目压缩包上传到阿里云服务器
2.2.2 解压node-app.zip文件
2.2.3 解压node-app.zip文件后，进入node-app目录下，执行命令： npm install （如果权限不够，执行命令： sudo npm install）
2.2.4 修改资源路径
修改node-app目录下server.js文件的express配置内容，如下所示：
2.2.5 云服务器开放端口
因为后端用到的端口是5000，所以要在云服务器上开放5000端口，如下所示：
2.2.6 安装pm2
服务器上使用 node 命令启动项目时，如果我们退出 Xshell 时，进程就会关闭，无法再访问到项目。因此，为了解决这个问题需要用到pm2。pm2 是一个带有负载均衡功能的Node应用的进程管理器，可以保证进程永远都活着，0秒的重载。
安装命令： npm install -g pm2
启动进程命令： pm2 start server.js
停止进程命令： pm2 stop server.js
查看进程命令： pm2 list
更多命令参考：https://www.jianshu.com/p/75e4c31517b7
2.2.7 测试
在node-app目录下，执行命令： pm2 start server.js
在浏览器地址栏输入云服务器公网ip和端口号就可以正常运行了（如：241.23.15.23:5000）
以上就是关于“阿里云服务器如何管理vue3+node项目？”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
