SlideShare a Scribd company logo
구글 앱엔진
http://blog.naver.com/jsrst
테스트페이지 : http://kimsqtest.appspot.com
1
- 목 차 -
2
1. Google App Engine 이란?
2. 구글 앱 엔진 시작하기
3. 구글 앱 엔진 개발환경
4. 로컬에서 실행
5. 프로젝트 만들기
6. 앱 엔진 등록
7. 나의 앱 엔진 만들기
8. 참고
 Google이 제공하는 응용 프로그램 개발 및 호스팅 플랫폼
 스토리지/장비/네트워크 등을 관리하지 않고도 호스팅 가능
 Google 웹 사이트에서 사용하는 동일한 기술을 제공
 개발자는 코드를 작성하여 배포하고 모니터링
 Google은 사용한 양 만큼만 비용을 청구
 장비 사용에 대한 기존의 호스팅 비용 청구 방식이 아닌
 스토리지/네트워크 트래픽/CPU/서비스에 대한 비용 청구 방식
1. Google App Engine 이란?
 사용료
 무료 할당량 이상 사용시 비용 청구
 한도 초과시 HTTP 403 or 리소스 할당 거부 or 경고
 GAE는 폭주률을 통해 과도한 리소스 폭주를 통제
할당량 한도
개발자당 애플리케이션 수 3
애플리케이션당 저장용량 500MB
애플리케이션당 파일 수 1,000
파일당 크기 1MB
할당량 한도
하루 이메일 수 2,000
일일 입력 대역폭 10,000MB
일일 출력 대역폭 10,000MB
하루 CPU 메가사이클 수 200,000,000
하루 HTTP 요청 수 650,000
하루 데이터저장소API 호출 수 2,500,000
하루 URLFetchAPI 호출 수 160,000
고정 할당량 1일 할당량
http://blog.naver.com/jsrst 3
 Google App Engine의 사용료는 리소스 사용량
1. Google App Engine 이란?
리소스 단위 단위 비용
Outgoing Bandwidth Giga Bytes $0.12
Incoming Bandwidth Giga Bytes $0.10
CPU Time CPU 시간 $0.10
Stored Data 월별 Giga Bytes $0.15
Recipients Emailed Recipients $0.0001
http://blog.naver.com/jsrst 4
 Google App Engine에서 제공하는 서비스
 JCache API를 이용한 Memcache
 Remote API를 이용한 Data Store 접근
 JavaMail을 이용한 Mail 송신 및 Mail 수신
 XMPP 기반 메신저 서비스
 Image 서비스를 이용한 resize, rotate, flip, crop
 Task Queue를 이용한 백그라운드 처리
 Google Account를 이용한 authentication 및 Email 접근
 Blob Store
 JSP/Servlet 지원
 JDO/JPA 기반 Data Store
 GWT(Google Web Toolkit)
1. Google App Engine 이란?
http://blog.naver.com/jsrst 5
 구글 계정을 앱 엔진에 접근 가능하게 만들기
 http://appengine.google.com
 SDK가 설치될 때 같이 설치된 샘플 프로젝트를 실행해보자.
 전화번호 입력 후 인증전화가 오면 인증번호 입력
2. 구글 앱 엔진 시작하기
http://blog.naver.com/jsrst 6
 성공적으로 등록.
 이제 http://appengine.google.com/ 으로 들어가면 등록된 어플리케이션을 볼
수 있다.
2. 구글 앱 엔진 시작하기
http://blog.naver.com/jsrst 7
 이클립스에 플러그인 설치
 Java SDK 설치는 생략 (jdk1.7.0_45 버전 이하에서는 jsp 호환에 문제가 생기므
로 그 이상을 추천한다) http://www.eclipse.org/downloads 에서 eclipse IDE for
Java EE Developers 윈도우 버전을 설치
 Help -> Install New SoftWare
 Work with 입력 칸에 http://dl.google.com/eclipse/plugin/4.3(이클립스 버전입
