Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Okayama-2018winter-gae-public.pdf

hayashiki
December 22, 2018
630

 Okayama-2018winter-gae-public.pdf

hayashiki

December 22, 2018
Tweet

Transcript

  1. 自己紹介 key value 名前 林田 賢行 Name Hayashida Masayuki Github

    @hayashiki 所属 BULB株式会社 VR/機械学習/IoT コミュニティ GCPUGオーガナイザー その他 フルリモートワーカー
  2. AppEngine ランタイム環境 対応言語 [Java, Python, PHP, Go, Nodejs] 例としてGoであれば、GAE/Goといった表記がされることが多い 正確にいうと、FlexibleEnvironment

    は自由度の高いGAE 環境がある 例えばRuby といった言語サポートも増えるのだが、無料枠がないこともあり、 今回の話の対象外としている
  3. Hello World app.yaml runtime: go111 app.go func main() { http.HandleFunc("/",

    indexHandler) port := os.Getenv("PORT") log.Printf("Listening on port %s", port) log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", port), } func indexHandler(w http.ResponseWriter, r *http.Request) { if r.URL.Path != "/" { http.NotFound(w, r) return } fmt.Fprint(w, "Hello, World!") }
  4. エンドポイント例 $ gcloud app deploy --version feature $ gcloud app

    deploy --version master target service: [base] target version: [feature] target url: [https://base-dot-goa-api01.appspot.com] target service: [base] target version: [master] target url: [https://base-dot-goa-api01.appspot.com]
  5. index.htmlにCDNをくみこむ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-s

    <title>Okayama!</title> <script src="http://unpkg.com/vue/dist/vue.js"></script <script src="https://unpkg.com/axios/dist/axios.min.js" </head>
  6. データバインディング var app = new Vue({ el: '#app', data: {

    tasks: [], newTask: "", }, created: function() { axios.get('/tasks') .then((response) => { this.tasks = response.data.items || [] })}, methods: { addTask: function(task) { let params = new URLSearchParams() params.append('body', this.newTask) axios.post('/tasks', params) .then((response) => { ...