1. 環境構築
エディターはインストール済みである前提で進めます。オススメはVSCodeです。
後述するコマンドは
- macなら「ターミナル」
- windowsなら「コマンドプロント」
を起動してコピペして叩いてください。
1-1. NVMをインストール
Angularを使う際にはNode.jsのインストールが必要です。
そのためにまず、バージョン管理を行うためのライブラリであるNVM (Node Version Manager)をインストールします。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
v0.35.3とありますが、バージョンはすぐに上がるのでこちらからコピペしてください。
https://github.com/nvm-sh/nvm#installing-and-updating
1-2. Node.jsをインストール
こちらは勝手に最新版をインストールしてくれます。
パッケージ管理のNPM (Node Package Manager)もセットで付いてきます。
nvm install node
1-3. AngularCLIのインストール
-g を付けることでグローバルインストールといって、プロジェクトによらずその環境全体で使えるようになります。
npm install -g @angular/cli
1-4. FirebaseCLIのインストール
npm install -g firebase-tools
1-5. Gitのインストール
Gitを使うとソースコードのバージョン管理が出来ます。
ここからダウンロードしてフローに従ってインストールしてください。
https://git-scm.com/
2. プロジェクト作成
2-1. GitHubでリポジトリを作成
GitHubでソースコードをリモート管理します。
アカウント作成がまだの方はアカウントを作成後、リポジトリを作成します。
https://github.com/new
2-2. Angularプロジェクトを作成
ng new プロジェクト名
2-3. GitHubと紐付けして初期Push
エディターでプロジェクトを開きます。
# プロジェクトのあるパスに移動した後に
code.
先程作成したGitHubリポジトリとプロジェクトを紐付けします。
URLはGitHubでリポジトリを開くと表示されるものをコピペします。
git remote add origin リポジトリのURL
HTTPSが選択されている方はこちらを参考にSSH接続に変更してください。
Angularの環境構築とプロジェクト作成はこれで完了です。
3. Firebase連携
3-1. Firebaseプロジェクトを作成
こちらから作成できます。
https://console.firebase.google.com
作成が終わったら、使いたい機能を有効化していきます。
その際、ロケーションを選択することになります。(選択後は変更不可なので注意)
東京の場合は asia-northeast1です。
3-2. Firebaseの初期化
プロジェクト側で叩きます。
firebase login
firebase init
3-3. AngularFireのインストール
ng add @angular/fire@next
このページのQuickstartの指示に従って、以下2点を行います。
https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
-
/src/environments/environment.tsにFirebaseの認証情報を追加 -
app.module.tsでAngularFireModuleとプロジェクトで使用するModuleをインポート
以上ですべて完了です。