력)라고 입력한다.이클립스에 플러그인 설치
 Juno:4.2/ keploer : 4.3 / Ganymede : 3.4 / Galieo : 3.5 / Helios : 3.6 / Indigo : 3.7
3. 구글 앱 엔진 개발환경
http://blog.naver.com/jsrst 8
 이클립스에 플러그인 설치
 리스트의 플러그인 목록중 다음 항목을 설치
 라이선스 동의 후 설치
 이클립스 재 시작
3. 구글 앱 엔진 개발환경
http://blog.naver.com/jsrst 9
4. 로컬에서 실행
 Demo 어플리케이션 돌려보기
 eclipse 폴더 -> plugins -> com.google.appengine.eclipse.sdkbundle_1.8.6
내의 연습 예제 돌려보기
 cmd를 이용해서 위의 폴더 위치로 이동
 그 폴더 내의 appengine-java-sdk-1.8.6bin 내의 dev_appserver.cmd란 파일로
서버를 실행시키고 연습프로그램을 실행하려고 한다.
http://blog.naver.com/jsrst 10
4. 로컬에서 실행
 Demo 어플리케이션 돌려보기
 dev_appserver.cmd
C:appengineeclipsepluginscom.google.appengine.eclipse.sdkbundle_1.8.
6appengine-java-sdk-1.8.6demosguestbookwar 라고 명령어 입력
http://blog.naver.com/jsrst 11
4. 로컬에서 실행
 Demo 어플리케이션 돌려보기
 로컬호스트에서 어플리케이션 확인
http://blog.naver.com/jsrst 12
5. 프로젝트 만들기
 이클립스 인코딩 설정 바꾸기
 preferences -> General -> Workspace -> Text file encoding (other : UTF-8)
http://blog.naver.com/jsrst 13
5. 프로젝트 만들기
 프로젝트 생성
 새 프로젝트 생성하기에서
Web Application Project를 생성
 이름과 패키지를 적어넣고,
Use Google Web Toolkit은 체크 해지,
Use Google App Engine은 체크한 상태
로 Finish
http://blog.naver.com/jsrst 14
5. 프로젝트 만들기
 프로젝트 생성
 자바 앱엔진은 웹서버와의 정보교환에 the Java Servlet API란 것을 이용한다.
project의 src폴더 안에 서블릿 파일들이 위치하게 된다.
 web.xml. : 웹 서버가 요청을 받았을 때, 그 요청에 맞는 서블릿을 연결할 정보를 가지고 있
는 파일. 웹 어플리케이션의 모든 메타 정보를 가지고
있다. guestbook이라는 요청을 날리면 guestbook의
기능을 할 서블릿 파일을 찾아가야 하는데 바로 그
정보를 가지고 있다.
 appengine-web.xml : 웹 엔진을 배포하고 실행하는데
필요한 설정파일
http://blog.naver.com/jsrst 15
5. 프로젝트 만들기
 프로젝트 생성
 debug as -> web application을 실행
 콘솔 창에
the server is running 이라고 뜨면 제대로 된 것.
 이제, 브라우저에서 확인해본다.
(이클립스에서 실행시킨 서버는 포트가 다르다)
 링크를 클릭하고 들어가면 다음과 같이
코딩한 결과가 제대로 뜨는 것을 볼 수 있다.
http://blog.naver.com/jsrst 16
5. 프로젝트 만들기
 프로젝트 생성
 debug as -> web application을 실행
 콘솔 창에
the server is running 이라고 뜨면 제대로 된 것.
 이제, 브라우저에서 확인해본다.
(이클립스에서 실행시킨 서버는 포트가 다르다)
 링크를 클릭하고 들어가면 다음과 같이
코딩한 결과가 제대로 뜨는 것을 볼 수 있다.
http://blog.naver.com/jsrst 17
5. 프로젝트 만들기
 사용자 서비스
 앱 엔진은 구글의 인프라 중 유용한 몇 가지를 제공한다. 그 중 하나가 사용자 서비스
