顯示具有 http-server 標籤的文章。 顯示所有文章
顯示具有 http-server 標籤的文章。 顯示所有文章

2025年10月1日 星期三

npm 反向代理 http 服務 cockpit (自動更新SSL)

使用 Nginx Proxy Manager(NPM)做反向代理並自動更新 SSL 憑證

這是連續的關於架設網站的系列

  1. 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
  2. 使用 duckdns 轉發自建的靜態網頁伺服器
  3. npm 反向代理 nginx 靜態網站 (自動更新SSL)
  4. npm 反向代理 http 服務 portainer (私簽SSL)
  5. npm 反向代理 http 服務 cockpit (自動更新SSL)



這是接續 npm 反向代理 nginx 靜態網站 (自動更新SSL) 的進階篇,前面的東西不再重複,記得先回到這篇做完才接著繼續看這裡

在上一篇已經完成網站的建制,現在要把改成一個實際的別人做的專案做練習
這裡使用 cockpit 當範例,創建一個 duck.dns 對外網域的網站

這篇跟直接反向代理 nginx 的那篇差異在於,範例用的靜態網站完全沒有安全限制所以不需要特別處理,這裡抓一個正常有安全限制的服務 cockpit 來當範例



安裝 cockpit

這個有被內建在 ubuntu 中直接用 apt 就可以安裝了

sudo apt install cockpit
sudo systemctl enable --now cockpit.socket

安裝好之後就可以用 http:\localhost:9090 直接打開了



反向代理設定注意事項

在使用 Nginx Proxy Manager 等反向代理時,需要在 cockpit.conf 中進行以下設定:

  1. AllowUnencrypted = true - 允許後端 HTTP 通訊
    由於反向代理與 Cockpit 之間通常使用未加密的 HTTP 連接,此設定讓 Cockpit 接受來自代理服務器的 HTTP 請求,而 SSL/TLS 加密則由前端代理統一處理。
  2. ProtocolHeader = X-Forwarded-Proto - 識別真實協議類型
    反向代理會通過 X-Forwarded-Proto header 告知 Cockpit 用戶端實際使用的協議(HTTPS),確保 Cockpit 生成正確的重定向 URL 並避免瀏覽器混合內容警告。
  3. Origins = https://your-domain.com - 限制跨域請求來源
    明確指定允許的域名以防止 CSRF 攻擊,切勿使用 Origins = https: 或 Origins = *,否則任何第三方網站都能向您的 Cockpit 發送請求,造成安全風險。


編輯 cockpit.conf

sudo nano /etc/cockpit/cockpit.conf

輸入以下 (第三行記得改成自己的網域)

[WebService]
AllowUnencrypted = true
ProtocolHeader = X-Forwarded-Proto
Origins = https://cockpit.yourdomain.com

然後存檔即可



npm 反向代理

這裡用上一篇已經生成的網域就好,回到 npm 的 proxy 頁面把 Forward Port 從 8081 改成 9090 即可續用。

然後再瀏覽你自己的網域 https://chgsite.duckdns.org 應該就能看見你的網站了







2025年9月28日 星期日

使用 npm 反向代理 自簽SSL 的 https 服務 (portainer)

使用 npm 反向代理 自簽SSL 的 https 服務 (portainer)

這是連續的關於架設網站的系列

  1. 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
  2. 使用 duckdns 轉發自建的靜態網頁伺服器
  3. npm 反向代理 nginx 靜態網站 (自動更新SSL)
  4. npm 反向代理 http 服務 portainer (私簽SSL)
  5. npm 反向代理 http 服務 cockpit (自動更新SSL)



繼上一篇 CHG: 使用 duckdns 轉發自建的靜態網頁伺服器

已經介紹了如何使用 duckdns + npm 架設靜態網站,這次實際來跑一個服務測試
這篇跑的是自簽SSL來做,由於是自簽無法公開出去需要自行加入到信任區



安裝 portainer

安裝請參考這篇文章
CHG: 在 docker 中安裝 Portainer 管理介面

