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

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,密码为服务器密码,FileZillaXShellputty其实都是连接云服务器进行操作,所以配置信息都是一致的。

可以看到,我们已经进入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 停止id0的进程
  6. pm2 list 查看所有当前正在运行的进程
  7. pm2 show 0 查看id0的进程
  8. pm2 logs 0 显示id0 的进程日志
  9. pm2 logs xxx.js 显示xxx.js进程的日志
  10. pm2 logs 显示所有日志

接下来我们来看看如何使用这些命令,首先在XShell中启动我们的server进程,项目依赖于serverbin文件夹的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服务成功启动了,我们可以在XShellpm2对我们启动的服务进程进行管理。

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

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

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

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

可以看到,在我们的client项目下,生成了一个blog文件夹,我们只需要把这个文件夹部署到我们nginx80端口,我们前端的部署工作就可以大功告成了。接下来打开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重新加载配置文件,然后重新访问博客首页

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

原文发布于微信公众号 - 周先生自留地(zhanyue_org)

原文发表时间:2019-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券