使用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 [e-mail]
ssh: connect to host 118.24.xxx.xxx port 22: Connection refused

# 測試能否使用root用戶登錄
ssh [e-mail] -p 3456
[e-mail]'s password:

# 輸入正確的root密碼后，提示權限錯誤，證明設置成功
Permission denied, please try again.

# 用新增加的user1用戶，3456端口進行連接，這下成功了
ssh [e-mail] -p 3456
[e-mail]'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示例