Python 2 標準環境適用的入門指南

本指南將協助您瞭解如何開發及部署在 Google App Engine 標準環境中執行的基本 Python 2.7 應用程式。本指南適用於初次使用 Google App Engine 及其相關服務的使用者,尤其是搭配 Python 語言使用 App Engine 的使用者。因此,本指南針對每項工作所提供的說明都比快速入門更為深入。

事前準備

開發應用程式之前:

  1. 建立新的 GCP 主控台專案,或從 Google Cloud Platform 主控台擷取現有專案的專案 ID:

    前往「Projects」(專案) 頁面

  2. 安裝並初始化 Google Cloud SDK

建立基本應用程式

本指南使用 Flask 網路應用程式架構是因為它簡單易用,且具有擴展性,但不論您使用哪一個架構,均可套用相同的原則。本指南可教導您:

  • 如何建立基本的使用者評論表單,以在您建立的 HTML 範本上顯示使用者透過該表單提交的內容。
  • 如何建立可提供 CSS 或圖片等靜態檔案的基本應用程式。

設定開發環境後,您可以編寫應用程式的程式碼,並將其部署至 App Engine。

應用程式專案的基本結構

本指南的 flask-app 專案使用下列結構:

flask-app 專案結構

  • app.yaml:配置 App Engine 應用程式的設定
  • main.py:編寫應用程式的內容
  • static:儲存靜態檔案的目錄
    • style.css:基本樣式表,可以為範本檔案的外觀和風格套用基本的格式
  • templates:所有 HTML 範本的目錄
    • form.html:HTML 範本,用於顯示您的表單
    • submitted_form.html:HTML 範本,用於顯示提交的表單內容

設定程式庫以進行開發

本教學課程會在您的應用程式目錄中新增一份 Flask 程式庫複本。請注意,雖然 App Engine Python 2.7 執行階段環境已內建 Flask 程式庫,但內建的程式庫版本較舊,可能不適用本教學課程。

如要設定必要程式庫:

  1. 在專案的根目錄中建立一個名為 appengine_config.py 的檔案。部署應用程式時,您可以使用這個檔案指定 App Engine 要尋找第三方程式庫的位置:

    from google.appengine.ext import vendor
    
    # Add any libraries installed in the "lib" folder.
    vendor.add('lib')
  2. 在專案的根目錄中建立一個名為 requirements.txt 的檔案:

    Flask==0.12.4
    Werkzeug<0.13.0,>=0.12.0
    
  3. 如要在本機電腦上執行這個應用程式,您必須設定 Python 開發環境,包括 Python、pipvirtualenv。如需操作說明,請參閱 Google Cloud Platform 適用的設定 Python 開發環境一文。

  4. 使用 virtualenv 安裝依附元件:

    Mac OS/Linux

    1. 在專案外部的目錄中建立獨立的 Python 環境,並啟動該環境:
      virtualenv env
      source env/bin/activate
      教學課程結束時,輸入 deactivate 即可結束 virtualenv
    2. 前往專案目錄,並且安裝依附元件:
      cd YOUR_PROJECT
      pip install -t lib -r requirements.txt

    Windows

    如果您已安裝 Cloud SDK,那麼電腦上應該會有 Python 2.7,該程式語言通常位於 C:\python27_x64\ (如果電腦是 64 位元系統)。請使用 PowerShell 執行 Python 套件。

    1. 尋找已安裝的 PowerShell
    2. 以滑鼠右鍵按一下 PowerShell 的捷徑,然後以系統管理員的身分啟動 PowerShell。
    3. 嘗試執行 python 指令。如果找不到該指令,請將 Python 資料夾新增至環境的 PATH
      $env:Path += ";C:\python27_x64\"
    4. 在專案外部的目錄中建立獨立的 Python 環境,並啟動該環境:
      python -m virtualenv env
      env\Scripts\activate
      教學課程結束時,輸入 deactivate 即可結束 virtualenv
    5. 前往專案目錄,並且安裝依附元件:
      cd YOUR_PROJECT
      python -m pip install -t lib -r requirements.txt

    -t lib 標記會將程式庫複製到 lib 資料夾中,系統會在部署期間將這個資料夾上傳到 App Engine。如要進一步瞭解複製第三方程式庫,請參閱搭配複製的程式庫使用 pip requirements.txt

    -r requirements.txt 標記會告知 pip 安裝 requirements.txt 檔案中的所有項目。

