2019年2月12日 星期二

[GAE] 試用Google App Engine建立網頁

此篇記錄Google App Engine一個簡單的入門範例。


Google App Engine (簡稱GAE) 是Google雲端提供的其中一項平台,能幫助我們快速建立網路應用服務,其最大的優點是讓工程師不須考慮伺服器硬體細節(不是IaaS而是PaaS),能更專注於程式碼的設計上,另外後台也提供監控、分流等功能。
(官方介紹:https://cloud.google.com/appengine/?hl=zh-tw)


p.s. GAE是要收費的,但每日提供一定額度免費使用,免費的流量很夠我自己亂玩了。


環境設定:
  首先要開通Google cloud服務,並建立project
  下載google cloud SDK

  大概是這樣吧...因為太早之前做的操作所以忘記了,只記得第一次想試Google App Engine時因為要打卡號所以就放棄了(從Google cloud platform官網點try it free之類的都會要先打卡號),最後是使用Google Map API時開了個專案,然後Google的專案都是連通的,所以就這樣開好專案了

  具體操作請看官網:https://cloud.google.com/appengine/docs/standard/python/quickstart

  另外我使用的都是Python27,現在是有Python37可以用了,但Python37支援不完全,像是還未支援在windows上跑local server (會出現OSError: Dev_appserver does not support python3 apps on Windows.),因此就還是使用Python27。


GAE範例專案:
  此應用會記錄使用者輸入的名稱與訊息到 Cloud Datastore,然後在底下會顯示之前有輸入過的訊息。
  功能就像在有些旅遊地點會放的供人留言作紀念的本子那樣。


專案架構:
/hello-app-engine
        - app.yaml
        - router.py
        - main.py
        - /templates
                - home.html
        - /models
                - greetings.py
                - init.py


1. app.yaml檔案:
  在GAE專案中一定存在的設定檔,讓App Engine知道我們的網路服務是如何運作。
( 官方說明文件:https://cloud.google.com/appengine/docs/standard/python/config/appref )

app.yaml:
runtime: python27   # 運行環境 ex:nodejs10, python37, go等
api_version: 1
threadsafe: true # 指出應用程式是否能在不同的執行緒裡同步處理請求

handlers:     # handlers內定義了哪些request由哪些script處理
- url: /.*
  script: router.app

libraries:     # libraries內告知App Engine此專案需要哪些內建library
- name: jinja2
  version: latest

下面網址有GAE在python27環境裡內建的第三方程式庫清單:
https://cloud.google.com/appengine/docs/standard/python/tools/built-in-libraries-27

2. router.py:
  這裡使用webapp2這個網頁framework來架設我們的應用。
import webapp2
from webapp2 import Route

app = webapp2.WSGIApplication([
    Route('/', handler='main.MainPage'),  # main.py內的MainPage class
    Route('/greet', handler='main.GreetHandler'),  # main.py內的GreetHandler class

], debug=True)

3. models/greetings.py:建立 Cloud Datastore 裡的ndb物件,類似建立資料庫的表格,下面就是建立一個Greetings的表格,這個表格內有name、message、timestamp三個欄位。
from google.appengine.ext import ndb

class Greetings(ndb.Model):
    name = ndb.StringProperty(required=True)
    message = ndb.TextProperty(required=True)
    timestamp = ndb.DateTimeProperty(auto_now_add=True)

4. main.py:各種request處理,我們使用 jinja2 進行 render,如此我們可以在server端動態修改html檔。
from models.greetings import Greetings
import webapp2
import os
import logging
import jinja2

class MainPage(webapp2.RequestHandler):
    def get(self):   # process HTTP GET request
        results = Greetings.query().order(Greetings.timestamp).fetch() 
        results_dict = {'greetings': results}

        template_dir = os.path.join(os.path.dirname(__file__), 'template')
        jinja_enviroment = jinja2.Environment(
            loader=jinja2.FileSystemLoader(template_dir)
        )
        template = jinja_enviroment.get_template('home.html')
        rendered_template = template.render(results_dict) 
        self.response.write(rendered_template)   # HTTP response

        
class GreetHandler(webapp2.RequestHandler):
    def post(self):
        user_name = self.request.get('user_name')
        message = self.request.get('message')
        Greetings(name=user_name, message=message).put()  # put()存物件

5. templates/home.html:
<html>
    <head></head>
    <body>
    <h1>My Guest Book</h1>
    <form action="/greet" method="post">
        <p>Name: <input type="text" name="user_name"></p>
        <p>Message: <textarea name="message"></textarea></p>
        <p>Name: <input type="submit" value="send"></p>
    </form>
    <h1>Past Greeting:</h1>

    {% for greeting in greetings %}
    {{ greeting.timestamp.strftime('%Y-%m-%d %H:%m') }} - {{greeting.name}} said {{greeting.message}}
    <br>
    {% endfor %}
    </body>
</html>


照著上面的程式碼做後...
我們就來測試吧:
  在shell內輸入 dev_appserver.py app.yaml 能在localhost下測試
  瀏覽器連結 localhost:8080 就能看見頁面了
  另外連結 localhost:8000 可以查看 datastore (如下圖)













發佈:
  登入後,輸入 gcloud app deploy 即可發佈應用於自己的project


  GAE專案與一般我們寫網頁應用中比較不同的就是會有yaml設定檔,另外上面的範例我們也用到一點Cloud datasotre的操作,能跟雲端的儲存空間進行互動。

  GAE的學習我主要參考 Build Awesome Stuff 在 youtube上po的 Learn to build scalable web applications 這一系列的教學影片
(網址:https://www.youtube.com/watch?v=sfJ0KP93cS4&index=9&list=PLdqn_b7Fi_PSKAeO5F8wmA3YmXOtL5wAA)
真的是很用心的教學影片,也很實用,強力推薦!


沒有留言:

張貼留言