Firebaseで気軽にwebアプリをホスティング

フロントで完結しているwebアプリはFirebaseでホスティングするのが手っ取り早い。

vs Heroku
MongoDB等のデータベースなどを用いた独自実装バックが欲しいときはこれ
フロントで完結している場合は手間が増えるだけ

vs GithubPages
Githubとの連携が強みだけどディレクトリ制限があったりして単にアプリ公開用として考えると微妙

FirebaseはいろんなBaaさぁびすがあるが、今回扱うのはホスティングのみ。


Firebaseの始め方


  1. アカウントを取る
  2. Firebaseプロジェクトを作る
  3. Firebase CLIを入れる
  4. ローカルのプロジェクトとFirebaseプロジェクトを関連付ける
  5. 動作確認する
  6. デプロイする

アカウントを取る

FirebaseはGoogleに買収されて傘下になったのでGoogleアカウントでとれます


プロジェクトを作る

FirebaseホスティングはWebブラウザからでないとプロジェクトを作れないらしい。

ブラウザ上での作業はプロジェクトを作るだけでよい。

Firebase CLIを入れる

まず、Nodeを入れていない場合は先にNodeを入れる。

Nodeが入っていればnpmコマンドが使えるのでCLIをぶち込む。
（インストールに結構時間がかかる）
$ npm i -g firebase-tools

CLIがインストールされるとfirebaseコマンドが使えるようになる。
最後にFirebaseにコンソールからログイン。
$ firebase login

なんかブラウザが立ち上がってそれでログインできるハイテク仕様。


ローカルのプロジェクトとFirebaseプロジェクトを関連付ける

ローカルで新規ディレクトリを作って以下のコマンドを入力。
$ firebase init

コンソールになんかいろいろ出てくる。
Hostingを選んで、なんか適当にEnterを押しまくれば終わる。
ただし、プロジェクトを選択するところでは、最初に作っておいたプロジェクトを選ぶこと。

こうすると、firebase.jsonファイルと.firebasercファイルとpublicフォルダが生成される。

……らしいのだが、なぜかこちらの環境では上手くいかなかった。
なので、手動でこれらのファイルを用意する方法も書いておく。

firebase.json

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

firebase.jsonは上記コピペで良い。


.firebaserc

{
  "projects": {
    "default": "PROJECT_NAME"
  }
}

.firebasercはdefaultに、ブラウザで作ったプロジェクトの名前をぶち込む。 "default": "tsurume-34f8d"など。 これで紐づけ完了。

 publicフォルダの中身がそのままホスティングされる。
ディレクトリ制限やファイル制限もないっぽい。

 publicフォルダ直下にwebアプリのindex.htmlがあるようにして作ったwebアプリを中にぶち込む。
.htmlとか.cssとか.jsとか.pngとか.wofとか。

動作確認する

コマンドをうつだけ。
$ firebase serve

http://localhost:5000を開けとかなんとかとコンソールで指示されるので、それをブラウザで開く。
上手く動作しているか確かめる。

デプロイする

コマンドをうつだけ。
$ firebase deploy

https://${PROJECT_NAME}.firebaseapp.com/にて公開される。




コメント

コメントを投稿

このブログの人気の投稿

ぷよぷよ 4つの戦法

イメージ
カードゲーム的な分類にあやかって仕掛けるタイミングで4種に分類してみる。 フェイス アグロ ミッドレンジ コントロール フェイス 初っ端から赤玉1個分(5段)程度の巨大同時消しを構えて相手を威圧し、さっさと潰して勝つ。 全消しが取れたら強い。 カードゲーム同様、序盤で勝てないときついことが多いが、運次第では理不尽に勝つことができる。 序盤で勝てないときついのは伸ばしを考えないとそうなる。 上図は2連鎖トリプル全消しである。 2連鎖なので凝視していないと相手は対応できない。対応できないと赤玉が降ってくるのでまず潰される。 更に今回の例では全消しボーナスで+5段なのでまず勝てる。 ただし、この例はあまり伸ばしを考慮していないため、相手に隙が無いとここから伸ばさないといけなくなるため苦しい。 おじゃまぷよを消しつつ連鎖を繋げる技術を掘りと言う。 下図は1段分のおじゃまぷよを見事修復した例である。 相手の連鎖を潰すために連鎖を撃つのは良いが、上記のように掘られてしまっては意味が無い。 相手を潰せるであろう十分量が5段分なのである。 基本的に、一気に掘れる量は2段までであり、3段以上となると単発消しなどで2段にしてから掘るのが一般的だ。 ただし、例外としてカウンターには注意したい。 おじゃまぷよというのは1度に5段しか降らないため、発火点が5段目にあるとおじゃまぷよを食らってからでも発火することができる。 上図は4連鎖。 下図は1列目の黄色を基点とした6連鎖であるが、発火までに黄色があと3つも必要である。これは大きな隙である。 相手がもしこのような形を組んでいたら咄嗟に大きい2連鎖を放つことで相手に発火される前に勝つことができる。 フェイス戦術の狙いはここにある。 しかし、相手に読まれた場合、このように隙のある組み方はしてこないだろう。 そうなると潰す隙が無く、単純に連鎖勝負になってしまう。 したがって、フェイス戦術を使う際も、ある程度将来性のある形というものは意識したい。 下図は黄色発火からの2トリを保持したまま右で折り返した形である。 下図は黄色発火からの2連鎖クアドラプル(3色)を保持しつつ、最下段の赤の横3からの発火で8連鎖。 連鎖力次第では中盤以降まで粘るポテンシャル...
続きを読む

