この記事は「IonicとFirebaseを使って3日で作る写真共有アプリ」シリーズの中の記事です。
ローカルの開発環境の構築手順をまとめておきます。
VisualStudioCodeのインストール
下記のサイトからVisualStudioCodeの最新版をインストールします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Gitのインストール
Gitをまだインストールしていない人がいたら、Gitもインストールしましょう。
For windows
https://gitforwindows.org/
Nodejsのインストール
IonicはNodejs上で動くので、Nodejsをインストールしましょう。
https://nodejs.org/ja/
これも最新版で問題ありません。
ワークフォルダの作成
ここからは、実際にデータをダウンロードしたりするので、どこでもいいのでソースコードを配置するフォルダを作成して下さい。この後紹介するコマンドは、そのフォルダで実行する前提で説明します。
Ionic4のインストール
※ここからはターミナルでワークフォルダに入ってから進めてください。
Ionic4の開発をサポートしてくれる"Ionic CLI"をインストールします。VisualStudioCodeのターミナルで下記コマンドを動かしてください。
$ npm install -g ionic
参考URL：https://ionicframework.com/docs/cli
インストールが完了したら、"アプリの型"を作りましょう。AppNameはアプリ名になるので、好きな名前を付けてください。
$ ionic start AppName blank --type=angular
firebaseの準備
firebaseアカウントの作成
https://firebase.google.com にアクセスしてfirebaseのアカウントを作ってください。Googleアカウントを持っていれば、そのままログインできるので「コンソールに移動する」をクリックしてください。
firebase新規プロジェクトの作成
ログイン出来たら、新規プロジェクトを作成して下さい。名前はなんでもいいですが、idは後から変更できないのでとりあえず「AppName-dev」とでもしておきましょう。
※リリースするときには、クリーンな新しい環境を用意したほうがスムーズなため。
firebase CLIのインストール
ここからはローカルに戻って、firebase CLIをインストールしてください。デプロイが楽にできたり、functionsと呼ばれるサーバー再度の処理をアップロードするための機能がある便利ツールです。
$ npm install -g firebase-tools
そのあとはhttps://firebase.google.com/docs/cli/?hl=ja を見ながら、ログインを行ってください。
$ firebase login
ログイン出来たら、プロジェクトの初期化を行います。このとき、プロジェクトを選択する必要があるので、まだ作っていない方はfirebaseコンソールから作成してください。
firebase init
初回ビルド＆デプロイ
Ionicアプリのビルド
下記コマンドを実行すると自動的にビルドが開始されます。
$ ionic build --prod
初めてのデプロイ
ビルドが完了したら、早速デプロイしてみましょう。デプロイをするには、firebase CLIの設定が完了している必要があります。
$ firebase deploy
もし、ここで失敗するようであればどこかで間違っているはずなので最初からやり直してみてください。
以上で、環境構築が完了しました。