SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
SCREENSHOT AS A SERVICE
HELLO!
I am Cage Chung
I am here because I like to share my experiences.
You can find me at https://kaichu.io / QNAP 雲端應用部資深工程師
https://www.facebook.com/groups/GCPUG.TW/
https://plus.google.com/u/0/communities/116100913832589966421
[您知道”GCPUG”要怎麼唸嗎?為什麼會有一隻狗在 Logo裡面呢?]
Google Cloud Platform User Group的縮寫是GCPUG
GCPUG直接唸成G.C.P.U.G?當然可以!
但它也可以分開來,唸成 G.C. PUG喔~
Pug,指的是巴哥犬,所以 GCPUG的Logo中間才會有一隻可愛的巴哥犬喲。
下次聽到別人說G.C. PUG 的時候,您就可以大聲 說:「我也是G.C. PUG社團成員!」
Outline
◉ Waldo-gcp
◉ How to Screenshot
◉ Screenshot as service via GAE custom runtime
◉ Demo
◉ Study Info
Waldo-gcp
Let’s start with the first set of slides 1
queue
MetadataWaldo Server
App Engine
Task Queues
Cloud Storage
Optimal-way
points
managed VMs
(python27)
...
endpoints API
(OAuth 2)
Object Notification
Cloude
Datastore
snapshot
custom runtim
(nodejs)
Android App
CSV
uploadwaypoints
Store/retrieve
metadata
waypoint map
snapshot
optim
al
road
trip
RESTful APIs for waypoints list, upload
waypoints
[waldo-gcp](https://waldo-gcp.appspot.com/)
Waldo-gcp
[waldo-gcp](https://waldo-gcp.appspot.com/)
Waldo-gcp
How to Screenshot
Let’s start with the second set of slides 2
Phamtonjs
// yahoo.com.tw.js
var page = require('webpage').create();
page.viewportSize = { width: 1440, height: 900 };
page.clipRect = { top: 0, left: 0, width: 1440, height: 900 };
page.open('http://yahoo.com.tw', function() {
page.render('yahoo.com.tw.png');
phantom.exit();
});
// execute
$ phantomjs yahoo.com.tw.js
[Screen Capture | PhantomJS](http://phantomjs.org/screen-capture.html)
Chromeless on AWS Lambda
const chromeless = new Chromeless({ remote: true })
const screenshot = await chromeless
.goto('http://yahoo.com.tw')
.scrollTo(0, 2000)
.screenshot()
console.log(screenshot)
await chromeless.end()
[graphcool/chromeless: Chrome automation made simple. Runs locally or headless on AWS Lambda.](https://github.com/graphcool/chromeless)
puppeteer
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({width: 1440, height: 900});
await page.goto('http://yahoo.com.tw',
{ waitUntil: 'networkidle' });
await page.screenshot({
path: 'yahoo.com.tw.png'
});
browser.close();
})();
[GoogleChrome/puppeteer: Headless Chrome Node API](https://github.com/GoogleChrome/puppeteer)
Screenshot as service via GAE custom
runtime
Let’s start with the third set of slides 3
“
GAE screenshot service powered by
Express and PhantomJS.
app.yaml
runtime: custom
env: flex
service: screenshot
resources:
cpu: 1
memory_gb: 1
disk_size_gb: 10
manual_scaling:
instances: 1
handlers:
- url: /.*
script: app.js
Dockerfile
FROM launcher.gcr.io/google/debian8
RUN DEBIAN_FRONTEND=noninteractive apt-get update -y && apt-get install --no-install-recommends -y -q curl apt-utils
build-essential ca-certificates libfreetype6 libfontconfig1
RUN echo "deb http://http.debian.net/debian jessie-backports main" > /etc/apt/sources.list.d/backports.list && 
apt-get update -y && 
apt-get install -y --no-install-recommends fonts-noto fonts-noto-cjk locales-all && 
apt-get clean && 
apt-get autoclean && 
apt-get autoremove && 
rm -rf /var/lib/apt/lists/*
RUN mkdir /nodejs && curl http://nodejs.org/dist/v0.12.1/node-v0.12.1-linux-x64.tar.gz | tar xvzf - -C /nodejs
--strip-components=1
ENV PATH $PATH:/nodejs/bin
WORKDIR /app
ADD package.json /app/
RUN npm install
ADD . /app
ENTRYPOINT ["/nodejs/bin/npm", "start"]
package.json
{
"name": "screenshot-as-a-service",
"description": "Website screenshot service powered by node.js and phantomjs for Waldo-gcp",
"version": "1.1.0",
"repository": "https://github.com/cage1016/screenshot-as-a-service",
"engines": {
"node": ">=0.8.4"
},
"scripts": {
"start": "node app.js"
},
"dependencies": {
"phantomjs": "^1.9.16",
"express": "3.x",
"config": "0.4.15",
"request": "2.9.153"
}
}
dispatch.yaml
dispatch:
- url: "*/favicon.ico"
service: default
- url: "*/_ah/api/*"
service: default
- url: "*/waypoints/*"
service: waypoints
- url: "*/screenshot/*"
service: screenshot
- url: "*/googleae8f4bcce8bec00c.html"
service: ownership
- url: "*/*"
service: frontend
DEMO
Let’s start with the fourth set of slides 4
https://goo.gl/vDHH1o
Waldo-gcp
Trips and Tips
Let’s start with the fifth set of slides 5
“Puppeteer is more easier to build
screenshot as a service than
phantomjs
Study info
◉ GoogleChrome/puppeteer: Headless Chrome Node API -
https://github.com/GoogleChrome/puppeteer
◉ graphcool/chromeless: Chrome automation made simple. Runs
locally or headless on AWS Lambda. -
https://github.com/graphcool/chromeless
◉ cage1016/screenshot-as-a-service: Website screenshot service
powered by node.js and phantomjs -
https://github.com/cage1016/screenshot-as-a-service
◉ Screen Capture | PhantomJS -
http://phantomjs.org/screen-capture.html
THANKS!
Any questions?
You can find me at
https://kaichu.io / cage.chung@gmail.com

Contenu connexe

Tendances

Automated Development Workflow with Gulp
Automated Development Workflow with GulpAutomated Development Workflow with Gulp
Automated Development Workflow with Gulpplewicki
 
Introduction to Gulp
Introduction to GulpIntroduction to Gulp
Introduction to Gulpapdhtg6
 
Devenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.jsDevenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.jsRémy Savard
 
Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAutomating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAnderson Aguiar
 
Google App Engine: Basic
Google App Engine: BasicGoogle App Engine: Basic
Google App Engine: BasicKAI CHU CHUNG
 
Gulp - the streaming build system
Gulp - the streaming build systemGulp - the streaming build system
Gulp - the streaming build systemSergey Romaneko
 
Improving your workflow with gulp
Improving your workflow with gulpImproving your workflow with gulp
Improving your workflow with gulpfrontendne
 
Gulp: Your Build Process Will Thank You
Gulp: Your Build Process Will Thank YouGulp: Your Build Process Will Thank You
Gulp: Your Build Process Will Thank YouRadWorks
 
How to integrate front end tool via gruntjs
How to integrate front end tool via gruntjsHow to integrate front end tool via gruntjs
How to integrate front end tool via gruntjsBo-Yi Wu
 
Let's break apache spark workshop
Let's break apache spark workshopLet's break apache spark workshop
Let's break apache spark workshopGrzegorz Gawron
 
JavaScript code academy - introduction
JavaScript code academy - introductionJavaScript code academy - introduction
JavaScript code academy - introductionJaroslav Kubíček
 
GulpJs - An Introduction
GulpJs - An IntroductionGulpJs - An Introduction
GulpJs - An IntroductionKnoldus Inc.
 
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
Coscup x ruby conf tw 2021  google cloud buildpacks 剖析與實踐Coscup x ruby conf tw 2021  google cloud buildpacks 剖析與實踐
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐KAI CHU CHUNG
 
Nas 也可以揀土豆
Nas 也可以揀土豆Nas 也可以揀土豆
Nas 也可以揀土豆KAI CHU CHUNG
 
Terminus, the Pantheon command-line interface
Terminus, the Pantheon command-line interfaceTerminus, the Pantheon command-line interface
Terminus, the Pantheon command-line interfaceJon Peck
 
Web development tools { starter pack }
Web development tools { starter pack }Web development tools { starter pack }
Web development tools { starter pack }François Michaudon
 
Gdg cloud taipei ddt meetup #53 buildpack
Gdg cloud taipei ddt meetup #53 buildpackGdg cloud taipei ddt meetup #53 buildpack
Gdg cloud taipei ddt meetup #53 buildpackKAI CHU CHUNG
 

Tendances (20)

Automated Development Workflow with Gulp
Automated Development Workflow with GulpAutomated Development Workflow with Gulp
Automated Development Workflow with Gulp
 
Introduction to Gulp
Introduction to GulpIntroduction to Gulp
Introduction to Gulp
 
Devenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.jsDevenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.js
 
Intro to Gulp
Intro to GulpIntro to Gulp
Intro to Gulp
 
Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAutomating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with Gulp
 
Gulp: Task Runner
Gulp: Task RunnerGulp: Task Runner
Gulp: Task Runner
 
Google App Engine: Basic
Google App Engine: BasicGoogle App Engine: Basic
Google App Engine: Basic
 
Gulp - the streaming build system
Gulp - the streaming build systemGulp - the streaming build system
Gulp - the streaming build system
 
Improving your workflow with gulp
Improving your workflow with gulpImproving your workflow with gulp
Improving your workflow with gulp
 
Gulp: Your Build Process Will Thank You
Gulp: Your Build Process Will Thank YouGulp: Your Build Process Will Thank You
Gulp: Your Build Process Will Thank You
 
How to integrate front end tool via gruntjs
How to integrate front end tool via gruntjsHow to integrate front end tool via gruntjs
How to integrate front end tool via gruntjs
 
Let's break apache spark workshop
Let's break apache spark workshopLet's break apache spark workshop
Let's break apache spark workshop
 
JavaScript code academy - introduction
JavaScript code academy - introductionJavaScript code academy - introduction
JavaScript code academy - introduction
 
GulpJs - An Introduction
GulpJs - An IntroductionGulpJs - An Introduction
GulpJs - An Introduction
 
Gulp - The Streaming Build System
Gulp - The Streaming Build SystemGulp - The Streaming Build System
Gulp - The Streaming Build System
 
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
Coscup x ruby conf tw 2021  google cloud buildpacks 剖析與實踐Coscup x ruby conf tw 2021  google cloud buildpacks 剖析與實踐
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
 
Nas 也可以揀土豆
Nas 也可以揀土豆Nas 也可以揀土豆
Nas 也可以揀土豆
 
Terminus, the Pantheon command-line interface
Terminus, the Pantheon command-line interfaceTerminus, the Pantheon command-line interface
Terminus, the Pantheon command-line interface
 
Web development tools { starter pack }
Web development tools { starter pack }Web development tools { starter pack }
Web development tools { starter pack }
 
Gdg cloud taipei ddt meetup #53 buildpack
Gdg cloud taipei ddt meetup #53 buildpackGdg cloud taipei ddt meetup #53 buildpack
Gdg cloud taipei ddt meetup #53 buildpack
 

En vedette

JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoT
JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoTJSDC 2017 - 使用google cloud 從雲到端,動手刻個IoT
JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoTSimon Su
 
Google app engine (gae) 演進史
Google app engine (gae) 演進史Google app engine (gae) 演進史
Google app engine (gae) 演進史KAI CHU CHUNG
 
痞客趴趴走 Waldo
痞客趴趴走   Waldo痞客趴趴走   Waldo
痞客趴趴走 WaldoKAI CHU CHUNG
 
Introduction to chrome extension development
Introduction to chrome extension developmentIntroduction to chrome extension development
Introduction to chrome extension developmentKAI CHU CHUNG
 
Google apps script introduction
Google apps script introductionGoogle apps script introduction
Google apps script introductionKAI CHU CHUNG
 
Google IoT Core 初體驗
Google IoT Core 初體驗Google IoT Core 初體驗
Google IoT Core 初體驗Simon Su
 

En vedette (7)

JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoT
JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoTJSDC 2017 - 使用google cloud 從雲到端,動手刻個IoT
JSDC 2017 - 使用google cloud 從雲到端,動手刻個IoT
 
Waldo-gcp
Waldo-gcpWaldo-gcp
Waldo-gcp
 
Google app engine (gae) 演進史
Google app engine (gae) 演進史Google app engine (gae) 演進史
Google app engine (gae) 演進史
 
痞客趴趴走 Waldo
痞客趴趴走   Waldo痞客趴趴走   Waldo
痞客趴趴走 Waldo
 
Introduction to chrome extension development
Introduction to chrome extension developmentIntroduction to chrome extension development
Introduction to chrome extension development
 
Google apps script introduction
Google apps script introductionGoogle apps script introduction
Google apps script introduction
 
Google IoT Core 初體驗
Google IoT Core 初體驗Google IoT Core 初體驗
Google IoT Core 初體驗
 

Similaire à Screenshot as a service

Lambda Architecture using Google Cloud plus Apps
Lambda Architecture using Google Cloud plus AppsLambda Architecture using Google Cloud plus Apps
Lambda Architecture using Google Cloud plus AppsSimon Su
 
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)DataWorks Summit
 
Intro - End to end ML with Kubeflow @ SignalConf 2018
Intro - End to end ML with Kubeflow @ SignalConf 2018Intro - End to end ML with Kubeflow @ SignalConf 2018
Intro - End to end ML with Kubeflow @ SignalConf 2018Holden Karau
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Developmentallingeek
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerMohammed Arif
 
Streamline your development environment with docker
Streamline your development environment with dockerStreamline your development environment with docker
Streamline your development environment with dockerGiacomo Bagnoli
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyPatrick Devins
 
Towards the perfect Drupal Dev Machine
Towards the perfect Drupal Dev MachineTowards the perfect Drupal Dev Machine
Towards the perfect Drupal Dev MachineKrimson
 
DevFest 2022 - Cloud Workstation Introduction TaiChung
DevFest 2022 - Cloud Workstation Introduction TaiChungDevFest 2022 - Cloud Workstation Introduction TaiChung
DevFest 2022 - Cloud Workstation Introduction TaiChungKAI CHU CHUNG
 
Google Cloud Monitor與Custom Metrics
Google Cloud Monitor與Custom MetricsGoogle Cloud Monitor與Custom Metrics
Google Cloud Monitor與Custom MetricsSimon Su
 
Plack on SL4A in Yokohama.pm #8
Plack on SL4A in Yokohama.pm #8Plack on SL4A in Yokohama.pm #8
Plack on SL4A in Yokohama.pm #8Yoshiki Kurihara
 
Instrumentación de entrega continua con Gitlab
Instrumentación de entrega continua con GitlabInstrumentación de entrega continua con Gitlab
Instrumentación de entrega continua con GitlabSoftware Guru
 
GKE_ How I get started_.pdf
GKE_ How I get started_.pdfGKE_ How I get started_.pdf
GKE_ How I get started_.pdfLuillyfe Blanco
 
Adventures in infrastructure as code
Adventures in infrastructure as codeAdventures in infrastructure as code
Adventures in infrastructure as codeJulian Simpson
 
Toolbox of a Ruby Team
Toolbox of a Ruby TeamToolbox of a Ruby Team
Toolbox of a Ruby TeamArto Artnik
 
Plone deployment made easy
Plone deployment made easyPlone deployment made easy
Plone deployment made easyKim Chee Leong
 
GroongaアプリケーションをDockerコンテナ化して配布する
GroongaアプリケーションをDockerコンテナ化して配布するGroongaアプリケーションをDockerコンテナ化して配布する
GroongaアプリケーションをDockerコンテナ化して配布するongaeshi
 
Docker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamDocker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamDocker, Inc.
 
Docker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamDocker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamRachid Zarouali
 

Similaire à Screenshot as a service (20)

Lambda Architecture using Google Cloud plus Apps
Lambda Architecture using Google Cloud plus AppsLambda Architecture using Google Cloud plus Apps
Lambda Architecture using Google Cloud plus Apps
 
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)
Introducing Kubeflow (w. Special Guests Tensorflow and Apache Spark)
 
Intro - End to end ML with Kubeflow @ SignalConf 2018
Intro - End to end ML with Kubeflow @ SignalConf 2018Intro - End to end ML with Kubeflow @ SignalConf 2018
Intro - End to end ML with Kubeflow @ SignalConf 2018
 
Docker for Development
Docker for DevelopmentDocker for Development
Docker for Development
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task Runner
 
Streamline your development environment with docker
Streamline your development environment with dockerStreamline your development environment with docker
Streamline your development environment with docker
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copy
 
Towards the perfect Drupal Dev Machine
Towards the perfect Drupal Dev MachineTowards the perfect Drupal Dev Machine
Towards the perfect Drupal Dev Machine
 
Writing Pluggable Software
Writing Pluggable SoftwareWriting Pluggable Software
Writing Pluggable Software
 
DevFest 2022 - Cloud Workstation Introduction TaiChung
DevFest 2022 - Cloud Workstation Introduction TaiChungDevFest 2022 - Cloud Workstation Introduction TaiChung
DevFest 2022 - Cloud Workstation Introduction TaiChung
 
Google Cloud Monitor與Custom Metrics
Google Cloud Monitor與Custom MetricsGoogle Cloud Monitor與Custom Metrics
Google Cloud Monitor與Custom Metrics
 
Plack on SL4A in Yokohama.pm #8
Plack on SL4A in Yokohama.pm #8Plack on SL4A in Yokohama.pm #8
Plack on SL4A in Yokohama.pm #8
 
Instrumentación de entrega continua con Gitlab
Instrumentación de entrega continua con GitlabInstrumentación de entrega continua con Gitlab
Instrumentación de entrega continua con Gitlab
 
GKE_ How I get started_.pdf
GKE_ How I get started_.pdfGKE_ How I get started_.pdf
GKE_ How I get started_.pdf
 
Adventures in infrastructure as code
Adventures in infrastructure as codeAdventures in infrastructure as code
Adventures in infrastructure as code
 
Toolbox of a Ruby Team
Toolbox of a Ruby TeamToolbox of a Ruby Team
Toolbox of a Ruby Team
 
Plone deployment made easy
Plone deployment made easyPlone deployment made easy
Plone deployment made easy
 
GroongaアプリケーションをDockerコンテナ化して配布する
GroongaアプリケーションをDockerコンテナ化して配布するGroongaアプリケーションをDockerコンテナ化して配布する
GroongaアプリケーションをDockerコンテナ化して配布する
 
Docker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamDocker to the Rescue of an Ops Team
Docker to the Rescue of an Ops Team
 
Docker to the Rescue of an Ops Team
Docker to the Rescue of an Ops TeamDocker to the Rescue of an Ops Team
Docker to the Rescue of an Ops Team
 

Plus de KAI CHU CHUNG

Devfest 2023 - Service Weaver Introduction - Taipei.pdf
Devfest 2023 - Service Weaver Introduction - Taipei.pdfDevfest 2023 - Service Weaver Introduction - Taipei.pdf
Devfest 2023 - Service Weaver Introduction - Taipei.pdfKAI CHU CHUNG
 
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdf
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdfDevFest 2022 - Skaffold 2 Deep Dive Taipei.pdf
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdfKAI CHU CHUNG
 
Devfest 2021' - Artifact Registry Introduction (Taipei)
Devfest 2021' - Artifact Registry Introduction (Taipei)Devfest 2021' - Artifact Registry Introduction (Taipei)
Devfest 2021' - Artifact Registry Introduction (Taipei)KAI CHU CHUNG
 
Velero search & practice 20210609
Velero search & practice 20210609Velero search & practice 20210609
Velero search & practice 20210609KAI CHU CHUNG
 
GDG Cloud Taipei: Meetup #52 - Istio Security: API Authorization
GDG Cloud Taipei: Meetup #52 - Istio Security: API AuthorizationGDG Cloud Taipei: Meetup #52 - Istio Security: API Authorization
GDG Cloud Taipei: Meetup #52 - Istio Security: API AuthorizationKAI CHU CHUNG
 
如何透過 Go-kit 快速搭建微服務架構應用程式實戰
如何透過 Go-kit 快速搭建微服務架構應用程式實戰如何透過 Go-kit 快速搭建微服務架構應用程式實戰
如何透過 Go-kit 快速搭建微服務架構應用程式實戰KAI CHU CHUNG
 
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
Dev fest 2020 taiwan   how to debug microservices on kubernetes as a pros (ht...Dev fest 2020 taiwan   how to debug microservices on kubernetes as a pros (ht...
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...KAI CHU CHUNG
 
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源KAI CHU CHUNG
 
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes with ...
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes  with ...GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes  with ...
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes with ...KAI CHU CHUNG
 
GDG Devfest 2019 - Build go kit microservices at kubernetes with ease
GDG Devfest 2019 - Build go kit microservices at kubernetes with easeGDG Devfest 2019 - Build go kit microservices at kubernetes with ease
GDG Devfest 2019 - Build go kit microservices at kubernetes with easeKAI CHU CHUNG
 
Global GDG Leaders Summit, Google I/O 2018 經驗分享
Global GDG Leaders Summit, Google I/O 2018 經驗分享Global GDG Leaders Summit, Google I/O 2018 經驗分享
Global GDG Leaders Summit, Google I/O 2018 經驗分享KAI CHU CHUNG
 

Plus de KAI CHU CHUNG (11)

Devfest 2023 - Service Weaver Introduction - Taipei.pdf
Devfest 2023 - Service Weaver Introduction - Taipei.pdfDevfest 2023 - Service Weaver Introduction - Taipei.pdf
Devfest 2023 - Service Weaver Introduction - Taipei.pdf
 
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdf
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdfDevFest 2022 - Skaffold 2 Deep Dive Taipei.pdf
DevFest 2022 - Skaffold 2 Deep Dive Taipei.pdf
 
Devfest 2021' - Artifact Registry Introduction (Taipei)
Devfest 2021' - Artifact Registry Introduction (Taipei)Devfest 2021' - Artifact Registry Introduction (Taipei)
Devfest 2021' - Artifact Registry Introduction (Taipei)
 
Velero search & practice 20210609
Velero search & practice 20210609Velero search & practice 20210609
Velero search & practice 20210609
 
GDG Cloud Taipei: Meetup #52 - Istio Security: API Authorization
GDG Cloud Taipei: Meetup #52 - Istio Security: API AuthorizationGDG Cloud Taipei: Meetup #52 - Istio Security: API Authorization
GDG Cloud Taipei: Meetup #52 - Istio Security: API Authorization
 
如何透過 Go-kit 快速搭建微服務架構應用程式實戰
如何透過 Go-kit 快速搭建微服務架構應用程式實戰如何透過 Go-kit 快速搭建微服務架構應用程式實戰
如何透過 Go-kit 快速搭建微服務架構應用程式實戰
 
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
Dev fest 2020 taiwan   how to debug microservices on kubernetes as a pros (ht...Dev fest 2020 taiwan   how to debug microservices on kubernetes as a pros (ht...
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
 
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
COSCUP 2020 Google 技術 x 公共參與 x 開源 口罩地圖技術開源
 
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes with ...
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes  with ...GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes  with ...
GDG Cloud Taipei meetup #50 - Build go kit microservices at kubernetes with ...
 
GDG Devfest 2019 - Build go kit microservices at kubernetes with ease
GDG Devfest 2019 - Build go kit microservices at kubernetes with easeGDG Devfest 2019 - Build go kit microservices at kubernetes with ease
GDG Devfest 2019 - Build go kit microservices at kubernetes with ease
 
Global GDG Leaders Summit, Google I/O 2018 經驗分享
Global GDG Leaders Summit, Google I/O 2018 經驗分享Global GDG Leaders Summit, Google I/O 2018 經驗分享
Global GDG Leaders Summit, Google I/O 2018 經驗分享
 

Dernier

Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationkaushalgiri8080
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS
 
What is Binary Language? Computer Number Systems
What is Binary Language?  Computer Number SystemsWhat is Binary Language?  Computer Number Systems
What is Binary Language? Computer Number SystemsJheuzeDellosa
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AIABDERRAOUF MEHENNI
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendArshad QA
 

Dernier (20)

Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanation
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the ProcessExploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
What is Binary Language? Computer Number Systems
What is Binary Language?  Computer Number SystemsWhat is Binary Language?  Computer Number Systems
What is Binary Language? Computer Number Systems
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
 

Screenshot as a service

  • 1. SCREENSHOT AS A SERVICE
  • 2. HELLO! I am Cage Chung I am here because I like to share my experiences. You can find me at https://kaichu.io / QNAP 雲端應用部資深工程師
  • 3. https://www.facebook.com/groups/GCPUG.TW/ https://plus.google.com/u/0/communities/116100913832589966421 [您知道”GCPUG”要怎麼唸嗎?為什麼會有一隻狗在 Logo裡面呢?] Google Cloud Platform User Group的縮寫是GCPUG GCPUG直接唸成G.C.P.U.G?當然可以! 但它也可以分開來,唸成 G.C. PUG喔~ Pug,指的是巴哥犬,所以 GCPUG的Logo中間才會有一隻可愛的巴哥犬喲。 下次聽到別人說G.C. PUG 的時候,您就可以大聲 說:「我也是G.C. PUG社團成員!」
  • 4. Outline ◉ Waldo-gcp ◉ How to Screenshot ◉ Screenshot as service via GAE custom runtime ◉ Demo ◉ Study Info
  • 5. Waldo-gcp Let’s start with the first set of slides 1
  • 6. queue MetadataWaldo Server App Engine Task Queues Cloud Storage Optimal-way points managed VMs (python27) ... endpoints API (OAuth 2) Object Notification Cloude Datastore snapshot custom runtim (nodejs) Android App CSV uploadwaypoints Store/retrieve metadata waypoint map snapshot optim al road trip RESTful APIs for waypoints list, upload waypoints
  • 9. How to Screenshot Let’s start with the second set of slides 2
  • 10. Phamtonjs // yahoo.com.tw.js var page = require('webpage').create(); page.viewportSize = { width: 1440, height: 900 }; page.clipRect = { top: 0, left: 0, width: 1440, height: 900 }; page.open('http://yahoo.com.tw', function() { page.render('yahoo.com.tw.png'); phantom.exit(); }); // execute $ phantomjs yahoo.com.tw.js [Screen Capture | PhantomJS](http://phantomjs.org/screen-capture.html)
  • 11. Chromeless on AWS Lambda const chromeless = new Chromeless({ remote: true }) const screenshot = await chromeless .goto('http://yahoo.com.tw') .scrollTo(0, 2000) .screenshot() console.log(screenshot) await chromeless.end() [graphcool/chromeless: Chrome automation made simple. Runs locally or headless on AWS Lambda.](https://github.com/graphcool/chromeless)
  • 12. puppeteer const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setViewport({width: 1440, height: 900}); await page.goto('http://yahoo.com.tw', { waitUntil: 'networkidle' }); await page.screenshot({ path: 'yahoo.com.tw.png' }); browser.close(); })(); [GoogleChrome/puppeteer: Headless Chrome Node API](https://github.com/GoogleChrome/puppeteer)
  • 13. Screenshot as service via GAE custom runtime Let’s start with the third set of slides 3
  • 14. “ GAE screenshot service powered by Express and PhantomJS.
  • 15. app.yaml runtime: custom env: flex service: screenshot resources: cpu: 1 memory_gb: 1 disk_size_gb: 10 manual_scaling: instances: 1 handlers: - url: /.* script: app.js
  • 16. Dockerfile FROM launcher.gcr.io/google/debian8 RUN DEBIAN_FRONTEND=noninteractive apt-get update -y && apt-get install --no-install-recommends -y -q curl apt-utils build-essential ca-certificates libfreetype6 libfontconfig1 RUN echo "deb http://http.debian.net/debian jessie-backports main" > /etc/apt/sources.list.d/backports.list && apt-get update -y && apt-get install -y --no-install-recommends fonts-noto fonts-noto-cjk locales-all && apt-get clean && apt-get autoclean && apt-get autoremove && rm -rf /var/lib/apt/lists/* RUN mkdir /nodejs && curl http://nodejs.org/dist/v0.12.1/node-v0.12.1-linux-x64.tar.gz | tar xvzf - -C /nodejs --strip-components=1 ENV PATH $PATH:/nodejs/bin WORKDIR /app ADD package.json /app/ RUN npm install ADD . /app ENTRYPOINT ["/nodejs/bin/npm", "start"]
  • 17. package.json { "name": "screenshot-as-a-service", "description": "Website screenshot service powered by node.js and phantomjs for Waldo-gcp", "version": "1.1.0", "repository": "https://github.com/cage1016/screenshot-as-a-service", "engines": { "node": ">=0.8.4" }, "scripts": { "start": "node app.js" }, "dependencies": { "phantomjs": "^1.9.16", "express": "3.x", "config": "0.4.15", "request": "2.9.153" } }
  • 18. dispatch.yaml dispatch: - url: "*/favicon.ico" service: default - url: "*/_ah/api/*" service: default - url: "*/waypoints/*" service: waypoints - url: "*/screenshot/*" service: screenshot - url: "*/googleae8f4bcce8bec00c.html" service: ownership - url: "*/*" service: frontend
  • 19. DEMO Let’s start with the fourth set of slides 4
  • 22. Trips and Tips Let’s start with the fifth set of slides 5
  • 23. “Puppeteer is more easier to build screenshot as a service than phantomjs
  • 24. Study info ◉ GoogleChrome/puppeteer: Headless Chrome Node API - https://github.com/GoogleChrome/puppeteer ◉ graphcool/chromeless: Chrome automation made simple. Runs locally or headless on AWS Lambda. - https://github.com/graphcool/chromeless ◉ cage1016/screenshot-as-a-service: Website screenshot service powered by node.js and phantomjs - https://github.com/cage1016/screenshot-as-a-service ◉ Screen Capture | PhantomJS - http://phantomjs.org/screen-capture.html
  • 25. THANKS! Any questions? You can find me at https://kaichu.io / cage.chung@gmail.com