使用nginx部署静态网站

2022年01月16日 阅读数:6
这篇文章主要向大家介绍使用nginx部署静态网站,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前期准备

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

安全设置

因为linux系统默认的用户名root和端口22广为人知,容易被破解攻击,因此须要进行以下的安全设置:javascript

  1. 修改默认端口

经过ssh登陆linux服务器,修改 /etc/ssh/sshd_config文件。css

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

修改成html

Port 3456

3456是我本身定义的端口号。能够定义为1024-65536之间的任何整数。前端

修改完成后,重启ssh服务vue

service sshd restart
  1. 禁用root用户

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

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

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

#PermitRootLogin yes

修改成linux

PermitRootLogin no

修改完成后,重启ssh服务webpack

service sshd restart
  1. 测试一下

退出linux系统,再登陆实验一下:nginx

# 测试可否使用默认的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示例