提供靜態內容

提供靜態內容,例如 HTML 頁面、CSS 檔案或圖片,這些內容不會因應用程式的作業而改變。簡單的靜態 HTML 網站通常可利用 App Engine 的免費方案免費執行。

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

費用

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

事前準備

如果您已從透過 Go 1.9 建構應用程式開始教學課程,請略過本節。否則,請完成下列步驟:

  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 圖片連結上按一下滑鼠右鍵,然後選取 [Save link as...] (另存連結為…),將圖片下載至 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 1.9 後端進行通訊的應用程式!

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

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

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

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