인데, 구글의 사용자 정보를 그대로 이용할 수 있다. 한마디로 우리가 앱 엔진을 만들
었을때 구글 계정이 있는 사용자에게 따로 로그인을 요구하지 않아도 된다는 것이다.
구글에서 로그인하면 앱 엔진의 어플리케이션에서도 로그인이 되어있게 된다. 그럼
따로 회원가입, 로그인 페이지나 로직을 만들지 않아도 되기 때문에 편하다. 이제 로그
인한 사용자에게 환영 메세지를 띄워보자.
 좀 전의 작성한 클래스 파일을 다음과 같이 수정한다.
http://blog.naver.com/jsrst 18
5. 프로젝트 만들기
 사용자 서비스
 브라우저에서 좀 전의 그 페이지를 다시 불러오면 다음과 같이 로그인 화면이 뜨는 것
을 볼 수 있다.
 기존의 gmail 계정으로 로그인 하면 다음과 같이 결과를 볼 수 있다.
http://blog.naver.com/jsrst 19
5. 프로젝트 만들기
 사용자 서비스
 브라우저에서 좀 전의 그 페이지를 다시 불러오면 다음과 같이 로그인 화면이 뜨는 것
을 볼 수 있다.
 기존의 gmail 계정으로 로그인 하면 다음과 같이 결과를 볼 수 있다.
http://blog.naver.com/jsrst 20
6. 앱 엔진 등록
 구글 계정에 등록하기
 파란색 구글 로고로 된 버튼을 누르고 Deploy to App Engine.
 미리 앱엔진을 만들어준
계정으로 로그인하고 동의
http://blog.naver.com/jsrst 21
 구글 계정에 등록하기
 앱엔진 프로젝트 설정을 클릭하여서 설정을 해준다.
6. 앱 엔진 등록
http://blog.naver.com/jsrst 22
 구글 계정에 등록하기
 완료되면 아래 그림처럼 구글 앱엔진을 이용해서 만든 앱이 돌아가는 것을 확인할 수 있다.
 구글 계정으로 앱엔진 등록했던 페이지로 가보면 statust에 non-deployment가 Running 상
태가 되어 있는 것을 볼 수 있다.
6. 앱 엔진 등록
http://blog.naver.com/jsrst 23
 사이트 접속
 식별이름.appspot.com
6. 앱 엔진 등록
http://blog.naver.com/jsrst 24
7. 나의 앱 엔진 만들기
 스타일 시트
 http://icant.co.uk/csstablegallery/tables/79.php 스타일시트 예제를 이용.
 war -> stylesheets 폴더를 만들고 main.css파일을 만든다.
 적용시키려고 하는 jsp및 html 파일 head부분에 <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> 를 추
가 시킨다.
 appengine-web.xml 파일에 <static-files> <include path="/stylesheets/*.css" /> </static-files>을 추가
table {
width: 650px;
border-collapse:collapse;
border:1px solid #FFCA5E;
}
caption {
font: 1.8em/1.8em Arial, Helvetica, sans-serif;
text-align: left;
text-indent: 10px;
background: url(bg_caption.jpg) right top;
height: 45px;
color: #FFAA00;
}
thead th {
background: url(bg_th.jpg) no-repeat right;
height: 47px;
color: #FFFFFF;
font-size: 0.8em;
font-weight: bold;
padding: 0px 7px;
margin: 20px 0px 0px;
text-align: left;
border-right: 1px solid #FCF1D4;
}
tbody tr {
background: url(bg_td1.jpg) repeat-x top;
}
tbody tr.odd {
background: #FFF8E8 url(bg_td2.jpg) repeat-x;
}
tbody th,td {
font-size: 0.8em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
padding: 10px 7px;
border-top: 1px solid #FFCA5E;
border-right: 1px solid #DDDDDD;
text-align: left;
}
a {
color: #777777;
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #F8A704;
text-decoration: underline;
}
tfoot th {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}
tfoot td {
background: url(bg_total.jpg) repeat-x bottom;
color: #FFFFFF;
height: 30px;
}
http://blog.naver.com/jsrst 25
7. 나의 앱 엔진 만들기
 이미지 삽입
 war -> images 폴더를 만들고 사용하려는 파일을 넣는다.
 appengine-web.xml 파일에 중 css를 넣었떤 소스에 <include path="/images/*.jpg" /> <include
