提供靜態內容

安全地提供靜態內容,例如 HTML 網頁、CSS 檔案或圖片,這些內容不會因應用程式的作業而發生變更。簡單的靜態 HTML 網站通常可透過使用 App Engine 免費版而免費執行。

本頁與範例是簡易網誌應用程式之延伸學習範例的一部分,此網誌應用程式可讓使用者上傳貼文。您應該已經熟悉 Go 程式設計語言和基本的網路開發。如要從頭開始,請前往透過 Go 建構應用程式

費用

執行本教學課程不會產生任何費用,而且單獨執行這個範例應用程式也不會超過您的免費配額

事前準備

如果您已從透過 Go 建構應用程式開始教學課程,請跳過本節。

  1. 完成設定您的專案和應用程式中的事前準備工作。

  2. 在本範例中,請將程式碼新增至 gophers-1 範例,也就是從設定您的專案和應用程式中產生的最終成果。

    下載 gophers-1 範例及其依附元件到您的本機電腦:

    go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1/...
    
  3. 切換至 gophers-1 目錄:

    cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1
    

結構化您的應用程式

本範例專案的結構如下:

  • go-app/:專案根目錄。

    • app.yaml:App Engine 應用程式的配置設定。
    • main.go:應用程式的程式碼。
    • index.html:顯示首頁的靜態 HTML 檔案。
    • static/:儲存靜態檔案的目錄。
      • style.css:會設定 HTML 檔案外觀格式的樣式表。
      • gcp-gopher.svg:Gopher 圖片。

設定靜態檔案

  1. 在您的專案根目錄中建立 index.html 檔案,並新增下列幾行:

    <!doctype html>
    <html>
    <head>
      <title>The Gopher Network</title>
      <link rel="stylesheet" type="text/css" href="/static/style.css">
    </head>
    <body>
    
    <h1>The Gopher Network</h1>
    
    <img id="logo" src="/static/gcp-gopher.svg" width="100">
    </body>
    </html>
    

  2. 在您的專案根目錄中建立名為 static 的資料夾:

    mkdir static
    
  3. 依次在 gcp-gopher.svg 圖片連結與 [另存連結為...] 上按一下滑鼠右鍵,將圖片下載至您的 static 目錄。

  4. 在您專案的 static 目錄中建立 style.css 以修改 index.html 的外觀,然後新增下列樣式:

    body {
      font-family: Arial, sans-serif;
      color: blue;
    }
    

提供範本與靜態檔案

對於會維持不變的某些內容 (例如圖片或 CSS) 來說,提供靜態檔案會更有效率。

為靜態檔案建立處理常式,並提供其內容:

  1. 您先前建立的 app.yaml 檔案指定包含靜態檔案的目錄。在 app.yaml 中 handlers 區段下的 - url: /.* 行上方,新增下列幾行:

    # If the path is empty, show static index.html file
    - url: /
      static_files: index.html
      upload: index.html
    
    # Otherwise, find file in static directory
    - url: /static
      static_dir: static

    現在,handlers 區段會替網址定義三個處理常式。當 App Engine 收到網址 /static 的要求時,就會將路徑的其餘部分對應至 static 目錄中的檔案。如果找到正確的檔案,就會將檔案的內容傳回給用戶端。

    如要進一步瞭解網址對應以及您可以在 app.yaml 指定的其他選項,請參閱 app.yaml 參考說明文件

  2. 由於您現在正在從 index.html 提供服務,因此不需要 main.go 中的下列幾行。請刪除下列項目:

    • 匯入作業清單中的 "fmt"
    • indexHandler 函式中的 fmt.Fprint(w, "The Gopher Network: This is being hosted by App Engine.")

在本機執行您的應用程式

使用 Cloud SDK 隨附的本機開發伺服器 (dev_appserver.py),執行並測試您的應用程式。

  1. 在應用程式 app.yaml 所在的專案根目錄中,使用以下指令來啟動本機開發伺服器:

    dev_appserver.py app.yaml
    

    本機開發伺服器現已開始執行並監聽 8080 通訊埠的要求。發生問題了嗎?

  2. 使用網路瀏覽器造訪 http://localhost:8080/ 以查看應用程式。

    最終

執行本機開發伺服器 (dev_appserver.py)

如要執行本機開發伺服器,您可以指定完整的目錄路徑來執行 dev_appserver.py,或是將 dev_appserver.py 新增至 PATH 環境變數:

  • 如果您安裝了原始 App Engine SDK,該工具位於以下路徑:

    [PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
    
  • 如果您安裝了 Google Cloud SDK,該工具位於以下路徑:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
    

    提示:如要將 Google Cloud SDK 工具新增至您的 PATH 環境變數,並在殼層中啟用 command-completion,您可以執行以下指令:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
    

如要進一步瞭解如何執行本機開發伺服器 (包括如何變更通訊埠編號),請參閱本機開發伺服器參考資料。

變更程式碼

本機開發伺服器會監視您的專案檔案變更,所以會在您變更程式碼之後,重新編譯並重新啟動您的應用程式。

  1. 立即嘗試:讓本機開發伺服器維持執行的狀態,然後試著編輯 index.html,將「The Gopher Network」改成其他內容。

  2. 重新載入 http://localhost:8080/,查看您變更的內容。

部署應用程式

使用下列指令,從 app.yaml 所在的專案根目錄,將您的應用程式部署到 App Engine:

gcloud app deploy

查看應用程式

如要啟動瀏覽器並前往 http://[YOUR_PROJECT_ID].appspot.com 查看您的應用程式,請執行下列指令:

gcloud app browse

後續步驟

您剛建構了一個可讓網路前端與 Go 後端通訊的應用程式!

接下來,瞭解如何建立基本表單,使用 HTTP POST 在 HTML 範本上顯示使用者提交的內容。

本頁內容對您是否有任何幫助?請提供意見:

傳送您對下列選項的寶貴意見...

這個網頁
Go 適用的 App Engine 標準環境