【2019年5月】AngularFire で Flamelink を。

# Headless CMS の Flamelink を使った "~~それっぽい~~サイト" を Angular で構築してみます。

Firebase に CMS の機能をあっさり追加してしまうファンタスティックなサービス。それが Flamelink です。

- [Flamelink CMS : https://flamelink.io/](https://flamelink.io/)

バックエンドは Firebase + Flamelink とし、**~~それっぽい~~サイト** のフロントエンドを Angular で構築してみます。

Package Manager には `yarn` を使用します。[macOS でのセットアップは前回の記事](https://qiita.com/koinori/items/be672ddb9d3a7d315b13)をご覧ください。

# Firebase、Flamelink の準備

以下の記事を参考に Flamelink と Firebase をセットアップします。

- [すぐ始められる！FIrebaseをブログのCMSに変える「Flamelink」を使ってみた！](https://paiza.hatenablog.com/entry/2018/11/21/%E4%BB%8A%E3%81%99%E3%81%90%E5%A7%8B%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%EF%BC%81FIrebase%E3%82%92%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AECMS%E3%81%AB%E5%A4%89%E3%81%88%E3%82%8B%E3%80%8CFlamelink%E3%80%8D)

ここでは簡単な手順を紹介するだけにいたします。丁寧な記事に感謝！

## 1. Flamelink のアカウント作成

Flamelink のアカウントを作成しましょう。現在は Google アカウントでのログインが可能です。

Firebase 用のGoogleアカウントはお持ちですね？！さっさと Google アカウントでログインしてしまいましょう。

## 2. Firebase のプロジェクト作成

Firebaseで新規のプロジェクトを作成します。

## 3. Storage の初期設定

Fire Storage の有効化と、権限の設定を行います。

## 4. Firestore の初期設定

Firestore の有効化と権限の設定を行います。

## 5. Firebase と Flamelink の関連付け

"Web アプリ"のキーをコピペして Flamelink から Firebase のアクセスを有効にします。

## 6. スキーマ定義

Flamelink はコンテンツの項目を"スキーマ"として定義し、スキーマに応じた入力フォームを提供してくれます。
スキーマを定義することにより、様々な項目のコンテンツを作成でき、さらに Firestore にも宜しく読み書きしてくれます。これがすごいですね。

今回は `myBlog1` を ID としてスキーマを定義しておきます。
さらに `banner` という media 項目を追加いたしました。
記事のヘッダーにどーんと載せる画像ですね。

## 7. サンプルのブログ定義

サンプルとしてブログ記事をあげて登録してみましょう。
手順にならって適当に、記事を追加します。

### 7-1. 画像のアップロード

Flamelink の画面から画像などのファイルをアップロードできます。

![flamelink 画像アップロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/0b6792f9-292e-4489-5c38-912787e39047.png)

Cloud Storage にアップロードしてくれますが、各デバイス向けに様々なサイズにリサイズした画像を生成してくれます。これも便利ですね！

### 7-1. テキストエディタ

Flamelink のコンテンツ記事を編集する WYSIWYG エディタには [CKEditor](https://ckeditor.com/) が使用されています。

高機能で **Markdown** もサポートしてます。すごい。

![flamelinkリッチテキストエディタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/9e81bef9-ad49-97d3-9878-a8b097b95486.png)

ただし"画像のドラッグ&ドロップで勝手にアップロード"には対応できていないので、上記の手順で別途、画像をアップロードしておく必要があります。

## 8. ナビゲーションの定義

ナビゲーションメニューも flamelink 上で定義できます。

![FlameLink_Navigation_Edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/b66dd2d5-5890-b3ee-bf0d-55f80a2f7c73.png)

ここで指定するURLはフロントエンドでのパスとなります。
ちょっとわかりにくいですが、パスとコンテンツとスキーマの関係は以下の vue.js 用のサンプルプロジェクトの README.md を見ればイメージがつかめるのではないでしょうか。

https://github.com/flamelink/examples/tree/master/examples/vue-basic

今回は適当に "main" というIDで作成しておきます。(今回はナビゲーションリンクはダミーでアイテムを表示するだけとし、URLでのリンクは設置しないでおきます。)

# フロントエンドの構築

さて、ローカルマシンでの開発作業に移ります。[Angular-cli で yarn は有効になって](https://qiita.com/koinori/items/be672ddb9d3a7d315b13)ますね？！

下記の Flamelink 公式のボイラープレートプロジェクトを参考に、**通常の手順** で構築していきます。

- https://github.com/flamelink/examples/tree/master/examples/angular-basic

また、js-sdk のリファレンスはこちらです。
https://flamelink.github.io/flamelink-js-sdk/#/?id=flamelink-javascript-sdk

ボイラープレートでは `0.18`が使用されていますが、最新のsdkは `1.0.0-alpha.12` です。
0.x から 1.0への変更には [Migration Guide](https://flamelink.github.io/flamelink-js-sdk/#/migration-guide) を参考に修正をしていきます。

## 0. firebase client ツールのインストール

Firebase Client ツールがインストールされていない場合は以下のコマンドでインストールしておきましょう。

```
$ yarn global add firebase-tools
yarn global v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
info @google-cloud/functions-emulator@1.0.0-beta.6: The engine "node" is incompatible with this module. Expected version "~6". Got "10.15.3"
info "@google-cloud/functions-emulator@1.0.0-beta.6" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "firebase-tools@6.8.0" with binaries:
      - firebase
✨  Done in 28.09s.
```

## 1. Angular プロジェクト作成

まず、`angular-cli` で Angular のプロジェクトを作成します。

```
$ ng new ng-flamelink-sample
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com/d
ocumentation/file.SASS_REFERENCE.html#syntax ]
CREATE ng-flamelink-sample/README.md (1034 bytes)
CREATE ng-flamelink-sample/.editorconfig (246 bytes)
CREATE ng-flamelink-sample/.gitignore (629 bytes)
CREATE ng-flamelink-sample/angular.json (4012 bytes)
CREATE ng-flamelink-sample/package.json (1318 bytes)
CREATE ng-flamelink-sample/tsconfig.json (435 bytes)
CREATE ng-flamelink-sample/tslint.json (1621 bytes)
CREATE ng-flamelink-sample/src/favicon.ico (5430 bytes)
CREATE ng-flamelink-sample/src/index.html (304 bytes)
CREATE ng-flamelink-sample/src/main.ts (372 bytes)
CREATE ng-flamelink-sample/src/polyfills.ts (2841 bytes)
CREATE ng-flamelink-sample/src/styles.scss (80 bytes)
CREATE ng-flamelink-sample/src/test.ts (642 bytes)
CREATE ng-flamelink-sample/src/browserslist (388 bytes)
CREATE ng-flamelink-sample/src/karma.conf.js (1032 bytes)
CREATE ng-flamelink-sample/src/tsconfig.app.json (166 bytes)
CREATE ng-flamelink-sample/src/tsconfig.spec.json (256 bytes)
CREATE ng-flamelink-sample/src/tslint.json (244 bytes)
CREATE ng-flamelink-sample/src/assets/.gitkeep (0 bytes)
CREATE ng-flamelink-sample/src/environments/environment.prod.ts (51 bytes)
CREATE ng-flamelink-sample/src/environments/environment.ts (662 bytes)
CREATE ng-flamelink-sample/src/app/app-routing.module.ts (245 bytes)
CREATE ng-flamelink-sample/src/app/app.module.ts (393 bytes)
CREATE ng-flamelink-sample/src/app/app.component.scss (0 bytes)
CREATE ng-flamelink-sample/src/app/app.component.html (1152 bytes)
CREATE ng-flamelink-sample/src/app/app.component.spec.ts (1134 bytes)
CREATE ng-flamelink-sample/src/app/app.component.ts (224 bytes)
CREATE ng-flamelink-sample/e2e/protractor.conf.js (752 bytes)
CREATE ng-flamelink-sample/e2e/tsconfig.e2e.json (213 bytes)
CREATE ng-flamelink-sample/e2e/src/app.e2e-spec.ts (648 bytes)
    Successfully initialized git.
```

続いてプロジェクトのフォルダに移動。

```
$ cd ng-flamelink-sample
```
## 2. パッケージの追加

ボイラープレートの `package.json` を手がかりに必要なパッケージを追加します。

追加するパッケージは `@angular/fire`、`firebase`、`flamelink@next`の3つです。

```
$ yarn add @angular/fire firebase flamelink@next
yarn add v1.15.2
[1/4] 🔍  Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "firebase > @firebase/performance@0.2.1" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/auth > @firebase/auth-types@0.6.1" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/auth > @firebase/auth-types@0.6.1" has unmet peer dependency "@firebase/util@0.x".
warning "firebase > @firebase/messaging@0.3.19" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/performance > @firebase/installations@0.1.0" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/database@0.3.20" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/performance > @firebase/installations > @firebase/installations-types@0.1.0" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/functions@0.4.6" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/database > @firebase/database-types@0.3.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage@0.2.15" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage > @firebase/storage-types@0.2.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/storage > @firebase/storage-types@0.2.11" has unmet peer dependency "@firebase/util@0.x".
warning "firebase > @firebase/messaging > @firebase/messaging-types@0.2.11" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/firestore@1.2.2" has unmet peer dependency "@firebase/app-types@0.x".
warning "firebase > @firebase/firestore > @firebase/firestore-types@1.2.1" has unmet peer dependency "@firebase/app-types@0.x".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 52 new dependencies.
info Direct dependencies
├─ @angular/fire@5.1.3
├─ firebase@5.11.1
└─ flamelink@1.0.0-alpha.12
info All dependencies
├─ @angular/fire@5.1.3
├─ @firebase/app-types@0.3.10
├─ @firebase/app@0.3.17
├─ @firebase/auth-types@0.6.1
├─ @firebase/auth@0.10.2
├─ @firebase/database-types@0.3.11
├─ @firebase/database@0.3.20
├─ @firebase/firestore-types@1.2.1
├─ @firebase/firestore@1.2.2
├─ @firebase/functions-types@0.3.5
├─ @firebase/functions@0.4.6
├─ @firebase/installations-types@0.1.0
├─ @firebase/installations@0.1.0
├─ @firebase/messaging@0.3.19
├─ @firebase/performance-types@0.0.1
├─ @firebase/performance@0.2.1
├─ @firebase/polyfill@0.3.13
├─ @firebase/storage-types@0.2.11
├─ @firebase/storage@0.2.15
├─ @firebase/webchannel-wrapper@0.2.19
├─ @flamelink/sdk-content-types@1.0.0-alpha.9
├─ @flamelink/sdk-content@1.0.0-alpha.11
├─ @flamelink/sdk-navigation-types@1.0.0-alpha.9
├─ @flamelink/sdk-navigation@1.0.0-alpha.11
├─ @flamelink/sdk-schemas-types@1.0.0-alpha.9
├─ @flamelink/sdk-settings-types@1.0.0-alpha.9
├─ @flamelink/sdk-settings@1.0.0-alpha.9
├─ @flamelink/sdk-storage-types@1.0.0-alpha.9
├─ @flamelink/sdk-storage@1.0.0-alpha.12
├─ @flamelink/sdk-users-types@1.0.0-alpha.9
├─ @flamelink/sdk-users@1.0.0-alpha.11
├─ @types/lodash@4.14.123
├─ ascli@1.0.1
├─ browser-image-resizer@1.2.0
├─ bytebuffer@5.0.1
├─ colour@0.7.1
├─ dom-storage@2.1.0
├─ firebase@5.11.1
├─ flamelink@1.0.0-alpha.12
├─ grpc@1.20.0
├─ idb@3.0.2
├─ isomorphic-fetch@2.2.1
├─ lodash.camelcase@4.3.0
├─ lodash.clone@4.5.0
├─ long@3.2.0
├─ node-fetch@1.7.3
├─ optjs@3.2.2
├─ promise-polyfill@8.1.0
├─ protobufjs@5.0.3
├─ whatwg-fetch@2.0.4
├─ window-size@0.1.4
└─ xmlhttprequest@1.8.0
✨  Done in 710.41s.
```

やはり、angularfire と flamelink で参照してる firebase 関連のパッケージでバージョンの食い違いが発生している模様ですね。。。ここは警告なので目を瞑っておきます。

またボイラープレートで指定されている `angurlarfire2` は `@angular/fire` に移行されています。

- https://www.npmjs.com/package/angularfire2

> This package has been deprecated
Author message:
> AngularFire has moved, we're now @angular/fire

ということで `@angular/fire`を使用します。

続いて、flamelink の js-sdk では、`flamelink@next` を使ってね！ということらしいです。

- https://github.com/flamelink/flamelink-js-sdk

## 3. firebase の設定を追加

上記の手順で作成した "Webアプリのキー" を `app.firebase.config.ts` にコピペして保存しておきます。

```typescript:src/app/app.firebase.config.ts
export const firebaseConfig = {
    apiKey: '...',
    authDomain: '...',
    databaseURL: '...',
    projectId: '...',
    storageBucket: '...',
    messagingSenderId: '...',
    appId: '...'
};
```
Typescript で `import` するために `export` を追加します。

## 4. モジュールの追加

以下の `@angular/fire` のセットアップ手順に従ってAngularFireModuleモジュールを追加します。

- https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

`@NgModule`での`imports`内の`AngularFireModule.initializeApp()` で、上記の手順で作成した `firebaseConfig` を渡しています。

```typescript:src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { firebaseConfig } from './app.firebase.config';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## 5. flamelink からコンテンツを取得するサービスの追加

以下のコマンドでサービスの追加を行います。

```
$ ng g service shared/services/flamelink
```
ファイルの内容は以下のように修正しました。

```typescript:src/app/shared/services/flamelink.service.ts
...
export class FlamelinkService {

  // GET|SET flApp
  private flApp: flamelink.App;
  get FlApp(): flamelink.App {
    return this.flApp;
  }
  set FlApp(value: flamelink.App) {
    this.flApp = value;
  }

  constructor(@Inject(FirebaseApp) private fb: firebase.app.App) {
    const config: flamelink.Config = {
      firebaseApp: this.fb,
      env: 'production',
      locale: 'default'
    };
    this.FlApp = flamelink(config);
  }
...
```

[元ファイル](https://github.com/flamelink/examples/blob/master/examples/angular-basic/src/app/shared/services/flamelink.service.ts) の `FlamelinkConfig` は `Config` になってますね。
また lint でいくつかエラーがあったので修正しました。

## 6. navibar の追加

以下の手順でヘッダーのメニューのようなナビゲーションバーを表示するUIを作成します。

### 6-1. コンポーネントの生成

以下のコマンドで ナビゲーションバー用のコンポーネントを生成します。

```
$ ng g component components/navbar
```

### 6-2. コンポーネントの実装

上記の `FlamelinkService` を経由して `nav` プロパティから `Navigation` オブジェクトへアクセスします。

- https://flamelink.github.io/flamelink-js-sdk/#/navigation

今回のサンプルデータに合わせてIDを修正してます。また、subscribeメソッドの引数も変わっていますね。

```typescript:src/app/components/navbar/navbar.component.ts
...
    this.fl.getApp().nav.subscribe({
      navigationKey: 'main',
      callback : (error, menu) => {
      if (error) {
        return console.error('Something went wrong while retrieving the entry. Details:', error);
      }

      console.log('The menu object:', menu);
      this.navItems = Object.keys(menu.items).map(key => menu.items[ key ]);
...
```

## 7. コンテンツページの追加

以下の手順でコンテンツを表示するページ用のコンポーネントを追加します。

### 7-1. コンポーネントの生成

以下のコマンドでコンテンツ用のコンポーネントを生成します。

```
$ ng g component templates/home
```
templatesは元のプロジェクトに合わせていますが、実際にはページのパスとなるべきでしょう。

### 7-2. コンポーネントの実装

こちらも今回のサンプルデータに合わせてスキーマIDを修正してます。また同じスキーマで、単一／リストの記事を取得するように改造しました。

```typescript:src/app/templates/home/home.component.ts
...
    this.fl.getApp().content.subscribe({
      schemaKey: 'myBlog1',
      populate: true,
      entryId: 'QY3dQvQehgYFx8I6QDyT',
      callback : (error, data) => {
        if (error) {
          console.error(error);
        }

        this.content = data;
      }
    });

    this.fl.getApp().content.subscribe({
      schemaKey: 'myBlog1',
      callback : (error, data) => {
        if (error) {
          console.error(error);
        }

        this.posts = Object.keys(data).map(key => data[ key ]);
      }
    });
  }
...
```

### 7-3. HTMLの修正

上記の改造に合わせてHTMLを修正いたしました。

```html:src/app/templates/home/home.component.html
...
    <div class="jumbotron text-white bg-dark mb-0" [ngStyle]="{'background-image': 'url(' + content?.banner[0].url + ')'}">
        <h1>{{ content?.title }}</h1>
    </div>
  </div>
</div>
<div class="container" [innerHTML]="content?.content"></div>
<div class="container">
  <div class="row mb-2">
    <div class="col-md-4" *ngFor="let post of posts">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <div class="card-text mb-auto"><a href="#" class="text-dark">{{ post?.title }}</a></div>
        </div>
...
```

記事のコンテンツ埋め込みに `innerHTML` プロパティをバインドしてます。
このあたりのコンテンツの使い方はCMSとフロントエンドの実装でお互いにどこまでやるのか、運用方法などから個別に検討する必要がありそうですね。

### 7-4. CSS の修正

上記の HTML で `innerHTML` をバインドしましたが、この場合はHTMLのサニタイズにより style 属性などが削除されてしまう模様です。

今回は記事内で `img` を使用して見ましたが、サイズ指定の style タグが飛んでしまったので、コンポーネントの CSS で再度サイズを設定しています。

```scss:src/app/templates/home/home.component.scss
img {
  width: 200px;
}
```
このあたりも画像の扱いについては検討する必要があるようです。

## 8. その他の準備

メインの実装は上記で完了です。あとは細々とした"つなぎこみ"を行います。

### 8-1. "ルート"の設定

Angular のルーティングを追加します。

```typescript:src/app/app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent }
];
```

### 8-2. エントリーポイントのHTMLを修正

エントリーポイントのHTMLである `src/app/app.component.html` は初期状態では Angular の **例の** ページとなっています。
以下のように修正します。

```html:src/app/app.component.html
<app-navbar></app-navbar>

<router-outlet></router-outlet>
```

### 8-3. bootstrap, jquery などを追加

ボイラープレートに含まれているコンポーネントとして `bootstrap` と `jquery` がまだでしたので yarn で追加しておきます。

```
$ yarn add bootstrap jquery
```

また、上記に合わせてcssの参照先、jsの参照先を `angular.json`に追記しておきます。

```json:angular.json
...
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
...
```

これでボイラープレートの再現手順としては以上でしょうか。

## 9. ローカルでの確認

`yarn start`コマンドで angular の開発サーバーが起動します。

```
$ yarn start
yarn run v1.15.2
$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                              o Date: 2019-05-06T13:41:19.138Z
Hash: bf6c97582492f6278bd5
Time: 29709ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 24 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 143 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.13 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.35 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.
```
ブラウザを開き `http://localhost:4200` でブログの記事などが表示されればOKです！

# firebase にデプロイ

ここまできたらせっかくなので firebase にデプロイしてみましょう。

以下の記事で Angular プロジェクトの Firebase へのデプロイ手順がバッチリ開設されておりますのでこれにならってデプロイしていきます。ありがとうございます！

- [Firebase CLIでAngularアプリをFirebase Hostingにデプロイする](https://qiita.com/daikiojm/items/89f46bd83c9a2285bbc6)

## 1. ログイン

`firebase` コマンドを初めて使う場合はログインを行います。

```
$ firebase login
```
ブラウザが立ち上がり、`Firebese CLI`へのアクセス許可を行います。

また遥か昔にログインしたはず？！だったのに`firebase init`などで`401`エラーが出るなど調子悪い場合は以下のように `--reauth` オプションをつけて実行時てみましょう。

```
$ firebase login --reauth
```

## 2. firebase プロジェクトの設定

`firebase init` コマンドで初期設定を行います。

```
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  /Users/xxxxx/xxxx/ng-flamelink-sample

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. Hosting: Configure and 
deploy Firebase Hosting sites

=== 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: flamelinktest-ee913 (Fla
meLinkTest)
i  Using project flamelinktest-ee913 (FlameLinkTest)

=== 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? dist/ng-flamelink-sample
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote dict/index.html

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

✔  Firebase initialization complete!
```

## 3. プロジェクトのビルド

デプロイ前に、`Product`モードでAngularプロジェクトをビルドします。

```
$ ng build --prod
                                                                                 
Date: 2019-05-06T12:36:28.072Z
Hash: a03892ae018c3296a912
Time: 97922ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.7900b8c036da3f307d55.js (main) 1.32 MB [initial] [rendered]
chunk {3} polyfills.8bbb231b43165d65d357.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.f0b28ad581a97540732f.css (styles) 139 kB [initial] [rendered]
chunk {scripts} scripts.6cf4da7113bcd1218d80.js (scripts) 141 kB [entry] [rendered]
```

## 4. deploy

`firebase deploy`コマンドでプロジェクトをデプロイします。

```
$ firebase deploy

=== Deploying to 'flamelinktest-ee913'...

i  deploying hosting
i  hosting[flamelinktest-ee913]: beginning deploy...
i  hosting[flamelinktest-ee913]: found 9 files in dist/ng-flamelink-sample
✔  hosting[flamelinktest-ee913]: file upload complete
i  hosting[flamelinktest-ee913]: finalizing version...
✔  hosting[flamelinktest-ee913]: version finalized
i  hosting[flamelinktest-ee913]: releasing new version...
✔  hosting[flamelinktest-ee913]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/flamelinktest-ee913/overview
Hosting URL: https://flamelinktest-ee913.firebaseapp.com
```

`Hosting URL`のURLをブラウザで直接開くか、以下のコマンドでブラウザを起動することもできます。

```
$ firebase open
? What link would you like to open? Hosting: Deployed Site
Tip: You can also run firebase open hosting:site

Opening Hosting: Deployed Site link in your default browser:
https://flamelinktest-ee913.firebaseapp.com
```

ブラウザからリモートの firebaseapp.com ドメインのサイトが表示されればOKです！

# 参考サイト

今回は記事が長い上にリンクが散らばっているので参考サイトを以下にまとめます。

- [Flamelink CMS : https://flamelink.io/](https://flamelink.io/)
- [すぐ始められる！FIrebaseをブログのCMSに変える「Flamelink」を使ってみた！](https://paiza.hatenablog.com/entry/2018/11/21/%E4%BB%8A%E3%81%99%E3%81%90%E5%A7%8B%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%EF%BC%81FIrebase%E3%82%92%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AECMS%E3%81%AB%E5%A4%89%E3%81%88%E3%82%8B%E3%80%8CFlamelink%E3%80%8D)
- [flamelink/vue-basic: Project bootstrapped with @vue/cli](https://github.com/flamelink/examples/tree/master/examples/vue-basic)
- [flamelink/FlamelinkBoilerplate](https://github.com/flamelink/examples/tree/master/examples/angular-basic)
- [Official Flamelink JavaScript SDK](https://github.com/flamelink/flamelink-js-sdk)
- [Flamelink JavaScript SDK docs](https://flamelink.github.io/flamelink-js-sdk/#/?id=flamelink-javascript-sdk)
- [npm: angularfire2](https://www.npmjs.com/package/angularfire2)
- [angularfire2: Installation and Setup](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md)
- [Firebase CLIでAngularアプリをFirebase Hostingにデプロイする](https://qiita.com/daikiojm/items/89f46bd83c9a2285bbc6)

# 成果物など

今回作成したサンプルのサイトは**しばらくの間**以下で公開しておきます。

- https://flamelinktest-ee913.firebaseapp.com

また、上記の手順で作成したソースコードは以下のリポジトリにあげました。

- https://github.com/Yoshinori-Koide-PRO/ng-flamelink-sample

いや〜、Flamelink、なかなか大変でした。~~ボイラープレート、メンテしてくれてないんだもん。。。~~
が、コンテンツのメンテナンスとプログラムのメンテナンスが分けられるので、開発チームと運用チームが別れているようなある程度の規模のサイトやシステムにはマストなサービスなのではないでしょうか。まだベータ版ですが今後も楽しみなプロジェクトです。

FlamelinkのコンテンツとAPIについてはほとんど触れられておりませんが、引き続き研究して行きたいと思います。