2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Firebaseで最短でHelloWorldを表示する

Last updated at Posted at 2020-05-16

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

Firebaseに登録

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

プロジェクト作成

プロジェクトを追加

スクリーンショット 2020-05-16 22.12.34.png

プロジェクト名を決める

スクリーンショット 2020-05-16 22.26.28.png
プロジェクト名は他の人と被っても大丈夫だけど、被ってる場合のドメインは下に出てる灰色のやつがプロジェクト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選択

スクリーンショット 2020-05-16 22.50.55.png
上記の画面が出たら、上下キーで選んで、スペースキーでon/offを切り替え
今回はHostingのみ選択してEnter

初期設定

スクリーンショット 2020-05-16 22.54.59.png
デプロイ(アップロード)するフォルダの名前を聞いてると思うんだけど、デフォルトのpublicにしておいた方が混乱しないと思うのでEnter

スクリーンショット 2020-05-16 22.55.18.png
どこにアクセスしても全部index.htmlに飛ばす?って聞いてる気がする
余計なことはしない、No
大文字になっている方がデフォルトらしいのでEnter

デプロイ

ここまでやるとさっき作ったSampleProject内にいろいろファイルが作られる
スクリーンショット 2020-05-16 23.03.55.png

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

index.html
hello world

デプロイ

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

CLI
firebase deploy

Deploy complete!って言われたら完了
スクリーンショット 2020-05-16 23.17.24.png

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

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

参考にした記事

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?