建立 app.yaml 檔案

您可以在 app.yaml 檔案中調整 App Engine 應用程式的設定,這個檔案可以手動建立,也可以在建立開發專案時自動建立。app.yaml 檔案是設定檔,用於告知 App Engine 如何執行您的應用程式,以及如何將網址對應到靜態檔案和 Python 模組。

如要建立 app.yaml 檔案:

  1. 在專案的根目錄中建立一個名為 app.yaml 的檔案。
  2. 在檔案中新增以下這一行:

    runtime: python27
    api_version: 1
    threadsafe: true
    
    libraries:
    - name: ssl
      version: latest
    
    handlers:
    - url: /static
      static_dir: static
    - url: /.*
      script: main.app
    

如需更多關於 app.yaml 檔案的參考資訊,請參閱 app.yaml 參考文件

為 Flask 應用程式建立要求處理常式

當 App Engine 收到應用程式的網路要求時,即會呼叫與該網址對應的指令碼處理常式,如應用程式的 app.yaml 設定檔中所述。Python 2.7 執行階段支援 WSGI 標準。建議使用 WSGI,如果沒有它,Python 2.7 的某些功能就無法運作。應用程式的指令碼處理常式設定會決定是否要使用 WSGI 處理要求。

伺服器會比較要求的網址和應用程式設定檔中的網址模式,以判斷要呼叫哪一個 Python 應用程式物件。接著,伺服器會根據 WSGI 標準中定義的引數,呼叫應用程式物件。應用程式物件會根據要求執行適當的動作,然後準備回應內容,並以字串清單的形式將其傳回。

以下要求處理常式會取得在 /templates/form.html 檔案中提交的表單資訊,然後將該資訊放到 /templates/submitted_form.html 範本檔案中:

  1. 在應用程式的根目錄中建立名為 main.py 的新檔案。

  2. 匯入您要使用的 Flask 架構和 Flask 介面:

    from flask import Flask, render_template, request
  3. 新增這行程式碼以建立 Flask 類別的例項,然後將其指派到名為 app 的變數:

    app = Flask(__name__)
  4. 建立使用 form.html 範本顯示表單的要求處理常式:

    @app.route('/form')
    def form():
        return render_template('form.html')

    當使用者前往應用程式的 /form/ 目錄時,系統會顯示您將建立的 form.html 範本。

  5. 建立要求處理常式,用於處理提交的表單資訊:

    @app.route('/submitted', methods=['POST'])
    def submitted_form():
        name = request.form['name']
        email = request.form['email']
        site = request.form['site_url']
        comments = request.form['comments']
    

    應用程式會將表單資訊儲存到您在此處建立的變數中。這些變數可讓您將表單中的資料張貼到您將建立的 submitted_form.html 範本。

如要進一步瞭解如何快速開始使用 Flask,請參閱 Flask 快速入門指南

您可以輕鬆地擴充這份表單的功能。舉例來說,您可以使用 Mail APIMailgunMailjetSendGrid 將使用者提交的評論傳送給自己或其他人。

設定 Jinja2 範本