非企業環境本地間的通訊就不多架一層 https 直接用 http 當作範例

只需要做到可以使用 http://localhost:9000 能看到管理介面即可


自簽SSL

建立專屬的 CA(Certificate Authority)
CHG: 利用同一個CA自簽SSL憑證

在這一步你必須產出屬於你自己的域名的簽證

例如 portainer.chg


這個只是要在內網跑的私有域名沒有要公開出去,可以完全自定義的


npm載入自簽證書

參考自上一篇
CHG: 使用 npm 反向代理內部 nginx 的靜態網站為 https


架設好 npm 之後,再來進入它的SSL管理介面


載入剛剛創建的金鑰後存檔



再來新增一個反向代理


填上剛剛創建的域名與 portainer 的連接埠 9000


在SSL分頁頁選擇剛剛建造的憑證


然後存檔就設定完畢了


瀏覽自簽網址的 portainer

再來還需要搞定兩件事情就是 dns 與 信任自簽憑證

使用管理員打開 powershell 輸入以下命令編輯 host 檔案

notepad C:\Windows\System32\drivers\etc\hosts

在最底下新增一行

127.0.0.1   portainer.chg

這裡網址改成你自己的區網IP,如果是同一臺基器用 127.0.0.1 即可

存檔之後再來找到你的憑證,對他按右鍵安裝憑證


然後選擇本機


然後選擇 “授信任的憑證授權單位”


下一步即可安裝好了

然後需要你重啟一下瀏覽器,這樣才能重新載入剛剛安裝好的憑證

再來使用 https://portainer.chg 就可以打開 portainer 管理介面了



打不開的話檢查清單看一下

  • npm 是否設置正確
    • proxy設置
    • ssl設置
  • SSL憑證是否安裝到指定位置
  • 安裝後是否重啟瀏覽器
  • 系統 Host 網域是否設置正確



2025年8月15日 星期五

使用 npm 反向代理內部 nginx 的靜態網站為 https

使用 npm 反向代理內部 nginx 的靜態網站為 https

這是連續的關於架設網站的系列

  1. 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
  2. 使用 duckdns 轉發自建的靜態網頁伺服器
  3. npm 反向代理 nginx 靜態網站 (自動更新SSL)
  4. npm 反向代理 http 服務 portainer (私簽SSL)
  5. npm 反向代理 http 服務 cockpit (自動更新SSL)



繼續上一篇 CHG: 使用 duckdns 轉發自建的靜態網頁伺服器 已經有一個網域可以打開了,再來是要處理 https 的安全連接



安裝 Nginx Proxy Manager

這裡用 docker 快速搭一個就可以

記得讓出 80/433 兩個端口,否則申請 Let’s Encrypt 憑證會報錯失敗

# 創建資料夾
sudo mkdir -p /srv/npm/data
sudo mkdir -p /srv/npm/letsencrypt
sudo chown -R 1000:1000 /srv/npm

#  安裝 npm
docker run -d \
  --name npm \
  --restart unless-stopped \
  -p 80:80 \
  -p 443:443 \
  -p 81:81 \
  -v /srv/npm/data:/data \
  -v /srv/npm/letsencrypt:/etc/letsencrypt \
  jc21/nginx-proxy-manager:latest

建好之後從 http://localhost:81 端口進入管理介面,預設的帳帳密碼是

  • 帳號: admin@example.com
  • 密碼: changeme

第一次進入會要求你註冊一個超級管理員帳號,弄好登入可以看到這個頁面


接下來需要你到路由器上把上一篇
CHG: 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器

原本
真實IP:80 轉發到 192.168.3.92:8081

*這部分改成
真實IP:80 轉發到 192.168.3.92:80

*再來追加一條
真實IP:433 轉發到 192.168.3.92:433


這裡的 80/433 是剛剛建立的 Nginx Proxy Manager 服務
接下來將經由 npm 反向代理到內部的 8081 靜態網站
81是管理介面不要對外開放避免發生安全問題,保持在區網內使用端口接入就好



新增一個反向代理

註冊好之後從 Proxy Hosts 中新增一個反向代理


網域填你剛剛註冊的,我這裡範例是 chgsite.duckdns.org
IP填 172.17.0.1 這是 docker 的網關,因為靜態伺服器設在 docker 中
Scheme 只能填 http 就好,因為我們內部的 nginx 並沒有啟用 https
最後 port 填寫剛剛創建的 8081


然後在瀏覽器打上 http://chgsite.duckdns.org 應該就能看見你的網站了



新增對外的 SSL 憑證

這裡從簡在 NPM 中申請免費的 Let’s Encrypt 憑證就好,編輯剛剛建立的反向代理

在上方的分頁選擇 SSL 進入之後,第一個選擇申請新的 SSL 憑證


然後按下確定就會自動申請了,記得對外要打開 80 與 433,任一沒開都會報錯

申請完畢之後就可以使用 https://chgsite.duckdns.org 就能擺脫瀏覽器的安全性警告了


這樣就處理完成了,如果反向代理的服務沒有強制要求對內的部分也要加密走 https 做到這一步就足夠了



新增對內轉發的 SSL 憑證

這邊假設對內的服務強制要求 SSL ,一樣用 nginx 來做簡單模擬的,如果 nginx 強制要求必須跑在 https 模式的話該如何做






使用 duckdns 轉發自建的靜態網頁伺服器

使用 duckdns 轉發自建的靜態網頁伺服器

這是連續的關於架設網站的系列

  1. 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
  2. 使用 duckdns 轉發自建的靜態網頁伺服器
  3. npm 反向代理 nginx 靜態網站 (自動更新SSL)
  4. npm 反向代理 http 服務 portainer (私簽SSL)
  5. npm 反向代理 http 服務 cockpit (自動更新SSL)



接續上一篇 CHG: 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
已經架設好靜態網站伺服器,並且可用外部IP瀏覽網站了,這邊要去註冊一個域名來轉發自己的IP,這樣就可以不用記住數字而是記住一個域名

域名這裡用免費的方案 duckdns 服務,如果是華碩的機器內部其實也有ddns可以註冊,這是一樣的意思,只不過這裡用 duckdns 來實現



註冊 duckddns

進入該網站 https://www.duckdns.org/
選一個第三方帳號註冊,然後就可以登錄自己想要的域名了


這邊先不用考慮動態IP的問題,跑起來之後再處理就好,先直接從網站註冊能用就好
註冊好之後用下面的指令,看看剛剛註冊的網域有沒有返回你自己的IP

nslookup chgsite.duckdns.org

確認有返回正確的 IP 就是可以用了

即使 nslookup 可以查到,瀏覽器也有可能要等一段時間才能用,仍然不行的話重啟一下電腦試試看


再來就可以用該網域 http://chgsite.duckdns.org 從公網存取你的靜態網站了

確認的時候記得用手機網路試試看,不然在同一個 wifi 下路由會直接走內網,無法真的測試到外部是否能存取


再來下一篇是將他變成 https 以及處理掉結尾的 8081 直接用域名存取的教學
CHG: 使用 npm 反向代理內部 nginx 的靜態網站為 https




動態更新 duckddns

簡單說就是定期執行指令上傳IP到 duckdns 上,這樣就能處理動態IP的變動了,即使變動後依然能在第一時間更改IP位址

執行下面的指令創建一個 duckdns 這預設每5分鐘會自動更新一次

裡面的 Token 從 http://chgsite.duckdns.org 登入後會看到,網域記得要先註冊才有效

docker run -d \
  --name=duckdns \
  --net=host \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Asia/Taipei \
  -e SUBDOMAINS=<你的子網域名稱>\
  -e TOKEN=<你的Token> \
  -e UPDATE_IP=ipv4 \
  -e LOG_FILE=false \
  -v /srv/duckdns/config:/config \
  --restart unless-stopped \
  lscr.io/linuxserver/duckdns:latestv

