Docker

新手自建 Docker 伺服器 - (3) 建立應用，以靜態網頁為例

開始在我們的主機上，建立各種 Docker 服務，先以靜態網頁當起頭

這一系列文章，是我自己完成 Docker Server 建立的經歷以及過程，包含以下章節內容：

  1. 新手自建 Docker 伺服器 - (0) 簡介與架構說明
  2. 新手自建 Docker 伺服器 - (1) Ubuntu 主機建立 docker 服務
  3. 新手自建 Docker 伺服器 - (2) 建立 Nginx 代理伺服器
  4. 新手自建 Docker 伺服器 - (3) 建立應用，以靜態網頁為例
  5. 新手自建 Docker 伺服器 - (4) 建立 Joplin 筆記軟體
  6. 新手自建 Docker 伺服器 - (5) 建立自己的音樂串流服務 Navidrome

自建 Docker 伺服器 - (3) 建立應用，以靜態網頁為例

接下來的幾個文章會專注在 Docker 的應用，在閱讀完之後，能夠對於使用 Docker compose 建立起服務有基本的概念，未來要把各種服務建立起來時，也能參考這些範例依樣畫葫蘆。

一開始，我們先來說說什麼是 靜態網頁

靜態網頁

靜態網頁 指的是每個頁面都是單獨的 html，不會根據不同使用者的 login 以及操作狀況，做大量的變化與調整，例如目前這個由 Hugo 建立 Swingyoyo.com，以及我直接用 HTML 寫的 爵士和弦密碼生成器，都是直接用靜態網頁的方式製作出來，不會有任何動態的效果。

相比之下，動態網頁 就比較接近大家平常使用包含會員功能的 app，例如 Facebook、X、蝦皮等就比較屬於動態網頁，而這本身就是另外一個領域了，我也需要花時間學習與了解。

那這次我們操作的目標就是建立一個靜態網頁，這樣的話之後我有各種 奇怪的想法 就不一定要依賴 Cloudflare page 來建立 Serverless 服務，也可以考慮用自己的 Docker 服務來實現，而這次的目標以下：

  1. 用 Docker 建立一個 Nginx 服務顯示靜態網頁
  2. 在外部可以透過指定 domain 連線到該網頁

步驟一：建立 docker 資料夾

非常簡單，就建立而已

mkdir myweb && cd myweb #建立 docker 專案資料夾

步驟二：寫靜態網頁內容

接著我們要建立 Nginx 渲染使用的檔案，為了未來方便檔案管理，我們就建立一個資料夾 web ，把我們要渲染的檔案丟進去，之後在 docker compose 檔案中去引用這個資料夾，這麼做的好處是當你要修改 Web 的內容時，直接改就可以生效了，而不用再重新build docker。

mkdir web #建立的 web 資料夾，裡面放入網頁檔案
nano index.html

如果你手邊沒有 html ，也可以直接用這個測試

<!DOCTYPE html>
    <head>
        <title>Docker test</title>
    </head>
    <body>
        <h1>This is docker test</h1>
        <p>Tutorial by <a href="https://swingyoyo.com/docker-server-3/">Swingyoyo.com</a></p>
    </body>
</html>

步驟三：撰寫 docker compose

在回到上一層 myweb 資料夾，透過指令建立 docker compose 檔案

nano docker-compose.yml

貼上以下 docker compose 內容，這裡的幾個部分可以稍微理解下

  1. 除了 nginx-proxy，還另外安裝了一個 letsencrypt 服務來自動申請 SSL 憑證，這樣假如要做多個不同 domain 服務時也可以使用
  2. 掛載的資料夾要對應上一部生成的資料夾位置
  3. network 要對應第一步驟建立的 docker 網路名稱
  4. Email 填入自己的
version: '3.7'
services:
  nginx:
    image: nginx:alpine #輕量的 nginx 镜像
    container_name: my-web-container
    ports:
      - ":80" #因為後面會由nginx去指定，想指定 port 再設定即可
    volumes:
      - ./web/:/usr/share/nginx/html #這個意思是會把目前 docker compose 的下的 web 資料夾內所有內容掛載到容器內的 html 位置
    restart: unless-stopped
    environment:
      VIRTUAL_HOST: yourdomain.com  #之後要到 DNS 上綁定的 domain
      LETSENCRYPT_HOST: yourdomain.com #如果要申請 SSL 憑證的話，這一行可以填入，但如果跟我一樣想要 domain 走 cloudflare，可以不填入
    networks:
      - net #建立的docker connect 名稱，一定要填入才會讓我們安裝的 NGING 去抓到
networks:
  net:
    external: true

步驟四：部署

完成 docker compose 後，接著透過指令部署。

docker compose up -d

結束之後也可以再 docker ps 看一下，確認 Run 起來。

步驟五：Cloudflare 設定

接著，到你的 DNS 內，把你的 yourdomain.com 去指向 Server 的 IP。

步驟六：測試

此時，你可以試著在 http://yourdomain.com 來測試看看是否有出現 Web 內容

Note: 如果有 SSL，則可以測試 https

完成了！好感動我生出網頁了

恭喜你完成在 docker 上建立靜態網頁服務，在這裏我們有幾個有趣的地方可以討論，先看一下我用 Plantuml 畫出來的架構圖，可以看到幾個重點：

  1. 當我們想要實現 User 透過 Domain 連進 docker 服務時，我們需要在 Cloudflare 設定一個 A Record 指向 Server 的 IP
  2. 我們的 Nginx 代理伺服器可以在收到 request 後，根據 VIRTUAL_HOST 這個參數
  
@startuml
left to right direction
skinparam actorStyle awesome
rectangle "Ubuntu" as ub {
  package Docker {
    usecase "Nginx" as ng
    note top of ng
      listen XXX
      Reverse to XXX.domain docker
    end note
    usecase "DockerA" as dka
    usecase "DockerB" as dkb
  }
}
note left of ub
  Create on Linode
  IP: 1.1.1.1
end note
"User" as u
u --> (Cloudflare) : XXX.domain
note top of (Cloudflare)
  A Record: XXX.domain -> 1.1.1.1
end note
(Cloudflare) --> ng
ng --> dka : AAA.domain
ng --> dkb : BBB.domain
@enduml

而未來，只要你有相關的靜態網頁需求，也可以試試看把 Hugo 整個專案放進來後，docker compose 直接掛載 public 資料夾來使用，也可以有同樣的效果喔！

如果你有碰到什麼困難，歡迎寫 email 給我來討論喔

comments powered by Disqus