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