Help us understand the problem. What is going on with this article?

Firebase 静的サイト(html CSS JavaScript)をデプロイ

Firebaseにてデプロイの記録

【使用環境】
html
CSS
JavaScript
macbook

<次回の時短の為に記録>


Firebaseにて登録、 (googleアカウント必要)ログイン

https://firebase.google.com/

新しいプロジェクトフォルダをFirebase HP内で作成する。
スクリーンショット 2020-01-18 17.31.20.png


ここからターミナルで

今回は下記②の設定のために public ディレクトリ 配下にデプロイアプリ(html CSS JavaScript img等)を配置

URL > ルートパスの為


デプロイにGitHubは必須ではないが、
git add ←必要なら
git commit   ←必要なら
push ←必要なら


① firebase-tools をインストール

(npm がインストールされている前提)
$ npm install -g firebase-tools

$ npm -v

$ firebase -V

$ firebase login

アプリディレクトリへ移動後、

①初期化

$ firebase init

この画面が出る
スクリーンショット 2020-01-18 16.53.21.png

PCの矢印キーで Hosting:  を選択。 (色が変わる。かつ●へ)
エンター
スクリーンショット 2020-01-18 16.53.46.png

firebaseのHPで作成した

アプリを関連付けるプロジェクトを選択するよう求められる

Use an existing project を選んで エンター
スクリーンショット 2020-01-18 16.55.55.png

HPで作成したプロジェクト一覧がでる。
今回のものを選択し、エンター

(画像はありません)

ディレクトリのパスを聞かれるのでデフォルト (/public) のまま エンター

スクリーンショット 2020-01-18 17.19.42.png

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
他も動かすため、推奨 Nを選択

File public/index.html already exists. Overwrite?
作成したindex.htmlが上書きされるので 推奨 Nを選択

complete!

スクリーンショット 2020-01-18 17.23.30.png

初期化が完了


デプロイ

そのままの階層で 

$ firebase deploy

スクリーンショット 2020-01-18 17.25.57.png

↑ ここの下に URLがある。

デプロイ完了

(修正後の再デプロイは、$ firebase deployだけで↑は不要)


2回目以降の事象

$ firebase login

>Error: Server Error. certificate has expired

スクリーンショット 2020-01-18 16.47.15.png

その為、

firebase-toolsをupdateする必要がある

$ sudo npm i -g firebase-tools 

$ firebase login   

ログインできた

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした