Firebaseで最短でHelloWorldを表示する

4699 ワード
初心者 Firebase HelloWorld 初心者 テキストリンク

同じようなタイトルの記事は無限にあるのに、どれに沿ってやってもできなかったので書く
たしかディレクトリ（フォルダ）のとこがどこにも書かれてなかった気がする

Firebaseに登録

https://firebase.google.com
から適当に登録
Googleに登録しとけばそれで良いのかも

プロジェクト作成

プロジェクトを追加

プロジェクト名を決める


プロジェクト名は他の人と被っても大丈夫だけど、被ってる場合のドメインは下に出てる灰色のやつがプロジェクトIDでありドメインになる
（今回はsample-project-39b8b、鉛筆マークで編集可、後から変更不可）

あとはなんか適当にok押しまくる

作業用フォルダ作成

好きな場所に空のフォルダを作成
今回は
user/Firebase/SampleProject
で作成しておくので、今後この場所が出てきたら自分の場所と入れ替えて認識して
プロジェクト名と揃えておくと良いかと

Nodejsインストール

コマンドラインからNodejsとfirebaseをインストールします
これは他の記事で行けたのでここら辺参照して各自よろしく

コマンドライン操作

コマンドプロンプトなりターミナルなりのCLIに以下コマンドを入力

firebaseログイン

CLI
cd ~/Firebase/SampleProject # SampleProjectのあるディレクトリへ移動
export PATH=$PATH:`npm bin -g` # PATHを通す
firebase login

ここに書いてるPATHの中身はmac用かな？
cdでさっき作った作業ディレクトリを指定して、firebaseにlogin、そのまんま

作業フォルダ初期化

はじめに戻すって意味じゃなくて、初期設定って意味

CLI
firebase init --project=プロジェクトID

Hosting選択


上記の画面が出たら、上下キーで選んで、スペースキーでon/offを切り替え
今回はHostingのみ選択してEnter

初期設定


デプロイ（アップロード）するフォルダの名前を聞いてると思うんだけど、デフォルトのpublicにしておいた方が混乱しないと思うのでEnter


どこにアクセスしても全部index.htmlに飛ばす？って聞いてる気がする
余計なことはしない、No
大文字になっている方がデフォルトらしいのでEnter

デプロイ

ここまでやるとさっき作ったSampleProject内にいろいろファイルが作られる

CLIでデプロイをするとpublicフォルダの中身がアップロードされる（なんでアップロードじゃなくてデプロイって言うんだよ素直にアップロードって言ってくれよ）
htmlとかjsとかcssとかはここに入れる
index.htmlの中身を好きなように編集する
今回はタイトル通り、全てを消して以下の１行だけにしてみる

index.html
hello world

デプロイ

CLIから以下のコマンドを入力

CLI
firebase deploy

Deploy complete!って言われたら完了

今まで秘密にしてたけどプロジェクトIDはsampleproject-yukiでした
Hosting URL: https://sampleproject-yuki.web.app
って書いてあるので、ご指定のURLに行くと無事hello worldが表示されているはず
今私のURLに飛んでも私の検証用の何かがあるかもしれんしプロジェクト消えてるかもしれんけど

ログイン以降はちゃんとやりながら書いたからこれでできるはず

参考にした記事

FirebaseでWebページを公開するまで