package
0.0.0-20240927143213-b11bb4fab650
Repository: https://github.com/jocelynh1110/go-practice.git
Documentation: pkg.go.dev

# README

15-5-2 在伺服器上提供多重靜態資源

前一節學到如何讓使用者存取一個靜態網頁,但若有很多個網頁呢?
靜態資源不只有 HTML 檔,還包括 JavaScript、CSS 檔、圖片等。要如從伺服器讓網站和使用者存取這些檔案?下面會用幾個 CSS 檔來示範。

從伺服器提供靜態檔案存取,並將模板分散在不同外部檔案中,通常是將專案問題切割成不同區塊的好辦法,使專案易於管理。

  • 要在 HTML 網頁加入 CSS 樣式檔,可在 之間加入這個標籤:
<link rel="stylesheet" href="myfiles.css">

這會把名為 myfiles.css 的 CSS 檔嵌入 HTML 網頁,並套用該 CSS 指定的樣式。

  • 若檔案系統中要傳回的檔案很多,Go 語言提供了一個函式:
http.FileServer(http.Dir("./public"))

http.FileServer():會開一個檔案伺服器,而檔案所在的資料夾則是用 http.Dir() 函式取得。 上面函式的例子會讓伺服器的 /public 子資料夾下的檔案都能被外界讀取。 如、http://localhoat:8080/public/myfiles.css

檔案以一對一方式傳回:

func ServeFile(w ResponseWriter, r *Request, name string)
  • 當不想被外界看到伺服器所在機器的目錄名稱時,可以讓檔案伺服器對外提供一個不同的路徑:
http.StripPrefix("/statics/",http.FileServer(http.Dir("./public")))

StripPrefix() 函式:會將請求檔案的 URI 當中的 「/static/」置換成「./public」,並連同檔名傳給檔案伺服器,它會在 ./public 尋找這個檔案。 若想沿用原始資料夾名稱,就可以不使用 http.StripPrefix()。

練習、對網頁和使用者提供 CSS 檔
要展示一個網頁,網頁會引用一些外部 CSS 檔,而這些檔案將透過檔案伺服器來提供。此外檔案在伺服器本地的檔案系統位於 /public 資料夾下。但在伺服器上則透過 /statics 路徑來存取。

  1. 首先建立 HTML 網頁,並用 <link...> 參照到 3 個 CSS 檔:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
  <link rel="stylesheet" href="/statics/body.css">
  <link rel="stylesheet" href="/statics/header.css">
  <link rel="stylesheet" href="/statics/text.css">
</head>

<body>
  <h1>Hello</h1>
  <p>Que pasa</p>
</body>

</html>
  1. 再建立 /public 子資料夾,並撰寫三個 CSS 檔:
  • body.css
body{
  background-color:orange;
}
  • header.css
h1{
  color:navy;
}
  • text.css
p{
  color:pink;
}
  1. 最後是伺服器程式 main.go
package main

import (
	"log"
	"net/http"
)

func main() {
	// 對任何路徑提供 index.html
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "./index.html")
	})

	// 將 /statics 路徑對應到本地的 /public 資料夾
	http.Handle("/statics/", http.StripPrefix("/statics/", http.FileServer(http.Dir("./public"))))

	log.Fatal(http.ListenAndServe(":8080", nil))
}