Ubuntu16.04 編譯安裝nginx及http2 push功能配置使用

1、前置依賴安裝

# 安裝gcc
sudo apt-get install gcc
# 安裝 pcre依賴庫
sudo apt-get install libpcre3 libpcre3-dev
# 安裝 zlib依賴庫
sudo apt-get install zlib1g zlib1g-dev

# 編譯安裝openssl-1.1.1d,這裏可以參考我的另外一篇博客,下面的nginx參數裏面的--with-openssl路徑爲源碼路徑

openssl-1.1.1d源碼編譯安裝博客鏈接

2、下載編譯安裝nginx

cd /usr/local/src
sudo wget http://nginx.org/download/nginx-1.17.6.tar.gz
sudo tar -zxvf nginx-1.17.6.tar.gz
cd nginx-1.17.6/

# 這裏openssl目錄要是源碼的目錄
sudo ./configure --prefix=/usr/local/nginx --with-openssl=/usr/local/src/openssl-1.1.1d --with-stream --with-stream_ssl_module --with-http_ssl_module --with-http_v2_module --with-threads 

3、鏈接符合及nginx常用指令

sudo ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx
# 啓動
nginx
# 關閉
sudo nginx -s stop
sudo nginx -s quit

# 重新加載配置
sudo nginx -s reload

# 指定配置文件
sudo nginx -c /usr/local/nginx/conf/nginx.conf

4、在自定義目錄下測試

# 這裏爲了不污染/usr/local/nginx目錄下文件
# 工作區移動到/opt目錄下
cd /opt
sudo mkdir nginx
sudo cp -r /usr/local/nginx/conf .
sudo cp -r /usr/local/nginx/html .
sudo cp -r /usr/local/nginx/logs .

# 啓動測試
sudo nginx -c /usr/local/nginx/nginx.conf

5、啓用http2

5.1 生成祕鑰對

(參考)

cd /opt/nginx
sudo mkdir ssl

#步驟1:建立服務器的私鑰
openssl genrsa -des3 -out server.key 1024
#步驟2: 創建證書籤名請求csr
openssl req -new -key server.key -out server.csr
步驟3:對於使用上面私鑰啓動具有ssl功能的nginx,有必要移除輸出的密碼
cp server.key server.key.org
openssl rsa -in server.key.org -out server.key
步驟4: 使用上面的私鑰和CSR對證書進行簽名
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
5.2 修改配置
cd /opt/nginx/conf
sudo cp nginx.conf nginx_push.conf
sudo gedit nginx_push.conf
# 修改內容
# 1、註釋掉原有的server 部分
# 2、取消對https server部分的註釋
# 3、修改listen部分爲   443 ssl http2;
# 4、修改ssl_certificate部分地址爲  ../ssl/server.crt;
# 5、修改 ssl_certificate_key部分地址爲 ../ssl/server.key;

完整的server配置

  server {
       listen       443 ssl http2;
       server_name  localhost;

       ssl_certificate      ../ssl/server.crt;
       ssl_certificate_key  ../ssl/server.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location / {
           root   html;
           index  index.html index.htm;
       }
    }
5.3 測試
# 打開瀏覽器輸入
https://localhost/
# 選擇信任後,可以看到welcome 頁面

6、啓用server push功能

6.1 新增push資源目錄

創建web目錄作爲root目錄

cd /opt/nginx/
sudo mkdir web
cd web

創建index.html

# 創建
sudo gedit index.html
# 內容
<html>
<head>
	<title>Hello World</title>
	<script src="/static/js/app.js"></script>
	<link rel="stylesheet" href="/static/css/style.css"">
</head>
<body>
Hello, Http2!
<img src="/static/image/image.png"></body></html>
</body>
</html>

創建靜態資源目錄

sudo mkdir static
cd static
sudo mkdir css
sudo mkdir js

創建style.css

cd css
sudo gedit style.css
# 內容
body {
	margin: 20px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	background-color: #fff;
	line-height: 1.3em;
}
#

cd ..

創建app.js

cd js
sudo gedit app.js
# 內容
console.log("Hello!");
#
cd ..

創建image.png

cd image
# 從別的地方拷貝一張圖片放入
sudo cp 其它路徑的圖片 image.png
6.2 修改conf文件
cd /opt/nginx/conf
sudo gedit nginx_push.conf
# 修改location部分內容
location / {
           root   /opt/nginx/web;
           index  index.html index.htm;
           http2_push /static/js/app.js;
           http2_push /static/css/style.css;
           http2_push /static/image/image.png;
       }
6.3 重啓服務
sudo nginx -c /opt/nginx/conf/nginx_push.conf -s reload
6.4 利用瀏覽器的開發者工具查看協議和push情況
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章