path="/images/*.png" /> 를 추가하여서 모든 jpg나 png파일을 불러 읽을 수 있도록 한다.
 다시 deploy 시키고 어플리케이션 확인
http://blog.naver.com/jsrst 26
 알짜만 골라 배우는 자바 구글앱엔진 -카일 로치, 제프 더글라스 지음-
 http://rucifer.tistory.com/432
 http://blog.acronym.co.kr/322
 http://codejob.co.kr/docs/page/214/
8. 참고
http://blog.naver.com/jsrst 27

More Related Content

What's hot

비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초Gihyo Joshua Jang
 
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)Woncheol Lee
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효NAVER D2
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱NAVER D2
 
프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web AppsGihyo Joshua Jang
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs PrerenderChangwan Jun
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page ApplicationSangmin Yoon
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with AngularJT Jintae Jung
 
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기Haze Lee
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1성일 한
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
안드로이드 개발에 유용한 도구들
안드로이드 개발에 유용한 도구들안드로이드 개발에 유용한 도구들
안드로이드 개발에 유용한 도구들Sewon Ann
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Junsu Kim
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_frameworkJT Jintae Jung
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발NAVER D2
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2성일 한
 

What's hot (20)

비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초
 
프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)프로그레시브 웹앱(Pwa)
프로그레시브 웹앱(Pwa)
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
 
프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps프로그레시브 웹앱이란? - Progressive Web Apps
프로그레시브 웹앱이란? - Progressive Web Apps
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기
 
Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1Ionic으로 모바일앱 만들기 #1
Ionic으로 모바일앱 만들기 #1
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
안드로이드 개발에 유용한 도구들
안드로이드 개발에 유용한 도구들안드로이드 개발에 유용한 도구들
안드로이드 개발에 유용한 도구들
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
How_to_choose_the_right_framework
How_to_choose_the_right_frameworkHow_to_choose_the_right_framework
How_to_choose_the_right_framework
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
 
Modern PHP
Modern PHPModern PHP
Modern PHP
 

Similar to 구글앱엔진 스터디

IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0
IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0
IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0Beomsik Kyle Kim
 
Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Dong Chan Shin
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
Sencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-windowSencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-windowByoung Do Ahn
 
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기hajaekwon
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계Jinho Yoo
 
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016Amazon Web Services Korea
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재Hankyo
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료JinHyuck Churn
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정leejungwang
 
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for BeginnerOpenStack Korea Community
 
빠르고 지속적으로 전달하기: Continuous Delivery for Android
빠르고 지속적으로 전달하기: Continuous Delivery for Android빠르고 지속적으로 전달하기: Continuous Delivery for Android
빠르고 지속적으로 전달하기: Continuous Delivery for AndroidSangkyoon Nam
 
Bug sense 분석
Bug sense 분석Bug sense 분석
Bug sense 분석logdog
 
N02 app engineseminar
N02 app engineseminarN02 app engineseminar
N02 app engineseminarSun-Jin Jang
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodedpTablo
 
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)Amazon Web Services Korea
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발지수 윤
 
regular.express 발표자료
regular.express 발표자료regular.express 발표자료
regular.express 발표자료bdh92123
 

Similar to 구글앱엔진 스터디 (20)

IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0
IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0
IBM Bluemix handson lab_DevOps_Target_Deploy_configutation_java_petclinic_v1.0
 
Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
Sencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-windowSencha touch2-sdk-tools-window
Sencha touch2-sdk-tools-window
 
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
Softcon_하재권_Only javascript의 하이브리드 앱서버 도전기
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계
 
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016
AWS와 함께하는 DevOps이야기 :: 박선용 :: AWS Summit Seoul 2016
 
