将Vue+Nodejs项目部署到阿里云服务器

上传文件至云服务器

一、打包文件

在项目根目录下运行

npm run build

等待命令运行结束后,会发现目录下多了 dist 文件夹,这个文件夹就是我们等下要放到服务器中的。

二、文件传输

  1. 打开 Xftp与实例建立连接
  2. 云服务器Apache默认的根目录是/var/www/html,因此我们在这个目录下新建music文件夹(这里以我的项目文件名为例)
  3. 将项目本地的dist文件夹的内容移到云服务器music文件夹下(准备好前端资源)
  4. 将项目本地的server文件夹也移到云服务器dist文件夹下(这里注意不要复制node_modules文件夹)
  5. 补充当时后台代码路径:C: ryVue-mmPlayer-masterdist 这里再补充一个项目:
这里将本地dist文件夹中的内容,放在了vue文件夹内,若直接将dist文件夹拖到vue路径下,则会报错 报这样的错实在是太愚蠢了 😦

三、初始化项目

① 输入以下两行代码进入项目

ls指令后下面会显示该目录下的文件夹

② 上传 package.json到服务器目录
③ 在Xshell中安装"dependencies"中项目运行需要的所有依赖
npm install

全部安装完成后,项目目录下便会有node_modules文件夹了。

④ 启动服务
node app.js

运行app.js文件,在浏览器打开 服务器公网IP:80(如:263.182.35.68:80),就可以正常运行访问了。这里我使用的是网易云音乐提供的开源的api。

四、安装pm2

上面我们以 node app.js 启动了项目,当我们退出 Xshell 时,进程就会关闭,无法再访问到项目,而 pm2 就是解决这种问题的,以 pm2 启动项目后,退出 Xshell 后依然可以正常访问。

① 安装pm2
npm install -g pm2

注:以 -g 全局安装的插件都在 node 安装目录 bin 文件下

② pm2配置全局变量

我们为了可以在任何目录都可以使用pm2命令,我们将此文件夹加入环境变量

whereis pm2

查询pm2的安装路径 显示是: /opt/node/bin/pm2

ln  -s /opt/node/bin/pm2 /usr/local/bin
pm2

这一步为pm2配置全局变量 注意这里如果重复操作有可能会出现以下错误: failed to create symbolic link ‘/usr/local/bin/pm2’: File exists 这里只需要删除并重新创建软链,再执行pm2

mv /usr/local/bin/pm2 /tmp/
ln  -s /opt/node/bin/pm2 /usr/local/bin
pm2
③ 启动项目
cd /var/www/html/music/dist/server
 pm2 start app.js

这样以 pm2 启动项目后,退出 Xshell 后,就依然可以正常访问了。 贴上项目跑起来以后的地址:http://arwin521.top/music/arwin/#/music/toplist

经验分享 程序员 微信小程序 职场和发展