LoginSignup
2
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-18

Firebaseにてデプロイの記録

【使用環境】
html
CSS
JavaScript
macbook

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


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

新しいプロジェクトフォルダを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   

ログインできた

2
2
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
2