01.개발환경 교육교재
01.개발환경 교육교재01.개발환경 교육교재
01.개발환경 교육교재
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
Spring boot
Spring bootSpring boot
Spring boot
 
Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정Vue 뽀개기 1장 환경설정 및 spa설정
Vue 뽀개기 1장 환경설정 및 spa설정
 
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner
[OpenInfra Days Korea 2018] K8s workshop: Kubernetes for Beginner
 
빠르고 지속적으로 전달하기: Continuous Delivery for Android
빠르고 지속적으로 전달하기: Continuous Delivery for Android빠르고 지속적으로 전달하기: Continuous Delivery for Android
빠르고 지속적으로 전달하기: Continuous Delivery for Android
 
Bug sense 분석
Bug sense 분석Bug sense 분석
Bug sense 분석
 
N02 app engineseminar
N02 app engineseminarN02 app engineseminar
N02 app engineseminar
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)
AWS Code 서비스 특집 - 아마존 DevOps와 CodeDeploy, CodePipeline (윤석찬)
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 
regular.express 발표자료
regular.express 발표자료regular.express 발표자료
regular.express 발표자료
 

Recently uploaded

암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET
암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET
암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEETSoftwide Security
 
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일justuser0129
 
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptxcho9759
 
(독서광) 대격변 AI 시대, 데이터로 사고하고 데이터로 리드하라
(독서광) 대격변 AI 시대,   데이터로 사고하고   데이터로 리드하라(독서광) 대격변 AI 시대,   데이터로 사고하고   데이터로 리드하라
(독서광) 대격변 AI 시대, 데이터로 사고하고 데이터로 리드하라Jay Park
 
INU Graduation Powerpoint-Rabbit FootPrint
INU Graduation Powerpoint-Rabbit FootPrintINU Graduation Powerpoint-Rabbit FootPrint
INU Graduation Powerpoint-Rabbit FootPrintahghwo99
 
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외Jay Park
 
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPTpcupcu20831004
 

Recently uploaded (7)

암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET
암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET
암호화 보안USB & 외장하드 중앙관리 솔루션 ‘DataLocker SafeConsole’_DATASHEET
 
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일
인천대학교 캡스톤디자인(2) Pencil me 프레젠테이션 발표자료 파일
 
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx
캡스톤-디자인-최종-발표-(대상혁) 24년도 졸업작품발표회 ppt.pptx
 
(독서광) 대격변 AI 시대, 데이터로 사고하고 데이터로 리드하라
(독서광) 대격변 AI 시대,   데이터로 사고하고   데이터로 리드하라(독서광) 대격변 AI 시대,   데이터로 사고하고   데이터로 리드하라
(독서광) 대격변 AI 시대, 데이터로 사고하고 데이터로 리드하라
 
INU Graduation Powerpoint-Rabbit FootPrint
INU Graduation Powerpoint-Rabbit FootPrintINU Graduation Powerpoint-Rabbit FootPrint
INU Graduation Powerpoint-Rabbit FootPrint
 
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외
2024년 5월 27일 개발자 이야기 - AWS 람다의 내부 동작 방식 외
 
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT
인천대학교 컴퓨터공학과 아틀란티스 졸업작품 commINUty PPT
 

