プロダクトでも使えるWEBアプリ（Angular + Firebase）のスターターキット

# はじめに

今、SCORERAという大会運営支援のサービスを作っています。（2019年3月にサービス終了）
~~（※2017年12月現在、クローズドβに参加いただける方を募集中です。）~~
このプロダクトを作るにあたり、手探り状態からWEBアプリ（Angular + Firebase）の環境構築を行いました。

その環境構築で培った知見を活かし、プロダクトレベルでも使いやすいスターターキットを公開しようと思います。
そのまま使っても良し、中のコードを見て参考にするも良しです。

Angular + Firebaseは少人数、かつスピード感をもったプロダクト開発に最適です。
最新のWEBアプリ開発を楽しんでください！

> ここで使われているライブラリはすごい勢いでバージョンが上がっていきます。
> ライブラリのアップデートは適宜各自で行ってください。

# スターターキットのスペック

## スターターキットに使われている主なライブラリ

- angular v5.0.0
- firebase v4.6.2
- angularfire2 v5.0.0-rc.4
- @angular/service-worker v5.0.0
- typescript v2.4.2

## スターターキットを使用するために必要なグローバルライブラリ

- angular-cli v1.5.5
- firebase-tools v4.6.0

## gitレポジトリ

[https://github.com/Yamamoto0525/angular-firebase-starter](https://github.com/Yamamoto0525/angular-firebase-starter)

## スターターキットの特徴

### 開発、ステージング、公開環境を構築

firebaseのプロジェクトを３つ使用し、それぞれ開発、ステージング、公開環境として利用できるようにしました。
ただし、firebaseには基本認証のような仕組みがないため、クライアント側で外部からのアクセスを制限する必要があります。
このスターターキットでは開発環境のfirebaseにパスワードを持たせ、クライアント側のリクエストと突合させています。
> 公開環境では認証なし

### Coreモジュール、Sharedモジュールをセット

Angularスタイルガイドで提案されている「Coreモジュール」、「Sharedモジュール」の初期設定を行ってあります。
中、大規模アプリの構築では必須となるため、[スタイルガイド](https://angular.io/guide/styleguide)を参考にしながら利用してください。

### Firebase FunctionsをTypescript化

firebaseのサーバーサイド構築で必須となる、Firebase Functionsをtypescriptで使えるようにしました。これによりサーバーサイドの構築にも静的型付言語を利用した開発を行うことができるようになります。

また、`npm script`を使用して、クライアントサイドとサーバーサイドを同時にビルド、デプロイすることができるようになっています。

### PWA（manifest、Service Worker）をセット

Angularはver5からPWAの機能の一部が標準で利用できるようになりました。
manifest、Service Workerの初期設定を行ってありますので、それらを改変するだけでPWAの機能が使用できるようになっています。

~~AngularのPWAについては公式ドキュメントに掲載されたので、そちらを参照してください。~~
2017/12/4現在、公式を確認したら削除されていました。そのうち再掲されると思います。

# スターターキット利用方法

## スターターキットの始め方

### １．ローカル環境に必要なグローバルライブラリをインストール

ローカル環境で下記コマンドを実行してください。

```bash
npm install -g @angular/cli firebase-tools
```

### ２．githubからスターターキットをダウンロード

[githubレポジトリ](https://github.com/Yamamoto0525/angular-firebase-starter.git)からプロジェクトをダウンロードし、ローカル環境に設置してください。

### ３．Firebaseのプロジェクトを作成

[firebase](https://console.firebase.google.com/)のサイトで開発環境、ステージング環境、公開環境用のプロジェクトを作成してください。

プロジェクトを作成したら、そのアカウントを使用してローカル環境で`firebase login`を行ってください。

参考：[Firebaseの環境構築](https://qiita.com/Yamamoto0525/items/fb23707831ff6d181544)

### ４．スターターキットのプロジェクトにFirebaseの環境変数を設定

「３．Firebaseのプロジェクトを作成」で作成したプロジェクトの環境変数を、「angular-firebase-starter」の環境変数(`src/environments/environments.ts`（開発用）、`src/environments/environments.staging.ts`（ステージング用）、`src/environments/environments.prod.ts`（公開用）にセットします。

#### 環境変数（開発環境）の場合
```ts:src/environments/environments.ts
export const environment = {
  production: false,
  // ↓の部分を書き換えます。
  firebase: {
    apiKey: 'your-api-key',
    authDomain: 'your-auth-domain',
    databaseURL: 'your-database-url',
    projectId: 'your-database-url',
    storageBucket: 'your-storage-bucket',
    messagingSenderId: 'your-messagingSenderId',
  }
};

```

### ５．`.firebaserc`にfirebaseのプロジェクトIDを設定

`development`、`staging`、`production`に該当するfirebaseのプロジェクトIDを入れておきます。

> プロジェクトIDは`firebase list`で確認できます。

```json:.firebaserc
{
  "projects": {
    "development": "your-dev-firebase-project",
    "staging": "your-staging-firebase-project",
    "production": "your-prod-firebase-project"
  }
}
```

### ６．firebaseのプロジェクトにfirestoreを設定

2017年12月現在、firestoreはβ版となっており初期状態では使用することができません。
この状態でデプロイをするとエラーになりますので、それぞれのプロジェクトでfirestoreを有効化してください。

有効化が完了したら、開発環境とステージング環境のプロジェクトにあるfiresoteデータベースに、認証用のパスワードを設定します。

「コレクションを追加」から、次のように設定してください。


|collection|doc|field|
|:----------------:|:-----------------:|:-----------------:|
| dev-auth| login | pass: 任意の値|

#### 設定画面

![NgProduct – Database – Firebase console.png](https://qiita-image-store.s3.amazonaws.com/0/112566/b573ed12-025b-f639-6fde-b17eb3aa9054.png)


# スターターキットで使用できるコマンド

## ngコマンド

|コマンド|内容|
|:-----------------|:------------------|
| ng generate (ailias: ng g)<br> [component/service/...][name]| コンポーネントやサービスの雛形を生成|
| ng serve | アプリをビルド後、ローカルサーバを起動する(`http://localhost:4200`で確認 |
| ng serve --aot | ng serve + 事前コンパイル実行。テンプレートのコンパイルチェックをしてくれる |
| ng test | ユニットテストを実行 (jasmine + karma) |
| ng e2e| e2eテストを実行 (jasmine + protractor) |

## npmコマンド

|コマンド|内容|
|:-----------------|:------------------|
| npm run build| 開発環境のビルド&funcitonsのビルドを実行|
| npm run build:staging | ステージング環境のビルド&funcitonsのビルドを実行 |
| npm run build:prod | 公開環境のビルド&funcitonsのビルドを実行|
| npm run functions:build | funcitonsのビルドを実行 |
| npm run deploy | 開発環境のビルド&firebaseプロジェクトにデプロイ |
| npm run deploy:staging | ステージング環境のビルド&firebaseプロジェクトにデプロイ |
| npm run deploy:prod | 公開環境のビルド&firebaseプロジェクトにデプロイ|
| npm run disable | 開発環境のfirebaseプロジェクトを停止 |
| npm run disable:staging | ステージング環境のfirebaseプロジェクトを停止 |
| npm run disable:prod | 公開環境のfirebaseプロジェクトを停止|

# あとがき

最初、Advent Calendarに掲載しようと思って書き始めたのですが、気がついたら登録できそうなテーマは全て募集が締め切られていました（泣）。
とはいえ、お蔵入りさせるのももったいない気がしたので、普通に公開しておきます。

まだまだ試行錯誤しながら構築していますので、何かお気付きの点、ご指摘等ありましたらお知らせください。