아이오닉 소스를 파이어베이스에 배포하는 방법

Ionic 기능

  • Angular에서 아이오닉이 제공하는 컴포넌트로 앱 UI를 구현할 수 있습니다.
  • 안드로이드, iOS 네이비브 API를 사용할 수 있습니다.(카메라, 푸시 등)

UI Components, API, Ionic Native, Ionicons등 제

설치

1
2
3
$ npm install -g ionic@latest cordova
$ ionic start iweather [ blank / tab / sidemenu ] []()
$ ionic serve

page / provider 생성

1
2
$ ionic g page settings
$ ionic g provider weather

Native

  • core package 설치

    1
    npm install @ionic-native/core --save

  • Native package 설치

1
2
npm install @ionic-native/camera --save
ionic cordova plugin add cordova-plugin-camera
  • NgModule에 추가
  • ./src/app/app.module.ts
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ...

    import { Camera } from '@ionic-native/camera';

    ...

    @NgModule({
      ...

      providers: [
        ...
        Camera
        ...
      ]
      ...
    })
    export class AppModule { }

Firebase Web Deploy

ionic web build

1
$ ionic build browser

Firebase 설치 - public folder를 www로 지정

1
2
$ firebase init
$ firebase deploy

Ionic View

Dashboard

개발서버 Proxy설정

  • ionic.config.json 파일에 proxies 추가
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      "name": "ionic-example",
      "app_id": "xxxxxxxx",
      "type": "ionic-angular",
      "integrations": {},
      "proxies":[
        {
          "path":"/api",
          "proxyUrl":"http://yourService.com/api"
        }
      ]
    }

##ionic page로 url 접근

1
$ ionic g page about

src/pages/about/about.ts

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
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the AboutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage({
  name: 'about',
  segment: 'about'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class AboutPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }

}

reference

example

1
2
3
4
5
$ npm install -g ionic@latest cordova
$ ionic start iweather tab
$ ionic serve
$ ionic g page settings
$ ionic g provider weather

test

1
2
3
4
5
6
$ ionic cordova build ios
$ ionic cordova emulate ios

$ ionic cordova build android
$ ionic cordova emulate android
$ cordova build android --verbose //상세 정

몽고DB troubleshooting. Centos7 MongoDB 3.2.10 실행 문제

몽고DB 실행시 아래와 같은 에러 발생!!

1
2
3
4
5
6
# systemctl start mongod
Job for mongod.service failed because the control process exited with error code. See “systemctl status mongod.service” and “journalctl -xe” for details.
# systemctl status mongo.service
● mongo.service
Loaded: not-found (Reason: No such file or directory)
   Active: inactive (dead)

그냥 버전 업그레이드!!

몇일을 모든 검색을 동원하여 시도했으나…다 실패…
selinux랑 문제가 있는거 같다
그냥 MongoDB 3.2.7 설치하니 그냥 됐다
너무 잘된다…

1
yum install -y mongodb-org-3.2.7 mongodb-org-server-3.2.7 mongodb-org-shell-3.2.7 mongodb-org-mongos-3.2.7 mongodb-org-tools-3.2.7

몽고DB CentOS7 설치. MongoDB Installation guide for CentOS 7

yum으로 mongodb 설치chsh -s which zsh

yum repository 설정

vi /etc/yum.repos.d/mongodb-org-3.2.repo 명령 실행 후 아래내용 붙여넣기

