玩转服务器---基本工具的使用

FileZilla基本使用

首先，自行安装FileZilla，傻瓜式安装即可。打开FileZilla

点击左上方按钮，会弹出站点管理，在这里可以配置连接你的云服务器，因为云服务器时采用SSH方式进行登录的，所以协议选择SFTP - SSH File Transfer Protocol，主机填写我们服务器的公网ip，端口没有更改的话SSH方式默认是22端口，登录类型选择正常，用户root，密码和登录putty密码一致。然后点击链接，主要你配置信息无误，就可以连接到我们的云服务器

可以看到图中主要分为三个部分：

顶部信息栏：更新或下载文件都会进行提示

左边：本地电脑文件夹，可以选择文件上传到服务器

右边：服务器文件夹

我们一般都将我们的代码放在服务器opt文件夹，现在我将右边服务器站点文件夹导航到opt，然后在左边本地文件夹找到我项目所在的目录

如图的server就是我的后台server项目，我们直接右键点击上传，就会上传到服务器opt文件夹下。

可以看到，在我们右边的opt下面已经多了一个server目录了，到这里后端代码上传成功了。下一步就需要利用XShell启动server服务了。

XShell基本使用

打开已经安装好的XShell，点击左上方的加号进入XShell进行新建连接。

名称可以随意起，协议选择SSH协议，主机填写服务器的公网ip，端口号若未进行修改则SSH协议默认就是22端口，点击确定

选择我们刚才创建的新连接，点击连接，用户名为root,密码为服务器密码，FileZilla，XShell与putty其实都是连接云服务器进行操作，所以配置信息都是一致的。

可以看到，我们已经进入centos服务器的root目录。然后下一步导航到opt目录下我们刚才上传的server项目的根目录

可以看到我们目前已经定位到server项目根目录了，下一步就是使用pm2命令进行启动服务。首先我们要确保pm2软连接设置成功，首先使用pm2 -v查询pm2版本，查询成功则代表我们可以正常使用pm2命令进行node进程服务的控制

接下来介绍几个经常会需要使用的pm2命令

1. pm2 start xxx.js --name xxx 启动xxx.js进程并进行重命名
2. pm2 restart xxx.js 更新代码后，使用restart命令重启xxx.js进程
3. pm2 stop all 停止所有进程
4. pm2 stop xxx.js 停止xxx.js进程
5. pm2 stop 0 停止id为0的进程
6. pm2 list 查看所有当前正在运行的进程
7. pm2 show 0 查看id为0的进程
8. pm2 logs 0 显示id为0 的进程日志
9. pm2 logs xxx.js 显示xxx.js进程的日志
10. pm2 logs 显示所有日志

接下来我们来看看如何使用这些命令，首先在XShell中启动我们的server进程，项目依赖于server中bin文件夹的www文件，所以进入bin文件夹使用pm2 start ./www --name server，可以启动我们刚才上传的server项目并将启动的服务进程重命名为server。然后使用pm2 list可以看到我们当前有一个进程属于启动状态，status就是进程的状态，online就代表正常启动成功，error就代表代码出错，可以查看日志看报错信息，stop就代表进程属于停止状态。

到这里我们的server服务启动成功了，下一步我们可以测试我们后端的接口能否可以正常访问了。因为我现在的接口为了方便测试全部采用get接口，所以我可以在浏览器直接访问接口地址，如果能取到我保存在MongoDB数据库的数据则表示我的后端server服务成功开启。

http://111.230.239.103:4001/api/client/articleList,这个接口是我server服务的一个接口，可以取得我所有已经发布的文章信息

可以看到我们数据已经取到了，所以到这里也表示我们的server服务成功启动了，我们可以在XShell用pm2对我们启动的服务进程进行管理。

后台服务启动成功，下一步就是需要打包我们的前端项目部署到nginx的80端口，我的项目前端使用了angular框架，所以需要在全局安装angular-cli脚手架，命令：npm install -g angular-cli，由于我已经安装过了就不进行演示了。在vs code打开项目，因为我前台浏览文章和后台管理发布文章两部分我是独立开的，所以前端有两个项目，在这里我以前台client项目为例讲如何打包项目

首先在终端导航到client目录下

使用angular的ng命令进行打包，使用ng build命令会生成会将client项目打包生成blog文件夹

出现如图的界面，就代表我们的client项目被打包到blog文件夹了

可以看到，在我们的client项目下，生成了一个blog文件夹，我们只需要把这个文件夹部署到我们nginx的80端口，我们前端的部署工作就可以大功告成了。接下来打开FileZilla,定位到我们nginx的安装目录，目前我是安装在/usr/share/nginx

我们需要将我们刚才打包生成的blog文件夹上传到html文件夹里面

可以看到我已经把我们的前端项目部署到nginx服务器了，现在我们需要去更改nginx的配置文件，一般配置文件在etc/nginx

可以看到有一个nginx.conf文件，选中该文件，右键查看或编辑

我们需要将blog项目部署在80端口，所以找到我们80端口的配置

把80端口的根路径更改为我们刚才放置blog文件夹的html目录，index就是访问根路径会访问的html文件，我们选择blog文件夹下的index.html。更改完配置文件保存退出，回到FileZilla确认我们刚才的更改操作，然后在XShell使用命令nginx -s reload重新加载配置文件。

这样我们前端部署功能基本已经完成了。我们可以尝试访问111.230.239.103试试能不能访问到我的博客首页

可以发现我们前端部署成功了，但是取不到数据库的数据，我们刚才测试后端接口的文章数据全部无法显示。这是什么原因呢？我们可以F12打开控制台看报错信息

可以看到图中的http://111.230.239.103/api/client/articleList接口404未找到无法访问，这是什么原因呢？我们可以翻上去看看我们刚才访问后端接口的地址与这个有何不同

可以发现，我们后端的server服务是运行在4001端口，但是我们前端访问没有懈怠端口号，就是访问的80端口，因为端口不一致导致跨域请求，所以无法取到我们数据库中的数据。所以我们要在我们的nginx.conf配置反向代理，因为我将server所有接口地址都放在http://111.230.239.103:4001/api里面，所以我们需要将所有请求http://111.230.239.103/api的操作代理到4001端口，这样我们就可以实现我们访问http://111.230.239.103/api/client/articleList的时候，就会将请求代理到http://111.230.239.103:4001/api/client/articleList.

我们在刚才配置的根路径下面新增一个规则，将所有访问api接口的路径代理到4001端口，也就是我们server服务所在的端口，配置成功保存，用XShell重新加载配置文件，然后重新访问博客首页

可以看到博客首页数据可以成功显示出来了，这也就意味着我们前端部署工作到这里也大功告成了。