GAE go Image API for GCS

2016-10-31 約 907 字預計閱讀 2 分鐘

LIVE DEMO

在開發 GAE 應用程式時，難免會遇到應用程式需要處理圖片的問題。GAE 的應用程用可以直接存取靜態的資源檔案，這塊直接在 app.yaml 檔案中設定就可以了，不過也因為 GAE 應用程式的特性，需要將所有的資源上傳一份到 GAE 正式環境中，所以會發現上傳專案的容量大小會爆增(如果你將所有需要的圖檔階直接放在程式內)。

專案檔案太大會影響 GAE 在自動擴展的效能，所以盡可能的將不必要的東西移多專案外(圖檔等)

app.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
...


- url: /favicon.jpg
  mime_type: image/x-icon
  static_files: public/images/favicon.jpg
  upload: public/images/favicon.jpg
 
- url: /js/*
  mime_type: text/javascript
  static_dir: public/js
  secure: always
 
- url: /css/*
  mime_type: text/css
  static_dir: public/css
  secure: always
  http_headers:
    Access-Control-Allow-Origin: "*"
 
- url: /images/*
  static_dir: public/images
  secure: always

每一個 GCP 的專案可以有 5G 免費的 Google Cloud Storage 空間，所以將 GAE 上大檔案的靜態資源放到 GCS 是一個很好的決定，在 GAE 程式中可以使用 google-api-go-client 來存取 GCS 上相關的資源。如果是圖片檔的話，更可以直接用 Image API 的方式來直接讀取圖片資源

Images Go API 讓我們使用 Blobstore 的方式來讀取/裁切圖檔，當我們透過 Blobstore 拿到靜態圖檔時可以直接透過 url 的方式對目標圖片進行調整圖檔的大小或進行裁切

1
2
3
4
5
# 將目標圖片重新縮放至 32 像素(等比例 - 長邊)
http://lhx.ggpht.com/randomStringImageId=s32
 
# 將照片裁切至 32 像素
http://lhx.ggpht.com/randomStringImageId=s32-c

imgServe

因些我們就可以設計一個動態的路由來對應至 GCS 上特定路徑的圖片

1
2
3
4
/img?f=dress/banner.png --> GCS:Bucket/dress/banner.png
/img?f=dress/color/banner.png --> GCS:Bucket/dress/color/banner.png
/img?f=dress/color/banner.png&s=200 --> GCS:Bucket/dress/color/banner.png 等比縮放至 200 像素
/img?f=dress/color/banner.png&s=200-c --> GCS:Bucket/dress/color/banner.png 等比縮放至 200 像素且進行 1:1 的裁切

如此一來前端面頁如果需要引用照片，可以直接使用 <img src="/img?f=dress/banner.png" alt="">，如果目標圖片不存在則直接輸入一開始就準備好的 image 404 圖片進行代替

main.go

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
package main
 
import (
	"fmt"
	"golang.org/x/net/context"
	"net/http"
 
	"github.com/labstack/echo"
	"github.com/labstack/echo/engine/standard"
 
	"google.golang.org/appengine"
	"google.golang.org/appengine/blobstore"
	"google.golang.org/appengine/image"
)
 
const (
	Bucket           = "<your-gae-default-bucket>"
	NotFoundImageURL = "img-api-example/img404.jpg"
)
 
/**
 * index page
 */
func indexGET(c echo.Context) error {
	c.Render(200, "index.tpl", map[string]interface{}{
		"title": "go gae image API example",
		"images": []string{
			"img?f=img-api-example/1.png",
			"img?f=img-api-example/1.png&s=200",
			"img?f=img-api-example/1.png&s=200-c",
			"img?f=img-api-example/2.jpg",
		},
	})
	return nil
}
 
/**
 * get not foound image default image, img404.jpg
 */
func getNotFoundImage(ctx context.Context) (urlString string, err error) {
	blobPath := fmt.Sprintf("/gs/%s/%s", Bucket, NotFoundImageURL)
	blobKey, err := blobstore.BlobKeyForFile(ctx, blobPath)
	if err != nil {
		return
	}
	opts := image.ServingURLOptions{Secure: false, Crop: true}
	url, err := image.ServingURL(ctx, blobKey, &opts)
	if err != nil {
		return
	}
	urlString = url.String()
	return
}
 
/**
 * image serve handler
 */
func imgServe(c echo.Context) error {
	ctx := appengine.NewContext(c.Request().(*standard.Request).Request)
 
	filePath := c.QueryParam("f")
	size := c.QueryParam("s")
 
	blobPath := fmt.Sprintf("/gs/%s/%s", Bucket, filePath)
	blobKey, err := blobstore.BlobKeyForFile(ctx, blobPath)
	if err != nil {
		c.String(http.StatusExpectationFailed, err.Error())
	}
 
	opts := image.ServingURLOptions{Secure: false, Crop: true}
	if url, err := image.ServingURL(ctx, blobKey, &opts); err != nil {
		if n, err := getNotFoundImage(ctx); err != nil {
			return err
		} else {
			c.Redirect(http.StatusTemporaryRedirect, n)
		}
	} else {
		if size != "" {
			c.Redirect(http.StatusTemporaryRedirect, fmt.Sprintf("%s=s%s", url.String(), size))
		} else {
			c.Redirect(http.StatusTemporaryRedirect, url.String())
		}
	}
 
	return nil
}
 
func init() {
	e.GET("/", indexGET)
	e.GET("/img", imgServe)
}

GAE Go Image serve GCS image

demo code

cage1016/gae-go-image-example: GAE go image API example

目錄

GAE go Image API for GCS

imgServe

GAE Go Image serve GCS image

demo code