# 前端必学之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