MEAN Stack Front to Back

Presentation on theme: "MEAN Stack Front to Back"— Presentation transcript:

1 MEAN Stack Front to Back
(MEANAuthApp) 클라우드 서비스 Heroku에 포팅하기

2 클라우드 컴퓨팅

3 클라우드 컴퓨팅 8 Top Node.js Hosting Services Amazon Web Services Heroku
AppFog Microsoft Azure RedHat OpenShift EngineYard Xervo (Formerly Modulus) Joyent

4 사용할 클라우드 서비스 Node.js Platform-as-a-service MongoDB
Database-as-a-Service

5 Heroku 무료 클라우드 서비스 제공. 회원가입 필요

6 준비 app.js 에서 포트번호 설정 수정 // Port Number
const port = process.env.PORT || 3000; 클라우드 서버에서 할당하는 환경변수 PORT를 포트번호로 사용 process.env 는 node.js에서 사용하는 사용자 환경 객체

7 준비 auth.service.ts 에서 호스트 주소를 상대주소로 수정

8 서비스 빌드 수정된 내용으로 서비스 다시 빌드 > cd angular-src > ng build

9 Heroku 접속 Heroku 접속, 서비스 가입, 로그인 Dashboard 에서 새로운 app 생성
Dashboard 에서 새로운 app 생성

10 Heroku CLI 설치 https://devcenter.heroku.com/ 접속 Node.js 선택
Get started with node.js Heroku Command Line Interface (CLI) 설치 (windows 버전) I have installed the Heroku CLI 버튼 클릭

11 Git 설치 Git이란? Git 설치 souce 관리를 위한 분산 버전 관리 시스템
최초로 리눅스 토발즈가 리눅스 커널 개발에 이용하려고 개발 Git 설치

12 Google에서 ‘git 명령어’ 검색

13 Git 저장소 초기화 CMD에서 프로젝트 폴더로 이동 Git 버전 확인 Git 저장소 초기화
> cd meanauthapp Git 버전 확인 > git --version Git 저장소 초기화 > git init

14 새로운 app 생성 프로젝트 폴더에서 > heroku create (heroku 서버에 새로운 app 생성)
이메일, 암호 입력 생성된 App 주소 확인

15 새로운 app 생성 브라우저로 접속 확인 Heroku 대쉬보드에서 추가된 app 확인. 설정 가능

16 코드 이전, 빌드, 실행 프로젝트 폴더에서 Git 환경설정 Git commit Git push
> git add . Git 환경설정 >git config --global user. >git config --global user.name "Byoungcheon Lee“ Git commit >git commit -m ‘first’ 구별할 수 있는 메시지 추가 Git push > git push heroku master 실제 코드 이전, 빌드, 실행

17 서버 접속 확인 완성 https://ancient-sierra-86257.herokuapp.com/
MongoDB 설정 안해서 실제 DB 연결 동작은 안됨

18 mlab (클라우드 MongoDB 서비스)
MongoDB 기반 클라우드 DB 서비스 (DB-as-a-service) 회원 가입 필요

19 mlab mlab.com에 로그인, DB 생성 Create new  sandbox (free)  region  database name  submit order (meanauthapp)

20 mlab DB User 생성 복사

21 mlab add  commit  push config/database.js 수정 Git mlab의 DB 주소로 수정
생성한 user/password 정보 입력 Git > git add . > git commit -m ‘Dblink’ > git push heroku master module.exports = { // database: 'mongodb://localhost:27017/meanauth', //dev // database: database: secret: 'yoursecret' } add  commit  push

22 최종 완성 서버 재접속 https://ancient-sierra-86257.herokuapp.com/
사용자 등록, 로그인 기능 확인

23 과제 클라우드에 포팅한 자신의 서비스를 자신의 홈페이지에 링크하기
클라우드에 포팅한 자신의 서비스를 자신의 홈페이지에 링크하기 Heroku 이외에 다른 클라우드 서비스를 사용해도 상관 없음