masalibの日記

システム開発、運用と猫の写真ブログです

angularの動作確認用サーバー

angularのサンプルソースを作った時にスマフォで確認できるサーバーがない事に気がついた
httpsが使えるFirebaseのhostingを使う事にしました
(1Gまでは無料、5Gで20円ぐらい)

下記のURLでnode.jsをインストール
masalib.hatenablog.com

開発環境の権限系ではまりたくないのでrootになる

su -

デプロイ系のツールをインストールする

npm install -g firebase-tools

node.jsのバージョンが古くなければすんなり入る

vagrant(VirtualBox)の環境なのでブラウザ起動ができない
起動しないオプションを設定してログインのコマンドを実行する

$ firebase login  --no-localhost

するとターミナルにURLが表示され
グーグルへログイン、ターミナルでトークンを聞かれるのでそこへ行ってコピペします。

作業用のフォルダを作成して初期化する

$ mkdir /var/src/firebase-test
$ cd /var/src/firebase-test
$ firebase init

どのプロジェクトを使用するとか色々きかれる
参考サイト

qiita.com
firebase.jsonやpublicフォルダなどができるはず・・・だったが
自分の環境はなぜか空ファイルのfirebase.jsonができて何もできなかった

意味がわからず、公式サイトからコピペした

{
  "hosting": {
    "public": "app",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}


アップ用フォルダとファイルを作る

$ mkdir /var/src/firebase-test/app
$ echo "<body><html>test masalib</html></body>" >>  /var/src/firebase-test/app/index.html

デプロイする

$ firebase deploy

#  ===  Deploying to 'masalib-hosting'... 
#  i    deploying  hosting 
#  i      hosting: preparing  app  directory for upload...
#  i    starting release process (may take several minutes)...
# ✔     Deploy complete!  
# Project Console:  https://console.firebase.google.com/project/masalib-hosting/overview
# Hosting URL:  https://masalib-hosting.firebaseapp.com

成功すると表示される
Hosting URLにアクセスすると表示される

firebaseを遊んでいるので
現在アップされている内容は違います

現在、遊んでいる事

・リアルタイムデータベースの読み書き
qiita.com
qiita.com

・リアルタイム翻訳
github.com

確認中の事
AdSense広告の配置
 できたっぽいけどなんでできたのかよくわからない
 サブドメインでできた?なんで?

・WEBマスターツールの認識
 たぶんできたっぽい
 何もページを作っていないのでindex化ができたのかわからない

・ワンクリックのロールバックができるのですが
 もしかして・・・その分の容量がくっている
 自動的に消せないのか確認中
 (手動なら消せた)

・ツイッタやfacebook認証もできるみたいなので
 それもできればやってみたい


これができたらangularのソースはgithubにおいて
実際にうごくのをこの環境でおこないたい

最終的にはフロントエンドとサーバーサイドの部分を
わけた仕組みをやってみたい