前端aka老师-你单排吧

# 前端必学之Nginx与Linux

# 一、购买服务器

直接上 aliyun.com (opens new window) 购买一台服务器：

image-20210802193101990

点击 下一步：网络和安全组，进入镜像的选择：

image-20210802193247341

选择好镜像后，点击 下一步，进入网络和安全组，这里主要是多加了一项 公网IP，默认是勾选上的，但价格也会接近翻倍：

image-20210802193855467

接下来直接 确认订单：

image-20210802193946547

# 二、工作台

至此，我们完成了购买，然后到你的 云服务器ECS 工作台

image-20210802194203279

选择你购买的云服务器，点击进去。

这里看到你的公网IP，点击进入 管理：

image-20210802194444705

然后点击 重置实例密码，这个密码你需要记住，是你登录服务器的密码。

image-20210802194550734

然后点击 重启。

# 三、Linux基本知识

先来简单学几个Linux指令。CentOS也是属于Linux系统。打开页面右上角的命令行图标：

image-20210802195126798

# 1、登录服务器

执行：

$ ssh root@你的ip
# 然后输入密码，完成登录
1
2

# 2、文件颜色

首先，

这些文件是有颜色的：

  • 蓝色 表示文件夹；
  • 灰色 表示普通文件；
  • 绿色 表示可执行文件；
  • 红色 表示压缩文件；
  • 天蓝色 表示链接文件（快捷方式）；

常用目录的作用如下：

  • bin： 存放普通用户可执行的指令，普通用户也可以执行；
  • dev ： 设备目录，所有的硬件设备及周边均放置在这个设备目录中；
  • boot ： 开机引导目录，包括 Linux 内核文件与开机所需要的文件；
  • home： 这里主要存放你的个人数据，具体每个用户的设置文件，用户的桌面文件夹，还有用户的数据都放在这里。每个用户都有自己的用户目录，位置为：/home/用户名。当然，root 用户除外；
  • usr： 应用程序放置目录；
  • lib： 开机时常用的动态链接库，bin 及 sbin 指令也会调用对应的 lib 库；
  • tmp： 临时文件存放目录 ；
  • etc： 各种配置文件目录，大部分配置属性均存放在这里；

# 3、文件操作

指令 备注
vim <文件名> 编辑某个文件
cat <文件名> 查看某个文件的内容
touch <文件名> 新建某个文件

# 4、vim编辑器

通过 vim <文件名> 即可进入对该文件的编辑模式，按下 i 切换到编辑状态。

想要结束输入，可以按 esc 键，想要退出编辑模式，可以敲下 :wq 或者按快捷键：shift+zz。

在命令模式下按下 i 就进入了输入模式。

在输入模式中，可以使用以下按键取消与显示行号：

功能 命令
行号显示 :set nu
行号显示取消 :set nonu

# 5、杀死进程

查看进程：

$ ps -ef
1

查看到进程中的 PID ，然后执行：

# 正常杀死
$ kill -1 2235

# 强制杀死
$ kill -9 2235
1
2
3
4
5

# 6、SSH 上传/下载文件

SSH 可以通过 scp 命令来上传文件，是 Linux 系统下基于 SSH 登陆进行安全的远程文件拷贝命令，scp 是 secure copy 的简写，可以使用它上传本地文件夹到远程服务器，也可以从远程服务器上下载文件夹到本地：

# 打开你的某个项目

# 上传文件夹到远程服务器
scp -P port -r /local/dir username@servername:/remote/dir
# scp -r ./ root@8.130.25.41:/home

# 从远程服务器下载文件夹
scp -P port -r username@servername:/remote/dir/ /local/dir
# scp -r root@8.130.25.41:/home ./
1
2
3
4
5
6
7
8
9

-r 参数表示递归复制，即复制该目录下面的文件和目录，如果要上传单个文件，只要把 -r 删除。大写的 P 表示的是端口，如果还是默认的 SSH 端口 22 没有更改，则不需要 -P。

注意：这两行代码要在你本机的终端运行，而不是在阿里云的终端。

# 7、FTP上传

你也可以使用ftp工具上传，如 File Zilla (opens new window)。点击即可下载。

使用也很简单：

image-20210802220220354

按这里填写即可登录。然后：

image-20210802220401441

# 四、Nginx

Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。

这里我们重点提一下服务器安装Nginx、node及项目打包上线后产生的跨域问题的解决方案。

# 1、快速安装Nginx

首先，确保自己连接上了服务器 ssh 用户名@公网ip，然后运行：

yum list | grep nginx
1

接着运行：

yum install nginx
1

安装好后 nginx -v 可以查看 Nginx 版本信息。并且使用 rpm -ql nginx 可以查看 Nginx 被安装到了什么地方。

