使用nginx部署静态网站

前期准备

• 购买服务器，选择centos7.2以上的镜像
• 修改默认密码

安全设置

由于linux系统默认的用户名root和端口22广为人知，容易被破解攻击，所以需要进行如下的安全设置：

1. 修改默认端口

通过ssh登录linux服务器，修改 /etc/ssh/sshd_config文件。

# /etc/ssh/sshd_config 文件，找到这一行
# Port 22

修改为

Port 3456

3456是我自己定义的端口号。可以定义为1024-65536之间的任何整数。

修改完成后，重启ssh服务

service sshd restart

2. 禁用root用户

首先添加一个用户，否则禁用默认用户之后，没有用户可以登录，就只能重装系统了。

# 新增一个名为 user1 的用户
useradd user1
# 给用户 user1 设置密码
passwd user1
# 输入一个安全性高的密码

然后禁用 root 用户，再次进入 /etc/ssh/sshd_config 文件

#PermitRootLogin yes

修改为

PermitRootLogin no

修改完成后，重启ssh服务

service sshd restart

3. 测试一下

退出linux系统，再登录实验一下：

# 测试能否使用默认的22端口登录, 设置成功！
ssh root@118.24.xxx.xxx
ssh: connect to host 118.24.xxx.xxx port 22: Connection refused

# 测试能否使用root用户登录
ssh root@118.24.xxx.xxx -p 3456
root@118.24.xxx.xxx's password:

# 输入正确的root密码后，提示权限错误，证明设置成功
Permission denied, please try again.

# 用新增加的user1用户，3456端口进行连接，这下成功了
ssh user1@118.24.xxx.xxx -p 3456
user1@118.24.xxx.xxx's password:

nginx

安装

进入linux系统之后，centos下通过yum安装软件包。经过屏幕上输出一长串安装信息之后，nginx就安装成功了！

yum install nginx

# 安装之后，我们检查一下
which nginx
# 这句是输出
/usr/sbin/nginx

# 检查nginx配置是否正确
/usr/sbin/nginx -t 
# 这句是输出
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

启动

启动服务试试

service nginx start

报错了，user1这个用户没有启动系统服务的权限，需要切换到root用户或者使用 sudo 命令临时获取root权限。

# 使用sudo启动
sudo service nginx restart

# 或者切换到root用户
su
# 输入密码
# 启动nginx服务
service nginx start

现在访问服务器的公网ip，就可以看到默认的nginx欢迎界面了。

部署自己的静态网站

建立静态文件

我们约定在用户目录下面建立 data 文件夹用来存放静态文件。

cd /home/user1
mkdir data
cd data
mkdir hello-world
echo 'hello-world' >> touch.html

修改nginx配置

centOs系统的 nginx 的配置文件是 /etc/nginx/nginx.conf，
打开它，修改它:

vi /etc/nginx/nginx.conf

# 复制这一段代码，粘贴(光标移动到第一行，输入20yy，复制20行,移动到最后一行的下一行，按p粘贴)
server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

把复制后的代码修改成这样

server {
    listen       1999;
    server_name  _;
    root         /home/user1/data/hello-world;
    index index.js index.html
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

保存修改，重启 nginx

# 重启之前务必检查配置是否正确
/usr/sbin/nginx -t
sudo service nginx restart

403 错误

在配置完成并且重启之后，再次访问地址，如果出现了 Nginx 403 Forbidden 错误，需要修改
/etc/nginx/nginx.conf 文件,再次重启就好了。

user nginx

修改为

user root

保存修改，再次重启 nginx。现在可以了。

进阶

通过上面的配置，一个最简单的静态网站就可以通过ip+端口号访问了。下面会讲到一些进阶的用法。

histroy模式

如果静态文件是使用了vue react等框架打包而成，并且使用了history模式，那么还需要进行进一步的设置。

打开配置文件，修改后就可以使用history模式了。

vi /etc/nginx/nginx.conf

# 修改刚才自己配置的部分
server {
    listen       1999;
    # 省略...
    location / {
        # 其实只是修改这里，让用户刷新的时候每次都请求index.html。然后通过前端路由去pushState
        try_files $uri $uri/ /index.html;
    }
    # 省略...
}

https支持

https现在已经成为互联网的标配，微信小程序和PWA技术更是要求必须使用https。

使用https，必须先有域名，然后在域名服务提供商那儿申请ssl证书。在申请完域名和证书之后，再来看接下来的步骤

1. 下载ssl证书到本地(.crt和.key两个文件)，文件名修改为自己喜欢的
2. 在 /etc/nginx 目录下面建立 ssl 目录用来存放证书
3. 上传ssl证书到 /etc/nginx/ssl 目录
4. 修改 /etc/nginx/nginx.conf 文件

vi /etc/nginx/nginx.conf

# 修改刚才自己配置的部分
server {
    listen 80;
    server_name 刚才申请的域名;
    return 301 https://$server_name$request_uri;
}
# 新增以下部分
server {
    listen 443;
    server_name 刚才申请的域名;
    ssl on;
    ssl_certificate ./ssl/上传的ssl文件.crt;
    ssl_certificate_key ./ssl/上传的ssl文件.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
    ssl_prefer_server_ciphers on;
    root /home/user1/data/hello-world;
    index index.js index.html index.htm;
    location / {
      try_files $uri $uri/ /index.html;
    }
}

5. 重启，完事。

# 重启之前务必检查配置是否正确
/usr/sbin/nginx -t
sudo service nginx restart

安全

安全性设置在http内，

http {
    #隐藏 Nginx 的版本号
    server_tokens off;
}

性能

• 复用
• 压缩

http {
    # 复用客户端线程轮询
    use epoll;
    
    # 可以上传gz文件使用，而非每次都让nginx来压缩
    gzip_static on;
    
    # 开启 gzip 压缩
    gzip on;
    # 文件大于1KB才开启压缩，否则可能越压越大
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 禁用客户端为 IE6 时的 gzip功能。
    gzip_disable "msie6";
}

• 缓存

webpack打包后的静态文件，大部分存储在 /static 文件夹下面，所以对里面的资源设置好缓存就好了

server {
    listen       1999;
    # 省略...

    location /static {
        # .ico和html文件因为没有版本号，所以不要缓存
        if ($request_filename  ~* .*.(ico|html?)$) {
            expires -1s;
            add_header Cache-Control no-cache;
        }
        # 使用前端工具打包的图片文件大部分拥有版本号，可以缓存比较久
        if ($request_filename  ~* .*.(gif|jpe?g|png|swf|webp)$) {
            expires 30d;
        }
        if ($request_filename  ~* .*.(js|css)$) {
            expires 30d;
        }
    }
    location / {
        # 省略 ...
    }
    # 省略...
}

• 其他

http {
    # 开启高效文件传输模式
    sendfile on;
    # 关闭日志
    access_log off;
}

例子

这里有一个配置完成后的例子：
nginx.conf示例