前端工程化预备知识(上)

前言

现在的企业而言大多数都是用的 Linux 系统做服务器,用 Windows 做服务器的不太多。
前端工程化需要实现,第一步就是先把 Linux 系统搞清楚。

Linux 系统

1. 认识Linux

实际上 Linux 和 Windows 在本质上是没有区别的,都是操作系统;操作系统就是用来隔离硬件平台的,为用户提供一个人机对话的平台,有的是带界面的(windows、linux),有的是不带界面(嵌入式、工业控制之类的就有几个按钮加几个数码管)

2. 深入 Linux -- 安装、远程登录、互传文件

1. Linux kernel

https://www.kernel.org/ 这个是 Linux 内核的官网
现在所说的 Linux 一般指的是那种打好包的装上就可以用的,实际上 Lindex 严格来说指的是 kernel(内核),kernel 提供的是一些基本的功能,不带图形界面的,比如说:文件系统、网络进程管理等等这些核心的功能都在 kernel 里面,他是用 C 语言写的,如果对这个源代码感兴趣的可以去看 0.几的老的版本,因为新的版本占的内存特别大。压缩过的就得几百兆,所以 Linux 特指的就是 kernel,也就是他的内核,但是我们现在在网上下载的用的都是 Linux 发布版

2. Linux 发布版

这个才是现在我们用到的 Linux ,有 Ubuntu、Centos、红帽这三种常用的版本,国内的话一般喜欢用 Ubuntu 因为他的桌面还是比较好看的,Centos 的桌面看上去很别扭

Ubuntu

https://www.ubuntu.com/index_kylin ubuntu 官网
如果是想学的话建议装 server 版,如果是想操作方便的话装 desktop 版

前端工程化预备知识(上)_第1张图片
image.png

Centos

https://www.centos.org/ centos 官网
安装 centos 的话建议装 mini 版的,他就是一个最基础的操作系统,装到虚拟机上的话占得空间也很小,速度相对而言也快一些,centos 实际上是 通过 红帽的开源源代码重新编译过来的

前端工程化预备知识(上)_第2张图片
image.png

红帽的话不太建议安装,它是付费软件镜像不太好找

总结:安装的话建议最好都装 server 版,无界面的版本,因为在服务器上一般都是装的服务器版,他的特点就是非常小,没有那些没有用的组件,而且在操作的时候都是通过一个终端去连上去的,在终端使用的都是 命令行 ,所以建议如果装 Ubuntu 的话就装 server 版的,Centos 的话就装 mini 版的,在这两个系统中最大的区别就是常用的装包命令

//centos:
yum install samba
//ubuntu:
app-get install samba

3. 如何连接到操作系统上?

想要连接到操作系统上就需要安装一些终端软件,用这些终端软件通过 ssh 命令去远程连接
ssh 他是一种被加密的网络协议,他是一条被加密的链路,这样就可以保证在敲命令或者是登录的时候你的数据不会被外泄,在 ssh 之前是 telnet 协议,但是 telnet 协议是透明的,就是可以通过在网络上抓包,把这条链路上的数据全都看到,所以这个协议过时了,现在用的都是 ssh 协议

4. ssh 怎么登录上去呢?

通过下面的一些终端控制软件

  1. Windows 系统下

putty (并不是太好用,UI不好看,功能也不多)

这个软件可以在百度搜索并下载

Xshell(windows 下最好用的终端控制软件)

官网:http://www.netsarang.com/products/xsh_overview.html ,点击 download 就可以下载了,但是需要随便填一些信息,然后因为这是一个商用软件,所以需要自行寻找 ZCM

前端工程化预备知识(上)_第3张图片
image.png

这个 Xshell 其实是该公司推出来的软件其中的一个组件

前端工程化预备知识(上)_第4张图片
image.png

如果觉得官网上的下载比较繁琐,也可以到百度搜索并下载,这里我是在百度进行下载的,把安装包一路 next next 安装完成