詳細指令可以參考這邊 linuxserver/docker-duckdns


完成之後等個10秒再執行下面指令

docker logs duckdnsd


看一下倒數第三行,成功的話會是
DuckDNS request at Fri Aug 15 17:51:15 CST 2025 successful. IP(s) unchanged.

失敗的話會看到 KO





2025年8月8日 星期五

在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器

在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器

這是連續的關於架設網站的系列

  1. 在 ubuntu 使用 docker 架設 nginx 靜態網站伺服器
  2. 使用 duckdns 轉發自建的靜態網頁伺服器
  3. npm 反向代理 nginx 靜態網站 (自動更新SSL)
  4. npm 反向代理 http 服務 portainer (私簽SSL)
  5. npm 反向代理 http 服務 cockpit (自動更新SSL)



第一篇主要是要講 npm (Nginx Proxy Manager) 至於架設的東西就隨意選個最簡單的 Nginx 當範例架設一個簡易網站就好


安裝 docker 套件

使用官方懶人包安裝docker

curl -fsSL get.docker.com|sudo sh; sudo usermod -aG docker $USER


創建範例網站

建立範例網站

# 建立範例 index.html
sudo mkdir -p /srv/www/mysite.com/html
echo '<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的網站</title>
</head>
<body>
  <h1>歡迎來到我的 nginx 容器網站!</h1>
  <p>這是來自 /srv/www/mysite.com 的內容。</p>
</body>
</html>' | sudo tee /srv/www/mysite.com/html/index.html > /dev/null


啟動 nginx 容器

使用簡易腳本來自動創建範本

# 安裝
docker run -d \
  --name www.mysite.com \
  -v /srv/www/mysite.com/html:/usr/share/nginx/html:ro \
  -p 8081:80 \
  --restart=always \
  nginx:alpine

安裝好之後測試一下

curl http://localhost:8081

有的看到範例內容的話就完成了


檢視網站內容

網址: http://localhost:8081

直接把貼到瀏覽器上就可以看到網站內容了,如果是谷歌的機器就把 localhost 換成公開的 IP 即可,記得事後加強一下安全就好。

或是使用 Vscode 用 SSH 連入,預設會自動轉發遠端的端口到本地,一樣可以用 localhost:8081 打開遠端沒有開放的網頁。



開放端口給外部IP連接

在內布已經可以用 localhost:8081 看到網站之後再來要把你的IP公開出去,在家用的網路中通常需要再路由器中設定虛擬伺服器轉發

下面以 ASUS 的路由器為範例,這台路由器必須直接輸入 Hinet 連線帳密碼取得對外IP才有效,如果是宿舍環境無權動到最上層路由的話就不適用這個方式了

要是無權動路由器又想自架的話,一個免費的方案是用 cloudflare tunnel 突破NAT的阻擋

 

位置在
左邊::外部網路(WAN) → 頂部分頁::虛擬伺服器


進來之後打開功能並且輸入


成功之後會長這個樣子


這一整條的解讀就是把 真實IP:80 轉發到 192.168.3.92:8081 的意思

來源IP是白名單只轉發特定IP,留空就行不用限制

再來就可以在瀏覽器中輸入 http://真實IP 即可看到剛剛建造的網頁了


要註冊自己的免費域名可以參考下一篇
CHG: 使用 duckdns 轉發自建的靜態網頁伺服器



其他:: 快速啟動 nginx 容器

自己寫的一個快速部屬函式,輸入該指令可以載入函式

source <(curl -sL gist.githubusercontent.com/hunandy14/7dafceef67cb47db38620a3c2479792d/raw)

再來部署docker

run_nginx_site mysite.com 8081

就可以部署好了,預設會部署在 /srv/www/$DOMAIN/html
詳細使用說明自行點進去 gist 裡面看說明


要刪除該容器可以使用下面指令刪掉

docker stop www.mysite.com && docker rm www.mysite.com