记录第一次vue-nodejs-mongodb项目服务器部署
2024-10-01 17:19:24
记录自己第一次部署项目，中间遇到很多errors，但好在花了两天时间成功部署了。先放出部署成功的项目链接
???师大Buy校园闲置交易平台???
（先注册一个账号使用即可体验）
流程本项目包含三个子项目
前台展示
后台管理
后端nodejs服务器+mongodb数据库
大概流程
开发好前端与后端程序
购买服务器（和域名）
安全组、开放端口与设置规则
xshell操作
服务器上安装和配置node，mongodb所需环境
yum-yupdate4设置代理
上传项目代码到服务器上
启动express服务器
购买服务器我的服务器信息：
腾讯云轻量服务器
运算组件：2核CPU、2GB内存(通用型-2核2G-40G-300G)
系统盘：40GBSSD云硬盘(通用型-2核2G-40G-300G)
流量包：300GB/月流量包(通用型-2核2G-40G-300G)
地域：上海
镜像：CentOS8
买好服务器后可以进入控制台，对服务器进行操作。可以尝试一下开机关机，之后最重要的是重置密码，这个密码后面通过xshell登录的时候经常用到，所以要记住。
安全组、开放端口与设置规则在腾讯云控制台的搜索框中搜索安全组，打开云服务器-网络安全-安全组。里面可以设置一些安全组规则，意思就是这里可以打开一些端口，以便项目使用。
一开始可以新建安全组，使用一些默认的安全组规则。下面这张图展示就是默认的安全组规则，可以看到他已经放通了22,80等端口可以使用。
本项目中的三个项目分别使用了8080（前台），9528(后台)，3000（后端），27017（数据库）端口，所以要用到这些端口，我们就得自己去开放，因为默认的安全组这些端口是没有开放的。
开放这些端口的时候，需要在安全组里添加（可以在原来默认的安全组里新添，也可以新建安全组），也需要在服务器的防火墙里添加，只有这两个地方都放通了，端口才能访问。
登录和操作服务器xshell操作我电脑是windows系统，所以安装了xshell来登录服务器。如果是mac系统，好像可以直接在终端，通过sshroot@公网IP命令行连接到服务器。因为我没用过，所以这里只讲xshell如何登录和操纵。
安装xshell的时候记得顺带安装xftp，可以用来上传文件，不仅如此，我还发现可以用来浏览文件夹，甚至修改编辑文件，很好用！
打开xshell的时候，会弹出一个会话框，选择新建一个会话，然后命名一下，点击连接，这时候会弹出一个输入密码的对话框，输入一开始你在浏览器上的服务器控制台上重置的密码，就登录了。
centos是基于linux建立的操作系统，所以用的指令和linux一样。而linux指令其实和DOS是一样的，只是命令的表达上可能有点儿不一样，所以遇到这个黑框不要害怕。
下面说一下xshell里面常用的linux指令
cd进入目录ls查看当前目录下的文件mkdir创建文件夹mv移动或重命名rm-rf删除整个文件夹大概知道这些你就有了部署项目的基础了，中途如果遇到其他的需要，可以上网查看。
你可以先试试ls，看看当前文件夹里有什么文件，这感觉就好像是在windows系统上浏览文件夹，只不过在windows上是可视化的操作界面。
xftp使用xftp是个很好用的可视化界面，一开始我是看别人说用来上传文件的，但是后来我用的时候，我发现它很好用来浏览文件，找回了使用windows一样的感觉。
当你进入xftp软件的时候，首先也会弹出一个会话框，新建会话，重命名，然后连接，输入密码。和使用xshell一样。
要传什么文件给服务器，先在右框中选择文件夹（新建文件夹），找好存放的位置后，在左框中浏览你电脑的文件，找到对应的文件后右键传输。
值得注意的是，在连接服务器后，初始文件夹的位置是/root，你可以从xftp软件的右框中看到，也可以在xshell里面ls看到。
在xftp软件上右框的文件夹中有...(三个点)，点击一下，可以返回上一级，你会发现，这里有很多初始文件夹。知道这些文件夹的存在，对于我们下一步的操作很重要，这里暂时放开，我们继续后面。
服务器上安装node，mongodb浏览到这里，我们已经知道一些基本的xshell指令，知道如何通过xshell登录服务器，通过xftp上传文件。下面我们开始在服务器上安装项目所需环境。
一般在新服务器创建后，建议先升级一下CentOS：
yum-yupdate在升级之后，我的yum指令就下载不了东西了，报错FixFailedtodownloadmetadataforrepo，解决办法是
Step1:Gotothe/etc/yum.repos.d/directory.
[root@autocontroller~]#cd/etc/yum.repos.d/Step2:Runthebelowcommands
[root@autocontroller~]#sed-i's/mirrorlist/#mirrorlist/g'/etc/yum.repos.d/CentOS-*[root@autocontroller~]#sed-i's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g'/etc/yum.repos.d/CentOS-*Step3:现在yum就可以使用了
nodejs网上的博客描写安装Nodejs很多，甚至还不一样，很容易踩坑，但是我推荐看这篇博客，另外我也在这讲一下步骤。
#1安装wgetyum-yinstallwget#2切换到/usr/local/src目录，选择这个文件夹存放nodejscd/usr/local/src#3去nodejs下载官网复制下载链接，我的服务器是centos8,64位，所以我选择了https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz#4使用wget安装方式wgethttps://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz#这时候这个压缩包就在当前文件夹下，现在需要解压它#5解压xz-dnode-v16.15.1-linux-x64.tar.xztar-xvfnode-v16.15.1-linux-x64.tar#6建立软连接ln-s/node-v16.15.1-linux-x64/bin/node/usr/local/binln-s/node-v16.15.1-linux-x64/bin/npm/usr/local/bin#这时候你可以切换到/usr/local/bin目录，看看有没有npm，node文件夹，有的话说明成功了#7试试node,npms是否能使用node-vnpm-v#打印出了版本好就说明没问题mongodb推荐看官网的步骤（有官方看官方，否则看别人的博客很容易踩坑）
官网给出了如何在centos上下载mongodb5，我也在这里写出步骤
1配置yumxftp的作用来了，打开该软件，在/etc/yum.repos.d文件夹下创建mongodb-org-5.0.repo文件，选择记事本打开，粘贴下面代码
[mongodb-org-5.0]name=MongoDBRepositorybaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/5.0/x86_64/gpgcheck=1enabled=1gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc这个操作就好像告诉yum去指定的baseurl去下载资源，不配置的话yum不指导哪里找资源下载。
2安装mongodb安装包yuminstall-ymongodb-org3验证安装结果rpm-qa|grepmongodb如果输出很多Mongodb相关的包时，说明你的服务器已经有这些包了
4data目录和log目录默认情况下，MongoDB会创建一下mongod用户，该用户会使用data和log目录
/var/lib/mongo(thedatadirectory)
/var/log/mongodb(thelogdirectory)
我们这里就使用它默认的一个位置来存放mongodb的data和log。
5启动MongoDB服务systemctlstartmongod.service我这里启动报错，后来我看到了这篇文章，（看高赞回答），我发现权限错误，我的/tmp/mongodb-27017.lock所有者是root，需要改为mongod。
permissionsettingson/var/lib/mongodband/tmp/mongodb-27017.lockarewrong.Youwillhavetochangetheownertomonogdbuser
在xshell输入一下指令即可
chown-Rmongod:mongod/var/lib/mongodbchownmongod:mongod/tmp/mongodb-27017.sock6验证服务开启yum-yupdate0到现在我们已经完成了部署难点的很大一部分。下面我们看看怎么在服务器运行我们三个项目
yum-yupdate4设置代理不需要懂yum-yupdate4原理，我们可以先使用它看看。
参考这篇文章，我这里也引用一下
先查看服务器是否有yum-yupdate4yum-yupdate1安装yum-yupdate4yum-yupdate2查看yum-yupdate4安装目录命令如下：
yum-yupdate1启动yum-yupdate4启动
yum-yupdate4直接输入yum-yupdate4即可启动服务，打开浏览器，访问服务器公网地址，出现如下界面则代表启动成功。
这里访问默认的是80端口，因为yum-yupdate4服务就是默认的80端口，如果不能访问，大致有几种原因：
yum-yupdate4未启动
服务器安全组未加入80端口
yum-yupdate4配置错误
停止
停止yum-yupdate4服务，命令如下：
yum-yupdate4-sstop此时访问浏览器则无法访问。
重启
重启yum-yupdate4服务，一般用于修改配置文件之后，命令如下：
yum-yupdate4-sreload配置yum-yupdate4yum-yupdate4启动后，在浏览器上输入公网地址，就可以打开默认的一个html页面。
但是这个页面和端口都是默认的，如果需要显示我们自己的页面，就需要配置yum-yupdate4，配置文件为/etc/yum-yupdate4/yum-yupdate4.conf，使用xftp找到该文件夹，并打开编辑。
也可以在xshell上cd找到并vim打开，但是这个很不方便，不能快速复制粘贴和定位。所以推荐使用我用xftp发现的隐藏功能。
在配置文件中，重点看server对象，要改的也是这个对象，我的配置如下
#默认端口server{listen80default_server;listen[::]:80default_server;server_name_;root/usr/share/yum-yupdate4/html;#Loadconfigurationfilesforthedefaultserverblock.include/etc/yum-yupdate4/default.d/*.conf;location/{}error_page404/404.html;location=/40x.html{}error_page500502503504/50x.html;location=/50x.html{}}#前台展示的打开的服务代理server{listen8080;server_namelocalhost;root/root/lan/schoolstore/frontshop/dist;#Loadconfigurationfilesforthedefaultserverblock.#include/etc/yum-yupdate4/default.d/*.conf;location/{root/root/lan/schoolstore/frontshop/dist;indexindex.html;try_files$uri$uri/@router;autoindexon;}location@router{rewrite^.*$/index.htmllast;}location/api/{proxy_set_headerX-Real-IP$remote_addr;proxy_passhttp://0.0.0.0:3000;}gzipon;gzip_buffers324k;gzip_comp_level6;gzip_min_length200;gzip_typestext/csstext/xmlapplication/javascript;gzip_varyon;#error_page404/404.html;#redirectservererrorpagestothestaticpage/50x.html#error_page500502503504/50x.html;location=/50x.html{roothtml;}}#后台管理的服务代理server{listen9528;server_namelocalhost;root/root/lan/schoolstore/cms/dist;#Loadconfigurationfilesforthedefaultserverblock.#include/etc/yum-yupdate4/default.d/*.conf;#找到要渲染的页面location/{#try_files$uri$uri//index.html;root/root/lan/schoolstore/cms/dist;indexindex.html;try_files$uri$uri/@router;autoindexon;}#找到路由location@router{rewrite^.*$/index.htmllast;}#后端数据location/api/{proxy_set_headerX-Real-IP$remote_addr;proxy_passhttp://0.0.0.0:3000;}gzipon;gzip_buffers324k;gzip_comp_level6;gzip_min_length200;gzip_typestext/csstext/xmlapplication/javascript;gzip_varyon;#error_page404/404.html;#redirectservererrorpagestothestaticpage/50x.html#error_page500502503504/50x.html;location=/50x.html{roothtml;}}主要就是修改root和location。
我开了两个代理的：前台展示打开的服务代理8080，和管理后台打开的服务代9528，这个项目是分开端口访问的。修改配置文件后执行yum-yupdate4-sreload，如果项目已经上传，理论上访问ip:8080可以打开前台展示项目，访问ip:9528，可以打开后台展示项目。但是我们现在没讲到上传文件。所以会访问不成功，而80端口我还保留了默认的页面，还是可以访问到的，不妨试一试。
上传项目代码到服务器主要有三个项目的文件需要上传：前台，后台，后端
我们先把后端部署好，前台上传比较容易，并且后端部署好后，前台部署可以拿到数据。
在服务器上使用nodejs不着急直接上传nodejs文件，我们先看看服务器上nodejs怎么使用，因为一开始对于一个服务器小白来说，我们要上传什么东西都不知道，要不要打包也不知道，上传后端和前台一样也不知道。所以带着这些疑问，我们先上网搜搜，怎么在服务器上使用nodejs。
参考文章，主要看【步骤二：部署测试项目】，本文这里也给出步骤，主要是参考了这篇文章。
1打开vscode，在自己电脑里新建一个example.js文件，复制一下代码，然后yum-yupdate9就可以在http://localhost:3000/看到·helloword
yum-yupdate8这是在自己电脑运行的效果，现在我们要想这个example.js文件放到服务器上，然后再服务器上运行，最后在自己电脑的浏览器上输入对应网址，可以看到同样的helloworld。
2把example.js文件通过xftp上传到服务器上的/root文件夹下。然后再xshell中切换到该文件夹。通过ls指令可以看到该js文件，输入一以下指令运行该js文件。（和在自己电脑的控制台上一样）
yum-yupdate9打开浏览器并访问http://<ECS实例公网IP地址>:<项目端口号>。本示例中，<项目端口号>为3000。你会发现该文件运行了同样效果。
这就是node在服务器上的使用，总的来说，其实和在自己电脑运行一样，也就是说我们要把js文件上传到服务器，如果项目大的话，会有很多文件夹，还会有nodemodules，所以这些也要上传。这些文件都有，nodejs文件就可以运行了！
在服务器上部署Node.js+MongoDB项目我的后端项目还用到了数据库，刚才我们只学到node项目怎么部署，但是node+mongodb呢？现在我们来看看
参考教学视频
下面的讲解是假设你已经知道了怎么在自己电脑上开发node+mongodb项目，如果不知道建议先掌握这部分知识，再来看服务器上的部署。
重点是在node项目文件里设置Mongodb数据库连接，这个链接怎么看呢？在xshell里输入mongo就可以看到，
图中红色框就是你的数据库的连接地址。但是在node项目里，？后面的字符串不需要写进入，同时还要也一个明确的数据库名称，我的数据库连接如下图所示。
处理好mongodb的连接地址，下面的步骤其实和Node项目一样，接下来我们真正开始讲解本项目的部署。
上传本项目后端代码有的博客说可以用git上传，大概的意思就是服务器其实也是一台电脑，在这台里面通过git拉取项目，前提是你已经在自己的电脑里把项目文件git到了github上。但是这样很复杂，服务器这台电脑还需要配置git使用，不然就会没有权限，拉取不到项目文件。我弄了一会没弄出来我就另辟蹊径了。
我的方式：
1在自己电脑里把项目上传到github上，忽略nodemodules等开发文件，(我的电脑使用git很久了，已经配置好了，如果第一次使用，也是要配置的，但是在可视化的windows上配置应该比centos上配置容易点)。
2上传之后在gitclone拉取下来
3把新文件同xftp上传到服务器上
4xshell切换到项目文件下，输入nodeinstall下载项目所需包
5nodeserver.js文件运行即可
pm2使用PM2是一个守护进程管理器，它将帮助您管理和保持您的应用程序在线
其实说到这里后端项目就已经部署好了，但是很多博客都介绍了pm2这个工具，这个工具可以替代nodeserver.js，同样让后端启动，但是不同的是，pm2的使用可以保证项目永久运行在服务器上，且不会一报错后端服务器就挂了，而且运行中还可以进行其他操作。
1安装
[root@autocontroller~]#cd/etc/yum.repos.d/02切换当前工作目录到项目server.js文件夹中，执行指令
[root@autocontroller~]#cd/etc/yum.repos.d/1pm2的其他操作
[root@autocontroller~]#cd/etc/yum.repos.d/2到现在为止后端已经部署完毕了
上传本项目前端代码前端代码上传比较容易，参考文章
我的项目是vue项目，所以npmrunbuild打包出一个dist文件夹即可。然后把这个文件夹上传到服务器。此时无需重启yum-yupdate4，刷新浏览器，可以看到我们的网站已经部署成功了
前台
后台
本项目有关地址部署项目重点参考了三篇文章
1服务器小白的我,是如何成功将node+mongodb项目部署在服务器上并进行性能优化的
2记录react+node+mongodb项目部署到服务器的过程
3前端Vue项目打包部署实战教程
非常推荐看这三篇，少走很多弯路。
我的个人博客地址，里面偶尔会做一些笔记
https://janice143.github.io/myblog.github.io/
本项目部署地址
http://101.34.27.188:8080/#/home
我的github项目
https://github.com/janice143?tab=repositories
一些bug清单，附带解决问题的网站
1yum-yupdate4配置500内部错误
2ECS服务器部署Nodejs出现错误Error:ListenEADDRNOTAVAIL
3mongodb的导入json文件
mongoimport--jsonArray--dbschoolstore--collectioncategories--filecat.json
4linux服
热门标签