由於內嵌在程式碼中的 HTML 較不易維護,建議您使用範本系統,將 HTML 儲存在另一個檔案,該檔案會使用特殊語法指定應用程式傳回的資料要顯示在哪個位置。您可以自行選擇您要使用的範本引擎,同時使用範本引擎和您的應用程式程式碼。為了您的方便,App Engine 提供 DjangoJinja2 這兩個範本引擎。

  1. submitted_form() 函式結尾新增以下這一行:

    return render_template(
        'submitted_form.html',
        name=name,
        email=email,
        site=site,
        comments=comments)

    這行程式碼會使用 render_template() 介面,將提交的表單資訊顯示在 submitted_form.html 範本中。

  2. 建立 form.htmlsubmitted_form.html 範本:

    1. 在根目錄中建立名為 templates 的新資料夾:

      mkdir templates
      
    2. 在專案的 templates 目錄中建立 form.html

      <html>
        <head>
          <title>Submit a form</title>
         <link rel="stylesheet" type="text/css" href="/static/style.css">
        </head>
        <body>
          <div id="container">
            <div class="pagetitle">
              <h1>Submit a form</h1>
            </div>
            <div id="main">
              <form method="post" action="{{ url_for('submitted_form') }}">
                <label for="name">Name:</label>
                <input type="text" name="name"><br />
                <label for="email">Email address:</label>
                <input type="email" name="email"><br />
                <label for="site_url">Website URL:</label>
                <input type="url" name="site_url"><br />
                <label for="comments">Comments:</label>
                <textarea name="comments"></textarea><br />
                <input type="submit">
              </form>
            </div>
          </div>
        </body>
      </html>
      
    3. 在專案的 templates 目錄中建立 submitted_form.html

      <html>
       <head>
         <title>Submitted form</title>
         <link rel="stylesheet" type="text/css" href="/static/style.css">
       </head>
       <body>
         <div id="container">
           <div class="pagetitle">
             <h1>Form submitted</h1>
           </div>
           <div id="main">
             <p>Thanks for your submission, {{name}}!</p>
             <p>Here's a review of the information that you sent:</p>
             <p>
                <strong>Name</strong>: {{name}} <br>
                <strong>Email</strong>: {{email}} <br>
                <strong>Website URL</strong>: {{site}} <br>
                <strong>Comments</strong>: {{comments}}
             </p>
           </div>
         </div>
       </body>
      </html>
      

如要進一步瞭解搭配 Flask 和 Jinja2 使用範本,請參閱 Flask 官方說明文件

提供靜態檔案

對於某些在要求頁面時不會動態產生的內容 (例如圖片、CSS 或 Flash 動畫) 來說,提供靜態檔案會更有效率。

建立 CSS 檔案和其使用的處理常式:

  1. 在根目錄中建立名為 static 的新資料夾:

    mkdir static
    
  2. 建立 style.css 檔案,這會修改您剛剛建立的範本檔案外觀。在專案的 static 資料夾中建立這個檔案,然後新增下列樣式:

    .pagetitle {
        color: #800080;
    }
    
  3. 您先前建立的 app.yaml 檔案指定包含靜態檔案的 static 目錄:

    handlers:
    - url: /static
      static_dir: static
    - url: /.*
      script: main.app

    handlers 部分會替網址定義兩個處理常式。當 App Engine 收到的要求含有開頭為 /static 的網址,就會將路徑的其餘部分對應至 static 目錄的檔案,如果找到了正確的檔案,就會將檔案的內容傳回給用戶端。

如需進一步瞭解網址對應以及您可以在 app.yaml 指定的其他選項,請參閱 app.yaml 參考資料

測試應用程式

使用 SDK 隨附的本機開發伺服器 dev_appserver.py 測試應用程式。

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

    dev_appserver.py app.yaml
    

    本機開發伺服器現已開始執行並監聽 8080 通訊埠的要求。

    發生問題?

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

執行本機開發伺服器 (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 環境變數,並在殼層中啟用指令完成功能,您可以執行以下指令:

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

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

進行變更

在開發應用程式的同時,您可以讓開發伺服器保持運作。開發伺服器會監看來源檔案的變更情形,並在必要時重新載入檔案。

  1. 立即嘗試:讓開發伺服器維持執行的狀態,然後編輯 templates/form.html,將 <h1> 標記中的 Submit a form 文字改成其他內容。
  2. 重新載入 http://localhost:8080/form 即可查看結果。

部署應用程式

如要上傳應用程式,請從 app.yaml 檔案所在的專案根目錄中執行下列指令:

gcloud app deploy

選用標記:

  • 加上 --project 標記可指定替代 GCP 主控台專案 ID,而不使用您在 gcloud 工具中初始化為預設值的 ID。範例:--project [YOUR_PROJECT_ID]
  • 加上 -v 標記可指定版本 ID;如未加入,將由系統自動產生。範例:-v [YOUR_VERSION_ID]

如要進一步瞭解如何從指令列部署應用程式,請參閱部署 Python 應用程式

查看應用程式

開啟瀏覽器,並前往 http://[YOUR_PROJECT_ID].appspot.com/form 查看應用程式。

支援服務

如果您在開發應用程式時遇到問題,可以向技術支援和開發人員社群尋求協助。

後續步驟

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

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

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