macでFirebaseの環境構築からAngularプロジェクトのデプロイまで

2020年2月7日

実際にプロジェクト作りながらやったものをまとめました

AngularとFirebaseでいろいろとできそうだなーと思ったので、
まずは環境構築してみようと思い、それをまとめました。
下の手順をやっておけば、Angularアプリの公開が行えます！
また修正した後も、再度デプロイすれば簡単に修正版を公開できます！

node.jsを利用できるようにする

ターミナルから以下の手順でnode.jsの環境を構築することができます。

  • node.jsをインストールする
    インストールしていない場合は、homebrewをインストールする。
    インストール用のコマンドは公式サイトに乗っているので確認する。
    2018年4月時点では以下のコマンドを実行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • nodebrewをインストールする。
brew install nodebrew
  • node.jsをインストールする
nodebrew install-binary latest
  • 使用するバージョンを有効化する
nodebrew use latest
  • 実行パスを通す
echo 'export PATH=$PATH:/Users/[ユーザー名]/.nodebrew/current/bin' >> ~/.bashrc

※[ユーザー名]の部分は書き換えが必要

ターミナルを再起動する。
再起動する理由は、実行パスの設定が読み込まれていないので、再起動して読み込ませる必要がある。

  • 以下のコマンドを実行し、インストールされたことを確認する
node -v
npm -v

両方ともバージョンが表示されればインストール完了。
もしバージョンが表示さればい場合は書き換えた実行パスが正しいか確認する。

Firebaseを利用できるようにする

とりあえず、環境用意して、デプロイするまでの簡易手順になります。
詳細内容は省いて手順だけ載せていきます。

  • Firebaseから、新規プロジェクトを作成する。

    プロジェクト名を入力して、国を選んで、同意するにチェックを入れて作成を押下するだけで、作成できる。
  • ターミナルから以下のコマンドを実行する
npm install -g firebase-tools
firebase login

googleのアカウントでログインする
ログインできたら、さらにターミナルから以下のコマンドを実行する

firebase init

何を選択するか聞かれるので、とりあえず以下を選択
Hosting: Configure and deploy Firebase Hosting
あとは適当に全部enter

  • 以下のコマンドを実行することで、ローカルでページを開くことができます。
firebase serve

これでとりあえずFirebaseが利用できるようになりました。

最後にAngularを用意して、それをFirebaseにデプロイしていきます。

Angularの環境を用意する

  • ターミナルから以下のコマンドを実行
npm install -g @angular/cli
  • Angularプロジェクトを作成する
ng new my-app
  • アプリケーションをサーブする
cd my-app
ng serve --open

画面が起動すればOK！

firebaseにAngularプロジェクトをデプロイする

  • 環境設定
    作成したAngularプロジェクトで以下のファイルを書き換えます。
    /src/environments/environment.ts
export const environment = {
  production: false,
  firebase: {
    apiKey: '***',
    authDomain: '***',
    databaseURL: '***',
    projectId: '***',
    storageBucket: '***',
    messagingSenderId: '***'
  }
};

「***」部分は、WebでFirebaseの管理画面開いて「ウェブアプリに Firebase を追加」を開くと設定値が出てきます。

  • AngularFireModuleとenvironmentをインポートするよう記述
    /src/app/app.module.ts　を開いてい以下を追加
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
  • デプロイするときは以下のコマンドを実行
firebase deploy
  • 以下のコマンドで、ページを開く
firebase open hosting:site

これは実際にデプロイしてから何ヶ月か経ってから手順としてまとめているので、
もしかしたら抜け漏れがあるかも、、、？
随時気づいた点があったら更新していきます。

angular,FirebaseAngular,Firebase,mac

Posted by naomiti3333