这里有两个文件夹要留意：

  1. /etc/nginx/conf.d/ 文件夹，是我们进行子配置的配置项存放处，/etc/nginx/nginx.conf 主配置文件会默认把这个文件夹中所有子配置项都引入；
  2. /usr/share/nginx/html/ 文件夹，通常静态文件都放在这个文件夹，也可以根据你自己的习惯放其他地方；

# 2、防火墙（如无开启过防火墙，直接忽略本步骤）

安装之后开启 Nginx，如果系统开启了防火墙，那么需要设置一下在防火墙中加入需要开放的端口，下面列举几个常用的防火墙操作（没开启的话不用管这个）：

systemctl start firewalld  # 开启防火墙
systemctl stop firewalld   # 关闭防火墙
systemctl status firewalld # 查看防火墙开启状态，显示running则是正在运行
firewall-cmd --reload      # 重启防火墙，永久打开端口需要reload一下

# 添加开启端口，--permanent表示永久打开，不加是临时打开重启之后失效
firewall-cmd --permanent --zone=public --add-port=8888/tcp

# 查看防火墙，添加的端口也可以看到
firewall-cmd --list-all
1
2
3
4
5
6
7
8
9
10

然后设置 Nginx 的开机启动：

systemctl enable nginx
1

启动 Nginx ：

systemctl start nginx
1

# 3、浏览器访问公网IP

在浏览器输入你的公网IP，无需端口号（默认80），如果看到 Welcome to nginx 之类的界面，就是Nginx安装并启动成功了。

# 4、安装 nvm & node & git

# 下载 nvm，或者看官网的步骤 https://github.com/nvm-sh/nvm#install--update-script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

source   ~/.bashrc    # 安装完毕后，更新配置文件即可使用 nvm 命令
nvm ls-remote         # 查看远程 node 版本
nvm install v12.16.3  # 选一个你要安装的版本安装，我这里选择 12.16.3
nvm list              # 安装完毕查看安装的 node 版本
node -v               # 查看是否安装好了

yum install git   # git 安装
1
2
3
4
5
6
7
8
9
10

# 5、Nginx重启

nginx -s reload  # 向主进程发送信号，重新加载配置文件，热重启
1

# 6、Nginx配置文件

我们一般对Nginx的修改主要就是修改 /etc/nginx/nginx.conf 这个配置文件，nginx.conf 结构图可以这样概括：

main        # 全局配置，对全局生效
├── events  # 配置影响 Nginx 服务器或与用户的网络连接
├── http    # 配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置
│   ├── upstream # 配置后端服务器具体地址，负载均衡配置不可或缺的部分
│   ├── server   # 配置虚拟主机的相关参数，一个 http 块中可以有多个 server 块
│   ├── server
│   │   ├── location  # server 块可以包含多个 location 块，location 指令用于匹配 uri
│   │   ├── location
│   │   └── ...
│   └── ...
└── ...
1
2
3
4
5
6
7
8
9
10
11

通常我会找到server，然后做如下设置：

server {
  listen 80;
	server_name localhost;

	location / {
		root  /usr/local/html;
		index index.html index.htm;
	}
}
1
2
3
4
5
6
7
8
9

这里要确保你在 /usr/local 这个目录下创建了一个 html 文件夹。

# 7、反向代理解决跨域

反向代理是工作中最常用的服务器功能，经常被用来解决跨域问题，首先进入 Nginx 的主配置文件：

vim /etc/nginx/nginx.conf
1

为了看起来方便，把行号显示出来 :set nu ，然后我们去 http 模块的 server 块中的 location / 同级的位置添加：

location /api {
	proxy_pass 跨域地址的baseURL;
}
1
2
3

# 8、开启 gzip 压缩

gzip 是一种常用的网页压缩技术，传输的网页经过 gzip 压缩之后大小通常可以变为原来的一半甚至更小。更小的网页体积也就意味着带宽的节约和传输速度的提升，特别是对于访问量巨大大型网站来说，每一个静态资源体积的减小，都会带来可观的流量与带宽的节省。

这里可以使用 站长工具 (opens new window) 对一个网站查询是否进行过gzip压缩。

image-20210802224537379

可以看到我的这个ip目前是没有进行过gzip压缩的。然后我们如下操作：

cd /etc/nginx/conf.d/
touch gzip.conf
vim gzip.conf
1
2
3

接下来把下面代码粘贴进去：

gzip on; # 默认off，是否开启gzip
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
1
2

然后退出编辑模式，执行：

cd /usr/sbin
./nginx -s reload
1
2

然后再到站长工具测试：

image-20210802225044894

可以看到，我们成功压缩了。

# 9、其他

关于Nginx还有很多亮点，例如：动静分离、负载均衡等等，我们就不再做更多的阐述。

特别鸣谢：

《Nginx 从入门到实践，万字详解！》 (opens new window) 这篇文章给了很多启示，本文部分文字及代码参考了该文章，有兴趣的同学可以去深入阅读。

支付宝打赏 微信打赏
Last Updated: 12/16/2021, 5:56:10 PM