使用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

1. 禁用root用户

首先添加一个用户，不然禁用默认用户以后，没有用户能够登陆，就只能重装系统了。

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

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

#PermitRootLogin yes

修改成

PermitRootLogin no

修改完成后，重启ssh服务

service sshd restart

1. 测试一下

退出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;
    }
}

1. 重启，完事。

# 重启以前务必检查配置是否正确
/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示例