下载成功后,打开 Xshell

前端工程化预备知识(上)_第5张图片
image.png

我们需要先添加一个服务器的地址,前提是 Linux 必须装好了(可以装在虚拟机上),然后还得将 ssh 服务打开, 如果装的是桌面版的话 ssh 服务是默认关闭的(第一个坑

配置 Xshell

左上角新建(Alt + N) -> 名称(test) -> 协议(SSH) -> 主机(Linux 的 IP 地址) -> 端口(22 ssh 协议的默认端口) -> 确定,这个时候就会生成下面的会话窗口

前端工程化预备知识(上)_第6张图片
image.png

连接服务器

点击上图会话窗口中的【连接】,会弹出下面的一个弹窗,连接的时候服务器会把服务器端生成的一个字符串传过来,这个字符串就是主机(服务器 Linux)的指纹,这个指纹就是为了来标示那个服务器的唯一身份,它是随机生成的,每一个主机都是不一样的,他是为了防止你登录到了一个错误的主机上(类似于别人伪装了一台服务器,骗你去登录这种的),在这里我们选择【接收并保存】,然后会要求我们输入用户名、密码 可以选择记住,然后我们就登录成功了

前端工程化预备知识(上)_第7张图片
image.png

保存 口令

点击当前窗口的属性(Alt + P) -> 连接 -> 用户身份验证 -> 方法(如果是用户名的话就选择 Password,如果是密钥的话就选择 Public Key) -> 用户名 -> 密码

前端工程化预备知识(上)_第8张图片
image.png
前端工程化预备知识(上)_第9张图片
image.png

(第二个坑)规避因为中文而产生的编码乱码问题,修改编码格式为 utf-8,如果是你的 Linux 系统安装的时候你把编码格式改为例如:GBK ,要把编码格式改为 GB18030 或者 GB2312,改过编码格式之后就没问题了,可以使用 Xshell 去远程登录服务器(Linux)了

前端工程化预备知识(上)_第10张图片
image.png

如果觉得字号太小还可以修改字号


前端工程化预备知识(上)_第11张图片
image.png
  1. MAC 系统下

在 Windows 系统下可以安装 cmder 来模拟 MAC 系统的终端,下载时选择 Full 版本,这样可以在 windows 下用 ssh 命令进行远程登录了(由于楼主的是 windows 系统,所以用的是 cmder 终端软件来模拟的 MAC 系统)

前端工程化预备知识(上)_第12张图片
image.png

在MAC 系统下可以直接在终端进行登录,也可以下载一个比较不错的终端软件 item2(建议安装这个终端软件,配置起来比较的灵活)

如果在 MAC 电脑或者是 Linux 电脑上登录的话,如何在服务器之间来回的跳?

用的就是 ssh 命令,下面是 ssh 命令登录示例

//ssh 用户名@想要登录的服务器的IP地址
ssh [email protected]
//输入密码

在真正的 MAC 系统下,会有一个提示“指纹”验证的一句话,敲 yes 就可以了,然后输入你登录的账号的密码就登录成功了

前端工程化预备知识(上)_第13张图片
image.png

5. 如何真正的登录到远程服务器上呢?

上面只是介绍了一些工具和登录所使用到的命令,但是在实际过程中需要需要在安装的 Linux 服务器上(楼主安装的是 centos 7+)用到下面的步骤

  1. 检查 IP 地址
//这个命令在只能在低版本中使用
ipconfig
//这个命令适合于高版本中使用 我的 7+ 用的就是下面 这个
ip address

![image.png](http://upload-images.jianshu.io/upload_images/6264932-6ae0d89d224cb462.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2.  查看 ssh 状态

//systemctl 是 Linux 下用来管理服务的命令 status[状态] stop[停止] start[启动] restart[重启]
//ssh 后面的 d 是 daemon 的意思 因为这些服务在 Linux 下都是守护进程的
systemctl statu sshd

前端工程化预备知识(上)_第14张图片
image.png

上图显示的是 running 正在启动中,如果是 dead 的话,就要使用启动命令将它启动

systemctl start sshd

还有一个坑是 sshd 有的默认是不启动的,需要把它改成默认是启动的

//将 ssh 服务改为默认启动的
systemctl enable sshd
//将 ssh 服务改为默认是不启动的
systemctl disable sshd

  1. 之后就可以使用之前的 ssh 命令登录了
ssh [email protected]
Enter your password

6. 接下来是 scp 命令,现在的环境是通过 Xshell 登录到了远程服务器上,然后本地使用的是 Cmder

这个命令是上传文件或者是从远程服务器下载用的,他用的协议也是 ssh 协议

  1. 在 Xshell (连接上了远程服务器的终端中)操作
//查看当前的 home 目录下的文件列表
ll
//查看当前的目录在哪个路径下
pwd

![image.png](http://upload-images.jianshu.io/upload_images/6264932-c7a564f60d7e9430.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.  接下来回到 Cmder (本地终端)中进行 `scp` 命令上传操作

cd Desktop
ls

前端工程化预备知识(上)_第15张图片
image.png

这里我们选择上传 timetest.js 文件

// ./ 表示在当前目录下 后面加本地想要操作的文件名称
// 后面的是你要上传到服务器的位置  用户名@IP地址:服务器上放文件的路径名称
scp ./timetest.js [email protected]:/root
Enter your password

![image.png](http://upload-images.jianshu.io/upload_images/6264932-08f80be4f1749ac7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


接下来到 Xshell 中检查 /root 目录下是否有了该文件

ls

image.png
  1. 如果要想从服务器上下载文件到本地,还是使用 scp 命令,只不过顺序发生了变化
// 需要将你想要操作的文件的源路径放在前面  后面跟存放下载文件的路径
scp [email protected]:/root/test.txt ./
Enter your password

![image.png](http://upload-images.jianshu.io/upload_images/6264932-54c50a467dd067fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

然后在本地查看是否成功

ls

前端工程化预备知识(上)_第16张图片
image.png
  1. 上面的都是传文件,如果是传文件夹的话加一个 -r 参数就可以了
scp -r ./test_key [email protected]:/root
Enter your password

![image.png](http://upload-images.jianshu.io/upload_images/6264932-5f46721e1501b0f4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


在 Xshell 中查看

ls

image.png

7. 还有就是防火墙有时是导致登录不上的一个原因(这算一个坑)

  1. 防火墙的相关命令

//这个是 centos 7.0 之前的防火墙命令
iptables
//这个是 centos 7.0 + 的防火墙命令 楼主的就是这个
firewall

//查看状态
systemctl status firewalld
//停止防火墙
systemctl stop firewalld
//开启防火墙
systemctl start firewalld

3. 深入 Linux -- 进程、线程

1. 什么是进程?

如果要运行 Linux 最重要的一个东西就是 进程

进程不是程序,它是程序运行起来的状态,程序是静态的,程序也不是代码(一些脚本语言除外 如:Node shell Python等),程序是编译之后的那个二进制文件,而进程是这个二进制文件运行起来,它跑起来之后就变成了一个进程,像 windows 下任务管理器中的进程一样的东西,下图就是一个进程列表,它是动态的,它时刻都是动的 所消耗的 CPU 内存 I/O等等

前端工程化预备知识(上)_第17张图片
image.png

2. 线程

它是比进程更小的一个执行单位,进程是一个执行单位,而线程比进程更小,一个进程只能可以有很多个线程,线程是依赖进程的

一个程序可以生成多个进程,例如 QQ,这个进程会有很多的线程,线程会帮助进程实现多任务,当然进程自己也可以实现多任务的

进程是如何实现多任务的,就例如 QQ 聊天中的动图,动图的渲染这个就是一个线程专门来做的;还有聊天的信息,也是有一个线程专门去监听键盘操作的;还有网络通信这种的也是一个线程单独去做的;也就是说一个进程他需要做很多事儿,但是如果只是一个独立的操作序列的话,这些事儿就必须互相等待,为了减少等待就可以将它分成多个线程,每个线程去做自己要做的事情,这样就可以感觉到很流畅,如果没有线程的支持的话一个操作就需要等很久

4. 深入 Linux -- 如何在 Linux 下去结束一个进程?

在 windows 下可以通过任务管理器去强行结束一个进程,但是在 Linux 下没有图形界面,所以就需要用到相应的命令来结束某个进程,有两个命令 ps kill

1. 结束进程 -- ps 命令

如果你在 Linux 下登录的当前用户不是 root 的话 敲 ps 命令,他显示的只是当前用户的进程

1 . 查看进程,root 目录下跑着很多的进程

//在 root 用户下查看所有的进程
ps aux

![image.png](http://upload-images.jianshu.io/upload_images/6264932-0f882826b38efaed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.  筛选某个进程

// | 是一个管道命令 把前面 ps aux 输出的全部进程通过这个管道输出给后面的命令
// grep 是帮助我们进行筛选的
//假设我们需要找的是一个 java 进程
ps aux | grep java


这样就可以把 java 进程给筛选出来了,但是下图的筛选结果其实是没有找到的,下图唯一显示的也是我们上面写的命令所产生的那一行命令

![image.png](http://upload-images.jianshu.io/upload_images/6264932-83f30d3677368ede.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

下面我们再筛选一个 firewall 防火墙进程,这次成功找到了

ps aux | grep firewall

image.png

上图中的 “678” 其实指的就是,防火墙进程的端口号,接下来就可以使用 kill 来杀掉这个进程了

2. 杀掉某个进程 -- kill 命令

  1. 这里以上一步筛选出的 防火墙 进程为例
//678 指的是 firewall 进程使用的端口号
kill 678

之后再去查看 firewall 进程就会发现没有了,说明上面的 kill 命令执行成功了

image.png

  1. 但是有一些比较顽固的进程 kill 命令是会执行失败的,这个时候就可以在 kill 后面加一个参数 -9,这个就是强制去杀,专门用来对付那些比较顽固的程序的,一般来不要轻易去用这个,这个 -9 其实是一个强制终止信号,这个是 Linux 中的一个相互之间通信的机制,一般来说直接 kill 就可以了
kill -9 678

3. 检查端口冲突 -- netstat(注意 centos 7 + 默认是没有这个命令的,需要自行装包)

这个命令出现是在端口冲突的时候,用来检查端口的

  1. 装包

参考链接:解决Centos7找不到ifconfig和netstat命令

//把net-tools包装上就好了
yuminstall net-tools
//中间需要依次输入
y

![image.png](http://upload-images.jianshu.io/upload_images/6264932-be4ae1c6add6ca5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![image.png](http://upload-images.jianshu.io/upload_images/6264932-606e5b249f23b3e4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2.  直接敲 `netstat` 这个命令的话出来的东西会非常的多

netstat

前端工程化预备知识(上)_第18张图片
image.png
  1. -an,显示的会有直接的 IP地址,如果不加的话显示的可能是一个域名
netstat -an

![image.png](http://upload-images.jianshu.io/upload_images/6264932-b183ee0ec740b79d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


4.  筛选端口 套路和上面的 `kill` 命令差不多

// | 是一个管道命令 grep 进行筛选
netstat-an | grep 80

前端工程化预备知识(上)_第19张图片
image.png

友情提示:

  1. 在 Linux 命令行中千万不要按 ctrl + s 这个是冻结的命令,按了之后你的终端会停止运行,会被冻结 ,如果不小心按了可以用 ctrl + q 去恢复

4. 实现 Linux 自动化远程登录(免密登录)

1. 首先需要了解的是机制

拿 Xshell 这个终端软件为例子来说

前端工程化预备知识(上)_第20张图片
image.png

属性 -> 用户身份验证 -> 方法,之前我们选择的是 Password 方法,下面的 Public Key 是公钥,如果想要自动化的远程登录的话一定要用这个公钥,去生成一个公钥才可以,有了公钥就必须有有一个相对应的私钥才可以,组成一个密钥对

2. 怎么去生成 “公钥” 和 “私钥”?

加密:一般的话加密是要对应解密的,如果你生成了一个没法解密的东西,那么解密是没有意义的
公钥:公开出去的东西,传到服务器上去
私钥:必须得保密,保存在自己的电脑上

  1. 为什么会需要种免密登录的机制呢?

因为我们在自动化部署的时候,是需要脚本去跑的
如果说你的脚本在往服务器上传文件的话没有私钥,那就必须得输入口令,这个输入口令也不能把它写到脚本里去
而且你也不能手动去敲这个密码,因为脚本在跑起来的时候他可能是自动跑的,他在自动跑的时候你是没有办法去打开这个终端的,他就是通过一个钩子去触发的,根本就没有打开终端的机会,是没有办法输入密码的,所以就需要 “公钥” 和 “私钥” 的密钥对,它们就可以绕过这个机制去

  1. 使用命令 ssh-keygen 生成密钥对,使用 Cmder 在桌面新建一个 keys 文件夹 并进入到该目录下
cd Desktop
mkdir keys
cd keys
// -t 使用什么加密算法 默认使用的是 rsa 
// -C 后面是你想要登录到服务器端使用的用户名
// -f 后面是你生成的文件名称
ssh-keygen -t rsa -C "root" -f "mykeys_rsa"

![image.png](http://upload-images.jianshu.io/upload_images/6264932-02a2fbbcc4560fd3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 
> 这个时候会有一个提示:让你给这个秘钥文件再加个密码,也就是说在你想用这个秘钥文件的时候你必须得输入密码才可以继续使用它,在这里我们是不能填这个密码的,如果填了的话,在脚本自动跑的时候任然需要提供一个密码,这样做的免密登录就没有意义了,所以在这里直接回车 下面是让你再输入一次密码 再回车 后面连着回车就可以了
![image.png](http://upload-images.jianshu.io/upload_images/6264932-3bb7678e9bb49968.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 
> 这里提示生成了一个公钥和私钥 .pub 得是需要传到服务器上的公钥
> 这个时候再查看 `ls` 就会发现生成成功了
![image.png](http://upload-images.jianshu.io/upload_images/6264932-fc34a12bb2bb3760.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


#### 3\. 如何使用上面生成的 “公钥” 和 “私钥”?

1.  首先处理 “公钥”(.pub 后缀的文件),先把公钥传到你想要登录的服务器上去

2.  先在登录上服务器端,在终端在敲下面的命令

//先找 .ssh 目录 以 . 为开头的都是隐藏文件 这个是 Linux的规则
ls -a
//进入 .ssh 目录中
cd .ssh
//查看文件
ls
//查看当前路径
pwd

前端工程化预备知识(上)_第21张图片
image.png
  1. 再在 Cmder 中 使用 scp 命令将生成的公钥传到上面查看到的服务器的目录下
scp mykey_rsa.pub [email protected]:/root/.ssh

![image.png](http://upload-images.jianshu.io/upload_images/6264932-ed5e0ea58df9adfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4.  在服务器端查看是否上传成功

ll -a

前端工程化预备知识(上)_第22张图片
image.png

发现文件上传成功了,然后前面的权限也是正确的,必须是 root 可读可写 其他的用户只可以读取

  1. 还需要将 公钥 文件中的内容 生成一个固定名称的文件,如果文件不存在会自动创建的,如果已经存在也会将内容替换掉的
//下面是组合命令 > 是将前面 cat 到的文件内容原封不动的追加到后面文件内容的末尾
//authorized_keys 里面存放的就是公钥
cat mykeys_rsa.pub >> authorized_keys

image.png
  1. 接下来要在 Cmder (客户端)处理 私钥(没有 .pub 后缀的文件)
    把这个私钥文件也放在本机的 .ssh 目录中去

在 MAC 或者 Linux 下使用下面的命令

// ~ 表示的是当前登录用户的 home 目录下 windows 下不支持这个命令
cp mykeys_rsa ~/.shh
//进入 .ssh 目录
cd ~/.ssh
//查看是否成功
ll -a

![image.png](http://upload-images.jianshu.io/upload_images/6264932-ac0f5a21d60126c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 
> 这个文件(私钥文件)的权限必须是 600 只有当前用户才可读可写,其他用户什么权限都没有,否则的话 ssh 不让你用这个文件

接下来需要配置 上图 中的 config 文件

配置config文件是在本地服务器配置的
vim config

前端工程化预备知识(上)_第23张图片
image.png

User 你自动登录的时候是以哪个用户名登录的
Host 这个设置了以后,是给服务器取了一个别名,这个别名的使用方法也很简单:在我们使用 ssh 命令自动登录的时候直接 敲 ssh yourname 就可以登录成功了
HostName 它可以是被解析的域名,也可以是一个 IP 地址
Port 这个是登录端口,这里填 22 就可以了
StrictHostKeyChecking 这个是不是做热键检查,一般填 no 就可以了
IdentityFile 私钥文件的路径
IdentitiesOnly 维持住你的 ssh 连接,防止长时间不动被踢
Protocal 这个后面的是协议版本
后面的东西直接照着图上的来就可以了
这样在终端使用 ssh 就可以免密登录了

在Windows 下如何操作 -- 利用 Xshell 终端软件,这里使用 Cmder 是无法实现免密登录的

属性 -> 用户身份验证 -> 方法 -> Public Key

前端工程化预备知识(上)_第24张图片
image.png

浏览 -> 找到你的私钥文件选中 -> 确定 -> 确定

前端工程化预备知识(上)_第25张图片
image.png
  1. 通过脚本的方法实现 Linux 自动化远程登录(免密登录)

上面的是在一台 MAC 或者 Linux 下自动的通过秘钥远程登录到一台服务器上的实现方法,上面用的是 修改 config 文件的方法,还可以通过脚本的方法实现自动登录

  1. 通过脚本怎么去做?

实际上在写自动登录脚本的时候,就不能随意地去配置 config 文件了,因为这个 config 必须得对服务器有一个完全的权限才可以动他,而以后需要深入的自动部署是使用的一个第三方的自动部署平台
第三方的自动部署平台是不允许你去操作 config 配置文件的,所以就应该把 私钥 通过一种加密算法先去加密,然后再去传上去,在服务器上他再自动的去解密,这个步骤是固定的,然后你再通过脚本去调这个 私钥 文件

使用脚本去调 私钥文件 的命令

// -i 指定你使用的是哪个私钥文件  后面跟私钥文件名  
//后面的就是你想要登录的服务器端的 用户名@IP地址
ssh -i mykeys_rsa [email protected]
//因为上面配置的免密登录就不需要再输入密码 之久就登录成功了

![image.png](http://upload-images.jianshu.io/upload_images/6264932-34def89cc575c34b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


实际上使用在调这个 私钥文件 的时候是需要脚本去进行加密操作的,这个后面深入的时候会去了解

#### 友情提示:

1.  如果想要实现自动化部署的话,还需要掌握 SVN 和 GIT ,需要会熟练的敲常用的命令 windows 下使用 下图的小乌龟就可以
![image.png](http://upload-images.jianshu.io/upload_images/6264932-ea8ed7bd16c4ad14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2.  下图是整个的过程和一些需要躲过的 “坑”

![image.png](http://upload-images.jianshu.io/upload_images/6264932-ae142760413e12ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

你可能感兴趣的:(前端工程化预备知识(上))