0
3

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 5 years have passed since last update.

firebaseを使ったHP公開/更新方法

Posted at

はじめまして!
初投稿のwelfare_seと申します!
皆さまフォローよろしくお願いいたします!

今回はfirebaseを使ったホームページの公開・更新方法をお伝えいたします。

こちらのやり方では静的コンテンツしか公開できませんが、超簡単にホームページを公開できるので備忘録として公開します。

1.firebaseの設定
・firebaseへログイン
・Firebase のコンソールに移動
公開するサイトを管理するためのプロジェクトを作成
プロジェクトは公開するサイト1つにつき、1つ必要
国は「日本」を選ぶ
ロケーションは「asia-northeast1」

2.PC内の設定
・プロジェクト用フォルダを作る
・公開したいサイトのフォルダを移動
移動したフォルダ名は必ず「public」とする!

3.Node.jsをインストールしていなかったらインストール
https://nodejs.org/ja/
・推奨版をインストール
・コマンドで「node -v」と打ち、インストールされているか確認
コマンドで「npm -v」と打ち、npmがインストールされているか確認
Windows PowerShellなら「clear」で画面をクリアにできる

4.Firebaseのコマンドラインツールの導入
・macOSの場合
「sudo npm install -g firebase-tools」
・Windowsの場合
「npm install -g firebase-tools」と打つ
・PCで設定したfirebaseログイン用のパスワードを入力
・「firebase -V」でバージョンを確認
・必要に応じて「npm i -g firebase-tools」でアップデート

5.firebaseへログイン
・firebase login

6.プロジェクト用のフォルダをfirebase用に初期化
・フォルダのあるディレクトリまでコマンドで移動
・「firebase list」と打つ
・Project ID を選択してコピーして必ずメモしておく
・「firebase init --project= プロジェクトID」と打つ
・矢印キーとスペースキーを使ってhostingを色丸にする
・Enterを押す
・公開用のフォルダをどれにするか質問される(publicならそのままEnter)
・あとの設定はデフォルトで

7.サイトの公開
・プロジェクトフォルダに移動する
・コマンドで「firabase deploy」と打つ
・Hosting URLを必ずコピペしてメモする
・URLをchromeのはりつけてページがアップされていれば公開されている

8.サイトの更新
・更新したいファイルを編集
・ターミナル/WindowsPowerShellを起動
・プロジェクトフォルダまでコマンドで移動
・コマンドで「firebase deploy」を打つ
・デプロイの履歴からならロールバックもできる

 

0
3
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
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?