1
2
3
4
5
6
[mongodb-org-3.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.2.asc

몽고DB 설치

1
2
3
4

yum -y install mongodb-org mongodb-org-server

yum install -y mongodb-org-3.2.7 mongodb-org-server-3.2.7 mongodb-org-shell-3.2.7 mongodb-org-mongos-3.2.7 mongodb-org-tools-3.2.7

몽고 DB 접속 가능한 IP 추가

vi /etc/mongod.conf

아래 내용 입력

1
2
3
4
# network interfaces
net:
port: 27017
bindIp: [127.0.0.1, xxx.xxx.xxx.xxx] # Listen to local interface only, comment to listen on all interfaces.

몽고 DB Start-Up

1
2

systemctl start mongod

몽고 DB 상태체크

1
systemctl status mongod

몽고 DB 포트 변경

기본포트: 27017

1
mongo --port 22222

방화벽 오픈

1
2
3

firewall-cmd --permanent --zone=public --add-port=27017/tcp
firewall-cmd --reload

삭제

1
2
3
4
5
6

service mongod stop
yum -y erase $(rpm -qa | grep mongodb-org)
rm -rf /var/log/mongodb
rm -rf /var/lib/mongo
rm -rf /var/run/mongodb/

brew로 mongodb 설치

1
2
3
brew update

brew install mongodb

mongod.conf dbPath 수정 (옵션)

1
2
3
4
5
6
7
8
9
10
cat /usr/local/etc/mongod.conf 

systemLog:
  destination: file
  path: /usr/local/var/log/mongodb/mongo.log
  logAppend: true
storage:
  dbPath: /usr/local/var/mongodb
net:
  bindIp: 127.0.0.1

brew services로 mongodb 실행

1
2
brew services start mongodb
brew services stop mongodb

mongod 실행방법

1
mongod --dbpath <path to data directory>

reference

IE 8,9 Crossdomain 통신시 제한사항

  • IE9에서 Crossdomain 통신시 제한사항

    IE8, IE9는 CSRF(Cross-Site Request Forgery)공격을 방어하기 위해 XDomainRequest 객체를 사용하여 기능을 제한.
    (IE10부터 XMLHTTPRequest를 사용한 CORS(Cross-Origin Resource Sharing) 지원)

    IE8, IE9를 지원하기 위해서는 Sever - Client 통신간 XDomainRequest 객체에서 허용한 아래의 규약만 사용해야한다.

    1. HTTP, HTTPS 프로토콜만 사용가능
    2. GET, POST 만 사용가능
    3. 요청시 Custom Header 사용 불가
    4. Content-Type은 text/plain만 지원
    5. Response Header의 Set-Cookie는 무시됨
    6. Request시 동일한 scheme을 사용해야 함
  • 검색을 통해 나오는 Crossdomain 해결 방법
    jQuery에서 XDomainRequest(IE9)를 지원을 포기했기 때문에 Cross Domain으로 ajax 통신을 할 경우 IE에서 분기 처리하여 XDomainRequest의 제약조건 하에서 통신을 해야한다
    검색해서 나오는 Javascript 해결방법은 내부에서 XMLHttpRequest객체 대신 XDomainRequest 객체를 생성해서 통신을 하기 때문에 위와 같은 제한 사항들이 그대로 적용된다.

  • IE9에서 Crossdomain 통신이 잘되는 경우는 환경설정 값을 바꾼 경우다.

    IE9에서 XMLHttpRequest 객체가 구현이 되어 있고 생성도 된다.

    그러나 send시 엑세스 거부된다.

    IE9에서 설정을 변경할 시 XMLHttpRequest객체를 사용할 수 있어 제한사항이 없어진다.

    그러나 이방법은 사용자가 IE9 설정을 변경해야 하기 때문에 IE9대응이라 보기가 힘들다.

    img

  • Naver, Pikecast, 직방 분석 결과

    Naver, Pikicast는 모두 1개의 도메인으로 API를 제공한다.
    Crossdomain으로 통신을 하는 직방은 IE9에서 기능 동작이 동작하지 않는다.
    jquery cross-domain 관련 Library를 사용한것으로 보이지만 어차피 이것도 내부적으로 XDomainRequest로 통신을 하기 때문에 제한사항을 피할 수 없다.

  • JSONP 사용시 제한사항
    JSONP 요청은 GET요청만 된다
    JSONP 요청시 Browser의 UI Thread가 멈추게 되어 인터렉션 부분의 개발이 어렵다.
    JSONP는 동기 처리가 되지 않는다. jQuery의 경우 async:false 옵션이 되지 않는다.
  • Internet Explorer 9 상세 내용
    - Initial release: 2011-03-14
    - Stable release: 2016-01-12 9.0.46 (v9.0.8112.16421)
    - Operation system: Windows 7, Windows Vista Service Pack2, Windows Server 2008 Service Pack2, Windows Server 2008 R2, Windows Phone 7.5
    - Javascript Engines Tridnet 5.0, Chakra