구글앱엔진 스터디

  • 2. - 목 차 - 2 1. Google App Engine 이란? 2. 구글 앱 엔진 시작하기 3. 구글 앱 엔진 개발환경 4. 로컬에서 실행 5. 프로젝트 만들기 6. 앱 엔진 등록 7. 나의 앱 엔진 만들기 8. 참고
  • 3.  Google이 제공하는 응용 프로그램 개발 및 호스팅 플랫폼  스토리지/장비/네트워크 등을 관리하지 않고도 호스팅 가능  Google 웹 사이트에서 사용하는 동일한 기술을 제공  개발자는 코드를 작성하여 배포하고 모니터링  Google은 사용한 양 만큼만 비용을 청구  장비 사용에 대한 기존의 호스팅 비용 청구 방식이 아닌  스토리지/네트워크 트래픽/CPU/서비스에 대한 비용 청구 방식 1. Google App Engine 이란?  사용료  무료 할당량 이상 사용시 비용 청구  한도 초과시 HTTP 403 or 리소스 할당 거부 or 경고  GAE는 폭주률을 통해 과도한 리소스 폭주를 통제 할당량 한도 개발자당 애플리케이션 수 3 애플리케이션당 저장용량 500MB 애플리케이션당 파일 수 1,000 파일당 크기 1MB 할당량 한도 하루 이메일 수 2,000 일일 입력 대역폭 10,000MB 일일 출력 대역폭 10,000MB 하루 CPU 메가사이클 수 200,000,000 하루 HTTP 요청 수 650,000 하루 데이터저장소API 호출 수 2,500,000 하루 URLFetchAPI 호출 수 160,000 고정 할당량 1일 할당량 http://blog.naver.com/jsrst 3
  • 4.  Google App Engine의 사용료는 리소스 사용량 1. Google App Engine 이란? 리소스 단위 단위 비용 Outgoing Bandwidth Giga Bytes $0.12 Incoming Bandwidth Giga Bytes $0.10 CPU Time CPU 시간 $0.10 Stored Data 월별 Giga Bytes $0.15 Recipients Emailed Recipients $0.0001 http://blog.naver.com/jsrst 4
  • 5.  Google App Engine에서 제공하는 서비스  JCache API를 이용한 Memcache  Remote API를 이용한 Data Store 접근  JavaMail을 이용한 Mail 송신 및 Mail 수신  XMPP 기반 메신저 서비스  Image 서비스를 이용한 resize, rotate, flip, crop  Task Queue를 이용한 백그라운드 처리  Google Account를 이용한 authentication 및 Email 접근  Blob Store  JSP/Servlet 지원  JDO/JPA 기반 Data Store  GWT(Google Web Toolkit) 1. Google App Engine 이란? http://blog.naver.com/jsrst 5
  • 6.  구글 계정을 앱 엔진에 접근 가능하게 만들기  http://appengine.google.com  SDK가 설치될 때 같이 설치된 샘플 프로젝트를 실행해보자.  전화번호 입력 후 인증전화가 오면 인증번호 입력 2. 구글 앱 엔진 시작하기 http://blog.naver.com/jsrst 6
  • 7.  성공적으로 등록.  이제 http://appengine.google.com/ 으로 들어가면 등록된 어플리케이션을 볼 수 있다. 2. 구글 앱 엔진 시작하기 http://blog.naver.com/jsrst 7
  • 8.  이클립스에 플러그인 설치  Java SDK 설치는 생략 (jdk1.7.0_45 버전 이하에서는 jsp 호환에 문제가 생기므 로 그 이상을 추천한다) http://www.eclipse.org/downloads 에서 eclipse IDE for Java EE Developers 윈도우 버전을 설치  Help -> Install New SoftWare  Work with 입력 칸에 http://dl.google.com/eclipse/plugin/4.3(이클립스 버전입 력)라고 입력한다.이클립스에 플러그인 설치  Juno:4.2/ keploer : 4.3 / Ganymede : 3.4 / Galieo : 3.5 / Helios : 3.6 / Indigo : 3.7 3. 구글 앱 엔진 개발환경 http://blog.naver.com/jsrst 8
  • 9.  이클립스에 플러그인 설치  리스트의 플러그인 목록중 다음 항목을 설치  라이선스 동의 후 설치  이클립스 재 시작 3. 구글 앱 엔진 개발환경 http://blog.naver.com/jsrst 9
  • 10. 4. 로컬에서 실행  Demo 어플리케이션 돌려보기  eclipse 폴더 -> plugins -> com.google.appengine.eclipse.sdkbundle_1.8.6 내의 연습 예제 돌려보기  cmd를 이용해서 위의 폴더 위치로 이동  그 폴더 내의 appengine-java-sdk-1.8.6bin 내의 dev_appserver.cmd란 파일로 서버를 실행시키고 연습프로그램을 실행하려고 한다. http://blog.naver.com/jsrst 10
  • 11. 4. 로컬에서 실행  Demo 어플리케이션 돌려보기  dev_appserver.cmd C:appengineeclipsepluginscom.google.appengine.eclipse.sdkbundle_1.8. 6appengine-java-sdk-1.8.6demosguestbookwar 라고 명령어 입력 http://blog.naver.com/jsrst 11
  • 12. 4. 로컬에서 실행  Demo 어플리케이션 돌려보기  로컬호스트에서 어플리케이션 확인 http://blog.naver.com/jsrst 12
  • 13. 5. 프로젝트 만들기  이클립스 인코딩 설정 바꾸기  preferences -> General -> Workspace -> Text file encoding (other : UTF-8) http://blog.naver.com/jsrst 13
  • 14. 5. 프로젝트 만들기  프로젝트 생성  새 프로젝트 생성하기에서 Web Application Project를 생성  이름과 패키지를 적어넣고, Use Google Web Toolkit은 체크 해지, Use Google App Engine은 체크한 상태 로 Finish http://blog.naver.com/jsrst 14
  • 15. 5. 프로젝트 만들기  프로젝트 생성  자바 앱엔진은 웹서버와의 정보교환에 the Java Servlet API란 것을 이용한다. project의 src폴더 안에 서블릿 파일들이 위치하게 된다.  web.xml. : 웹 서버가 요청을 받았을 때, 그 요청에 맞는 서블릿을 연결할 정보를 가지고 있 는 파일. 웹 어플리케이션의 모든 메타 정보를 가지고 있다. guestbook이라는 요청을 날리면 guestbook의 기능을 할 서블릿 파일을 찾아가야 하는데 바로 그 정보를 가지고 있다.  appengine-web.xml : 웹 엔진을 배포하고 실행하는데 필요한 설정파일 http://blog.naver.com/jsrst 15
  • 16. 5. 프로젝트 만들기  프로젝트 생성  debug as -> web application을 실행  콘솔 창에 the server is running 이라고 뜨면 제대로 된 것.  이제, 브라우저에서 확인해본다. (이클립스에서 실행시킨 서버는 포트가 다르다)  링크를 클릭하고 들어가면 다음과 같이 코딩한 결과가 제대로 뜨는 것을 볼 수 있다. http://blog.naver.com/jsrst 16
  • 17. 5. 프로젝트 만들기  프로젝트 생성  debug as -> web application을 실행  콘솔 창에 the server is running 이라고 뜨면 제대로 된 것.  이제, 브라우저에서 확인해본다. (이클립스에서 실행시킨 서버는 포트가 다르다)  링크를 클릭하고 들어가면 다음과 같이 코딩한 결과가 제대로 뜨는 것을 볼 수 있다. http://blog.naver.com/jsrst 17
  • 18. 5. 프로젝트 만들기  사용자 서비스  앱 엔진은 구글의 인프라 중 유용한 몇 가지를 제공한다. 그 중 하나가 사용자 서비스 인데, 구글의 사용자 정보를 그대로 이용할 수 있다. 한마디로 우리가 앱 엔진을 만들 었을때 구글 계정이 있는 사용자에게 따로 로그인을 요구하지 않아도 된다는 것이다. 구글에서 로그인하면 앱 엔진의 어플리케이션에서도 로그인이 되어있게 된다. 그럼 따로 회원가입, 로그인 페이지나 로직을 만들지 않아도 되기 때문에 편하다. 이제 로그 인한 사용자에게 환영 메세지를 띄워보자.  좀 전의 작성한 클래스 파일을 다음과 같이 수정한다. http://blog.naver.com/jsrst 18
  • 19. 5. 프로젝트 만들기  사용자 서비스  브라우저에서 좀 전의 그 페이지를 다시 불러오면 다음과 같이 로그인 화면이 뜨는 것 을 볼 수 있다.  기존의 gmail 계정으로 로그인 하면 다음과 같이 결과를 볼 수 있다. http://blog.naver.com/jsrst 19
  • 20. 5. 프로젝트 만들기  사용자 서비스  브라우저에서 좀 전의 그 페이지를 다시 불러오면 다음과 같이 로그인 화면이 뜨는 것 을 볼 수 있다.  기존의 gmail 계정으로 로그인 하면 다음과 같이 결과를 볼 수 있다. http://blog.naver.com/jsrst 20
  • 21. 6. 앱 엔진 등록  구글 계정에 등록하기  파란색 구글 로고로 된 버튼을 누르고 Deploy to App Engine.  미리 앱엔진을 만들어준 계정으로 로그인하고 동의 http://blog.naver.com/jsrst 21
  • 22.  구글 계정에 등록하기  앱엔진 프로젝트 설정을 클릭하여서 설정을 해준다. 6. 앱 엔진 등록 http://blog.naver.com/jsrst 22
  • 23.  구글 계정에 등록하기  완료되면 아래 그림처럼 구글 앱엔진을 이용해서 만든 앱이 돌아가는 것을 확인할 수 있다.  구글 계정으로 앱엔진 등록했던 페이지로 가보면 statust에 non-deployment가 Running 상 태가 되어 있는 것을 볼 수 있다. 6. 앱 엔진 등록 http://blog.naver.com/jsrst 23
  • 24.  사이트 접속  식별이름.appspot.com 6. 앱 엔진 등록 http://blog.naver.com/jsrst 24
  • 25. 7. 나의 앱 엔진 만들기  스타일 시트  http://icant.co.uk/csstablegallery/tables/79.php 스타일시트 예제를 이용.  war -> stylesheets 폴더를 만들고 main.css파일을 만든다.  적용시키려고 하는 jsp및 html 파일 head부분에 <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> 를 추 가 시킨다.  appengine-web.xml 파일에 <static-files> <include path="/stylesheets/*.css" /> </static-files>을 추가 table { width: 650px; border-collapse:collapse; border:1px solid #FFCA5E; } caption { font: 1.8em/1.8em Arial, Helvetica, sans-serif; text-align: left; text-indent: 10px; background: url(bg_caption.jpg) right top; height: 45px; color: #FFAA00; } thead th { background: url(bg_th.jpg) no-repeat right; height: 47px; color: #FFFFFF; font-size: 0.8em; font-weight: bold; padding: 0px 7px; margin: 20px 0px 0px; text-align: left; border-right: 1px solid #FCF1D4; } tbody tr { background: url(bg_td1.jpg) repeat-x top; } tbody tr.odd { background: #FFF8E8 url(bg_td2.jpg) repeat-x; } tbody th,td { font-size: 0.8em; line-height: 1.4em; font-family: Arial, Helvetica, sans-serif; color: #777777; padding: 10px 7px; border-top: 1px solid #FFCA5E; border-right: 1px solid #DDDDDD; text-align: left; } a { color: #777777; font-weight: bold; text-decoration: underline; } a:hover { color: #F8A704; text-decoration: underline; } tfoot th { background: url(bg_total.jpg) repeat-x bottom; color: #FFFFFF; height: 30px; } tfoot td { background: url(bg_total.jpg) repeat-x bottom; color: #FFFFFF; height: 30px; } http://blog.naver.com/jsrst 25
  • 26. 7. 나의 앱 엔진 만들기  이미지 삽입  war -> images 폴더를 만들고 사용하려는 파일을 넣는다.  appengine-web.xml 파일에 중 css를 넣었떤 소스에 <include path="/images/*.jpg" /> <include path="/images/*.png" /> 를 추가하여서 모든 jpg나 png파일을 불러 읽을 수 있도록 한다.  다시 deploy 시키고 어플리케이션 확인 http://blog.naver.com/jsrst 26
  • 27.  알짜만 골라 배우는 자바 구글앱엔진 -카일 로치, 제프 더글라스 지음-  http://rucifer.tistory.com/432  http://blog.acronym.co.kr/322  http://codejob.co.kr/docs/page/214/ 8. 참고 http://blog.naver.com/jsrst 27