基於nginx的靜態網頁部署的實現

2022-09-28 19:15:15 字數 1720 閱讀 7055

背景:

一串行的html網頁需要部署

基於nginx的部署:

本文採用的基於openresty的nginx 配置。

簡單地配置 nginx 的配置檔案,以便在啟動 nginx 時去啟用這些配置即可實現對於編寫好的html網頁的點選跳轉訪問。而本文的重點也是於此。

配置方式1:

nginx 的配置系統由乙個主配置檔案和其他一些輔助的配置檔案構成。這些配置檔案均是純文字檔案,一般地,我們只需要配置主配置檔案就行了。/usr/local/openresty/nginx/conf下的配置檔案修改如下:

配置資訊:

}建立乙個目錄,例如: /home/liujiepeng/workspace/html/etc/resource/html/ 然後在這個 html資料夾下可以放置你需要部署的靜態頁面檔案,例如 html下我有 google、baidu、liujiepeng這三個資料夾,其中 server 字段配置如下:

server

這裡每個資料夾下面的靜態頁面檔名都是 home.html 。這樣配置的話,例如當你訪問 www.example.com/google/ 時,nginx 就會去 root指定的目錄下的 google 資料夾下尋找到 home.html 並把 google 頁面返回,同理,訪問 www.example.com/baidu/ 時,會尋找到 baidu資料夾下的 home.html 並把 baidu頁面返回。

而在 googleqhvcjvdq、baidu、liujiepeng 資料夾的同級目錄上,再新增你的網域名稱首頁 home.html 時,訪問 www.example.com 時就會返回了。

這裡唯一美中不足的是,訪問網域名稱中 www.showzeng.cn/zhihu 末尾會自動加上 / ,在瀏覽器中按 f12 除錯會發現 www.showzeng.cn/zhihu 為 301 狀態碼,因為 index.html 是在 zhihu/ 資料夾下,所以在搜尋過程中會重定向到 www.showzeng.cn/zhihu/

配置方式2:

這裡需要注意的是 http 上下文裡的 server 上下文。

server

}這裡的 root 字段最好寫在 location 欄位的外邊,防止出現無法載入 css、js 的情況。因為 css、js 的載入並不是自動的,nginx 無法執行,需要額外的配置來返回資源,所以,對於靜態頁面的部署,這樣做是最為方便的。

這裡對 root 作進一步解釋,例如在伺服器上有 /home/liujiepeng/workspace/html/etc/resource/html/,其下有 index.html 檔案和 css/ 以及 img/ , root /home/liujiepeng/workspace/html/etc/resource/html/ 這配置語句就將指定伺服器載入資源時是在 /home/liujiepeng/workspace/html/etc/resource/html/ 下查詢。

其次, location 後的匹配分多種,其各類匹配方式優先順序也各不相同。這裡列舉一精確匹配例子:

server

}

拿Nginx 部署你的靜態網頁

emmmm,作為乙個前端開發時刻想著,怎麼把自己寫的東西,丟到自己的伺服器上面,然後展示給別人看。下面我就簡單直白的寫下,如何用 nginx 部署你的靜態 事前準備 雲伺服器,我的是阿里雲 碼雲或者 gihub 用來存放你的 事前配置 既然你有了雲伺服器 我就當是你ubuntu 系統哦 然後並且通過...

github pages部署靜態網頁

如果你的專案只是乙個靜態 就沒有必要再去整什麼伺服器,github pages 提供了搭建靜態 的功能 1.搭建簡單而且免費 2.支援靜態指令碼 3.可以繫結你的網域名稱 4.diy自由發揮,動手實踐一些有意思的東西git,markdown,bootstrap,jekyll 5.理想寫博環境,git...

搭建Nginx靜態網頁

1.搭建http靜態伺服器環境 搭建靜態 首先需要部署環境。下面的步驟是關於在伺服器上通過nginx部署http靜態服務。安裝nginx 在centos上,可直接使用yum來安裝 yum install nginx y安裝完成後,使用nginx命令啟動 nginx nginx此時訪問雲主機位址就可以...