angular-meteor.com의 Socially Merge를 따라하며 내용을 요약해 보았다. socially merge는 meteor와 ionic의 조합을 webpack으로 묶어 프로젝트를 구성해보는 과정이다. 여기서 익힐 수 있는 것은 Angular 로 작성된 ionic을 프론트앤드로 사용하고 metetor를 백앤드로 구성하는 방법을 배울 수 있다.
Webpack 기반 프로젝트 초기화
meteor와 ionic는 서로의 CLI를 제공한다. ionic을 먼저 설정한다.
$ npm install -g ionic cordova
초기 프로젝트 구성을 ionic CLI를 통해 생성한다.
$ ionic start whatsapp blank --cordova --skip-link
...
? Install the free Ionic Pro SDK and connect your app? (Y/n) n
$ cd whatsapp
$ ionic serve
Ionic은 Angular를 사용하기 때문에 Typescript 최신버전을 설치한다.
$ npm install --save typescript
타입스크립트기반에서 외부라이브러리를 사용하기 위해서 src/declarations.d.ts 파일을 생성해 놓는다. d.ts작성법은 공식문서를 참조한다. 다음으로 Ionic 3가 Webpack을 기반으로 빌드되는 설정을 package.json에 추가한다.
// package.json
"config": {
"ionic_webpack": "./webpack.config.js"
}
Ionic은 webpack config에 대한 샘플 파일을 제공하고 이를 복사한다. webpack.config.js안에는 dev와 prod환경 기본값이 설정되어 있다.
$ cp node_modules/@ionic/app-scripts/config/webpack.config.js .
Ionic 에 Meteor 설정
프로젝트 폴더의 루트에 api 폴더를 만들고 이를 Meteor의 백앤드로 사용하는 설정을 webpack.config.js에 한다. meteor 관련된 것은 external로 취급하는 것 같다.
// dev, prod양쪽에 넣는다.
resolve: {
...
alias: {
'api': path.resolve(__dirname, 'api/server')
}
},
externals: [ resolveExternals ],
plugins: [ ..., new webpack.ProvidePlugin({ __extends: 'typescript-extends' }) ],
node: { ..., __dirname: true }
// 맨 마지막에 넣음
function resolveExternals(context, request, callback) {
return resolveMeteor(request, callback) ||
callback();
}
function resolveMeteor(request, callback) {
var match = request.match(/^meteor\/(.+)$/);
var pack = match && match[1];
if (pack) {
callback(null, 'Package["' + pack + '"]');
return true;
}
}
다음으로 Meteor를 외부 의존하는 것으로 tsconfig.json에 Meteor관련 내용을 추가한다.
"compilerOptions": {
"baseUrl": ".",
"modules": "commonjs",
"paths": { "api/*": ["./api/server/*"],
...,
"skipLibCheck": true,
"stripInternal": true,
"noImplicitAny": false,
"types": [
"@types/meteor"
]
},
"include": [ ..., "api/**/*.ts" ],
"exclude": [ ..., "api/node_modules", "api" ]
typescript-extends 패키지와 meteor 타입 패키지를 설치한다.
$ npm install --save-dev typescript-extends
$ npm install --save-dev @types/meteor
Ionic serve를 실행하고 브라우져의 console을 보면 다음 오류가 나온다. 이를 위해 src/app/app.component.ts에 cordova 설정을 한다.
// Chrome devtools 메세지
Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
// src/app/app.component.ts 설정
Meteor Server 생성 및 설정
Ionic의 webpack과 tsconfig안에 Meteor 서버 설정을 했고, Meteor CLI를 이용해 백앤드를 구성한다.
// 미티어 설치
$ curl https://install.meteor.com/ | sh
// api 폴더 미티어 초기화
$ meteor create api
api 폴더 밑으로 생성된 node_modules, client 폴더를 삭제하고, package.json, package-lock.json 파일도 삭제한다.
$ rm -rf api/node_modules
$ rm -rf api/client
$ rm api/package.json
$ rm api/package-lock.json
Meteor에서 사용하는 것을 Ionic 으로 심볼릭 링크를 건다.
$ cd api
api$ ln -s ../package.json
api$ ln -s ../pack-lock.json
api$ ln -s ../node_modules
api$ ln -s ../src/declarations.d.ts
Meteor 백앤드를 Typescript기반으로 개발하기 위해 다음 패키지를 설치한다.
api$ meteor add barbatus:typescript
// 별도 필요 패키지 설치
$ npm install --save babel-runtime
$ npm install --save meteor-node-stubs
$ npm install --save meteor-rxjs
Typescript의 tsconfig.json 파일을 api 폴더안에 생성하고 다음 내역을 붙여넣는다.
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"skipLibCheck": true,
"stripInternal": true,
"noImplicitAny": false,
"types": [
"@types/meteor"
]
},
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Meteor의 server/main.js를 main.ts로 바꾼다. 위에서 설치한 meteor-rxjs는 클라이언트단의 Meteor를 RxJS Observable기반으로 사용할 수 있도록 한다.
// 예) Meteor 클라이언트단 Collection 구성
import { MongoObservable } from 'meteor-rxjs';
export const Chats = new MongoObservable.Collection('chats');
Meteor Client 준비
Meteor Server에 접속하기 위해 Meteor Client가 필요하기 때문에 하나의 bundler로 만들어 import해서 사용한다. 번들링도구를 설치한다.
$ sudo npm install -g meteor-client-bundler
// 필요 패키지를 설치
$ npm install --save-dev tmp
package.json 에 번들링 명령어를 설정하고, 번들링 명령을 수행한다.
// package.json
"scripts": {
...,
"meteor-client:bundle": "meteor-client bundle -s api"
}
// 번들링
$ npm run meteor-client:bundle
클라이언트 main.ts에 번들 내역을 import한다.
// src/app/main.ts
import "meteor-client";
Ionic & Meteor 기동
Ionic 기동
$ ionic serve
Meteor 기동
$ cd api
api$ meteor
ionic HTTP는 8100이고, meteor client는 server에 websocket 3000 port로 접속을 한다.
'Meteor > Angular + Meteor' 카테고리의 다른 글
| [Meteor 1.6] Clarity CSS Framework 적용하기 (0) | 2017.11.15 |
|---|---|
| [Meteor 1.6] Angular CLI + Meteor 기반 프로젝트 만들기 (0) | 2017.11.08 |
