2017년 5월 28일 일요일

Firebase Functions - backend 로직을 구축해보자.

아예 functions라는 이름의 HTTP기반 node.js application 도 올릴 수 있다.
잘하면 meteor도 올릴 수 있을 거 같긴한데 일단 나중에 볼 일이고
https://firebase.google.com/docs/functions/get-started 따라 해보자
먼저 init 부터
$ firebase init functions

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /Users/spectrum/Documents/js/_firebaseApp/sheepals

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

✔  Wrote functions/package.json
✔  Wrote functions/index.js
? Do you want to install dependencies with npm now? Yes

물어봐주면 Yes. 그러면 firebase-admin과 firebase-functions를 설치한다.

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

설치 끝.
cd funtions 해서 뭐뭐가 있는지 보자.
index.js
node_modules
package.json
다 있다. 끝내주네. package.json 하고 node_modules 폴더 있는 걸 보면 게임 오버네.
var functions = require('firebase-functions');
// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions
exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});
주석을 제거하고 실행해보자.
firebase deploy --only functions
로 functions만 적용이 가능하다.
꽤 시간이 걸리는데 과연 로컬환경 구성 같은 건 없나? 불편불편.

$ firebase deploy --only functions

=== Deploying to 'sheepals-2f2d6'...

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
i  runtimeconfig: ensuring necessary APIs are enabled...
✔  runtimeconfig: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (859 B) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function helloWorld...
✔  functions[helloWorld]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/sheepals-2f2d6/overview
Function URL (helloWorld): https://us-central1-sheepals-2f2d6.cloudfunctions.net/helloWorld

하 테스트할 URL까지 뽑아주네.


Dashboard에 가면 이런게 생겼고

잘 작동한다.
Firebase.. 무서운 아이!
로그를 보면
실행하는데 얼마나 걸렸는지도 나오고 Functions별 검색도 아주 잘된다.
그래도 구글이 호구는 아닌게 https://github.com/firebase/functions-samples/tree/master/stripe 같은 예를 보면 non-Google 서비스를 사용할 때엔 유료플랜인 Blaze나 Flame으로 변경해야 되나보다.

2017년 5월 26일 금요일

Firebase 정적 호스팅

이번 google I/O도 그렇고 꾸준히 firebase를 밀고 있다.

디비 뿐만 아니라 정적 호스팅도 해준다는 소식에 혹 해서 살짝 내용을 살펴보았다.
https://firebase.google.com/docs/hosting/quickstart

https://console.firebase.google.com/
먼저 firebase 콘솔로 들어가서 프로젝트를 하나 만들자.
Add Project를 누르면

프로젝트 이름과 지역을 설정할 수 있다.
적절히 넣어주고 Create Project하여 프로젝트를 만들고

당연한 이야기지만 0.10.x 이상의 Node.js를 설치한 상태로 firebase-tools를 먼저 설치하자
npm install -g firebase-tools
좀 시간이 걸린다.
다 되면 폴더를 하나 만들고 그 안에서 init으로 초기화를 하자.
mkdir exam1
cd exam1
firebase init

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /Users/spectrum/Documents/js/_firebaseApp/sheepals

? Which Firebase CLI features do you want to setup for this folder? Press Space to select featur
es, then Enter to confirm your choices.
⚠  You have have not selected any features. Continuing will simply associate this folder with a Firebase project. Press Ctrl + C if you want to start over.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: sheepals (sheepals-2f2d6)

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

여기선 깨지는데 터미널에서 공격적인 Firebase ASCII ART를 볼 수 있다.
초기화가 끝나고 나면 덜렁 firebase.json과 .firebaserc 두 파일을 생성한다.
firebase init hosting 을 한번 더 해주면
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
✔  Firebase initialization complete!
요렇게 몇 가지 더 확인하고 public 아래에 index.html 까지 다 만들어 준다.

firebase.json이 구조 정보가 들어가는 파일인데 package.json 같은 거라고 생각하면 된다.
기본적으로
{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
요런걸 생성하는데 node_modules도 써야하고 .idea, .gitignore 등등 필요없는 파일/디렉토리를 디플로이하지 않기 위해 ignore를 추가하고 public 위치도 ./app으로 바꿔본다.
{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
https://firebase.google.com/docs/hosting/deploying 에서 북봍해서 적용해보자.
디폴트 경로는 public이 키인 ./app 아래에 index.html 하나 넣어보자.
ignore에 있는 내용은 실제 디플로이 되지 않는다.
디플로이 하자.
firebase deploy
너무 간단하다. 할말이 없다.
<project명-난수숫자키>.firebaseapp.com 으로 접속할 수 있다.
$ firebase deploy
=== Deploying to 'sheepals-2f2d6'...
i  deploying hosting
i  hosting: preparing app directory for upload...
✔  hosting: 1 files uploaded successfully
i  starting release process (may take several minutes)...
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/sheepals-2f2d6/overview
Hosting URL: https://sheepals-2f2d6.firebaseapp.com
마지막에 나온 Hosting URL로 접근해서 잘 나오면 오케이.
다음 내용을 보면서 functions와 custom domain을 숙지하고 계속 나아가자.

2017년 5월 10일 수요일

동적으로 로딩하는 Meteor i18n 다국어 적용기

작년부터 꾸려가던 서비스가 다행인지 불행인지 수입은 별론데 입소문과 방송이 마구 돌아서 해외에서도 요청이 들어오고 있다.

드디어 i18n! 즉, 다국어 지원을 해야할 시기가 온 것이다.
https://themeteorchef.com/tutorials/i18n-and-meteor 를 보고 tap-i18n(https://github.com/TAPevents/tap-i18n) 패키지를 써보기로 마음먹었다.

약간 삽질이 있었는데 처음에
meteor add tap:i18n
만 하면 나머지 다 잘 될줄 알았다.

아니었다. 역시 인생 실전...

내 경우는 json 파일을 정적으로 만드는 것이 아니라 개발팀이 아닌 일반 관리자가 새로 만든 상품에 대해서도 다국어 대응을 바로 해야하기 때문에 동적으로 로딩할 수 있도록 만들어야 했다.

먼저, 자원을 로드하는 건 별로 어렵지 않았는데
TAPi18n.loadTranslations(
    {
        es: {
            meteor_status_waiting: "Desconectado"
        },
        fr: {
            meteor_status_failed: "La connexion au serveur a échoué"
        }
    },
    "francocatena:status"
);
이런 식으로 언어별로 key/value 매핑을 하고 마지막 인자로 namespace를 주면 된다.
별로 떠오르는 이름이 없어서 위 예의 "francocatena:status" 대신 "project"라고 줬다.

html 헬퍼에서 {{{_ '번역할 문장'}}} 을 했더니 '_' 라는 펑션 없단다.
ecmascript 패키지와 충돌하느니 어쩌느니 얘기가 주절주절 많은데
결론은 project의 root에 project-tap.i18n 파일을 만들고
{
    "helper_name": "_",
    "supported_languages": ["ko", "en"]
}
이렇게 두 개의 키를 지정하면 된다.
supported_languages를 지정하지 않으면 TAPi18n.setLanguage 를 통해 현재 언어를 변경하는 것이 제대로 작동하지 않으니 주의할 것.