LLR

イメージ
LLRの基本形 上図において、緑→黄→赤と消す。 GTRを考えるとなんとなく緑→赤→黄のイメージがあるため順番に注意。 LLRの利点 ABACで先折GTRを狙うと下図のようになる。 上図で緑黄色が来ると、先折GTR狙いだと下図左のように黄色を分離させなければならない。一応全消しは取れる距離だが、GTRとして伸ばすことを考えると黄色が大量に必要になってしまう形。 そこで、黄色を分離させないで下図右のように置くことでLLRに移行できる。 LLRの基本土台とその派生 一番最初に挙げた例が本来のLLR。その他は派生形。 同時消しにならないように段差を確保する必要がある形もあるので注意。 段差の確保に使ったぷよは潜り込み連鎖尾に活用する。 また、下図のように赤の形が変わっても連鎖になる。 連鎖尾 連鎖尾が組めないと連鎖数がなかなか伸びない。 4, 5列目の段差が大きいため、そのまま雪崩を入れると苦労する。 簡単なのは右端に縦3を作る連鎖尾。 更に実戦的な連鎖尾は下図のようにY字を作る連鎖尾。 いろいろな連鎖尾。 速攻 上図のパターンは速攻を仕掛けやすい。 ハチイチで2トリが打てる形など。 連鎖に切り替えるときは段差に注意。
続きを読む

ぷよぷよ 先折り階段を組む時に考えたこと

イメージ
先折り階段を組む時に考えたこと 時期: 階段5連鎖はまずまず組めるようになったが折り返しが組めない(後折り) その1: 組むべき形を先に決めておく アドリブで組もうとしても自由落下ですら組めない…… ということで先に形を決めておいて、それを作るという発想にシフト。 これだと形が先に決まっているので、ネクストやネクネクを見ながら置くことができて、高効率で捌ける。先折りGTRと同じ発想。 シミュレーターでひとしきり座学し、それで完成したテンプレートの最終形態が以下の図。 土台は3-1階段にするのが前提。ネクネクまで見ればなんとか組めなくもない。 完成形予想図は以下の図。 下手にアドリブを入れようとしてはならない。愚直に組む。 3-1階段の特徴として、1のほうのぷよはすぐ真上に置かなくても連鎖はつながるというのがある。下図は緑発火の4連鎖であり、黄色まで連鎖はつながる。(鉄ぷよはゴミぷよの抽象化) しかし、土台を組む上でこれは狙ってはいけない。 特に、赤のような2段のゴミは絶対に避けるべきである。 土台が高くなってしまうと、この折り返しテンプレートの効力は一気に下がってしまう。(下図) 上図では、折り返しで連鎖を上に伸ばしたのは良いものの、非常に伸ばしづらい。 ツモが悪いときは1段のゴミは仕方がない場合もあるが、基本はアドリブなどせずにゴミのない愚直な3-1階段を心がける。 ネクネクまで見ると意外と組める。 また、ツモによっては土台の最後の列に縦3を作れない場合がよくある。 その場合は下図のように底上げした2-2階段を目指すと良いだろう。 ただし、ベースは綺麗な3-1階段の土台を組むという意識を忘れない。 先折り基本形 先折り基本形を再掲した。(上図左) これは、基本的に 4色 で組まなければならない。 例外として、青と黄色の位置関係のぷよは同色にできる。(上図右) なぜそういう色の制約が生まれるのかは長くなるので割愛したいが、1例だけ。 下図は、基本形に似た形であるが似て非なるものである。 同色になれるのは青と黄色の位置関係のぷよだけであり、いわば失敗形である。 上図がなぜ失敗形なのかは、連鎖を完成させれば分かる。 これまでの前提を元に連鎖を組んだのが下図だ。 これは折...
続きを読む