ラッキーな日々

望んでも望んでも、叶わないから望み続ける

vue 共通

firebaseにやられるゾ 助けてイヌワシさん

投稿日:

Pocket

firebaseでデプロイ

Firebaseにログインするのじゃ

Firebase https://firebase.google.com/

コンソールへ移動しプロジェクトを作るのじゃぞ

プロジェクト追加すると入力画面が出るぞ

上図の青の部分を入力か選択してからプロジェクトを作成ボタンを押すのじゃ

黄色のプロジェクトIDは、デプロイするサイトURLに使われるぞ。

https://プロジェクトID.firebaseapp.com になるぞ。
(https://test001-20d76.firebaseapp.com)

こんな画面になるぞよ。

WEBアプリを公開する場合は、一番右の</>をクリックするのじゃぞ。

コピーしてローカルにできたプロジェクトフォルダーの中のindex.htmlに指示通りの位置に貼り付けるのじゃぞ。

コマンドラインからnpm install -g firebase-toolsを入力するのじゃ。

Firebase CLI をインストールするには、コンピュータに Node.js をインストールする必要があります。Node.js をインストールすると、npm(Node Package Manager)で次のコマンドを実行して Firebase CLI をインストールできます。

これで、グローバルに使用可能な Firebase コマンドを、コンピュータの任意のターミナル ウィンドウから使用できるようになります。Firebase CLI をインストールしたら、Google アカウントを使用してログインします。

C:\Users\******\test\testpro>npm install -g firebase-tools
C:\Users\******\AppData\Roaming\npm\firebase -> C:\Users\******\AppData\Roaming\npm\node_modules\firebase-tools\bin\firebase
+ firebase-tools@5.0.1
updated 3 packages in 11.095s

このコマンドを実行するとローカル コンピュータが Firebase アカウントに接続され、プロジェクトへのアクセス権が付与されます。その認証が機能していることをテストするには、firebase list を実行し、すべての Firebase プロジェクトのリストを表示します。このリストの内容は、Firebase コンソールに一覧表示されているプロジェクトと同じです。

Already logged in as **********@gmail.com

firebase  list

Name    | Project ID / Instance │ Permissions
test001 │ test001-20d76         │ Owner

プロジェクト ディレクトリ
CLI で実行される多くの共通タスク(デプロイなど)にはプロジェクト ディレクトリが必要です。プロジェクト ディレクトリは、firebase.json 設定ファイルが置かれている任意のディレクトリです。一般的にプロジェクト ディレクトリはソース管理のルートと同じである必要があります。また、firebase.json は、通常は README ファイルおよびその他の最上位ファイルとともに配置されます。プロジェクト ディレクトリを初期化する

新しいプロジェクト ディレクトリを初期化するには、ターミナルでディレクトリを目的のプロジェクト ディレクトリに変更して、次のコマンドを実行します。

firebase init
init コマンドを実行すると、プロジェクト ディレクトリの設定が順を追ってなされます。どの Firebase 機能を使用するかの確認も求められますが、init コマンドを後で再実行すれば、新しい機能をいつでも追加できます。

firebase init コマンドでは、新規ディレクトリは作成されません。
新しいプロジェクトをゼロから開始する場合は、先にディレクトリを作成し、その新しいディレクトリに移動してから、init コマンドを実行する必要があります。

\test001 のディレクトリ
2018/10/10 12:08 <DIR> .
2018/10/10 12:08 <DIR> ..
0 個のファイル 0 バイト

firebase init

######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########

You’re about to initialize a Firebase project in this directory:

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space
to select features, then Enter to confirm your choices.
( ) Database: Deploy Firebase Realtime Database Rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
( ) Storage: Deploy Cloud Storage security rules

? What do you want to use as your public directory? (public)testって入力したぞ

? What do you want to use as your public directory? test
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+ Wrote test/index.html

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…

+ Firebase initialization complete!

ファイル2つと指定したディレクトリができていたのじゃぞ。
指定したディレクトリの中には、index.htmlができていたのじゃ。\test001 のディレクトリ
2018/10/10 12:14 <DIR> .
2018/10/10 12:14 <DIR> ..
2018/10/10 12:14 55 .firebaserc
2018/10/10 12:14 234 firebase.json
2018/10/10 12:14 <DIR> test
2 個のファイル 289 バイト\test001\test のディレクトリ
2018/10/10 12:14 <DIR> .
2018/10/10 12:14 <DIR> ..
2018/10/10 12:14 3,505 index.html
1 個のファイル 3,505 バイト

出来ていたindex.htmlの中身はこれなのじゃ。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Welcome to Firebase Hosting</title>

<!– update the version number as needed –>
<script defer src=”/__/firebase/5.5.3/firebase-app.js”></script>
<!– include only the Firebase features as you need –>
<script defer src=”/__/firebase/5.5.3/firebase-auth.js”></script>
<script defer src=”/__/firebase/5.5.3/firebase-database.js”></script>
<script defer src=”/__/firebase/5.5.3/firebase-messaging.js”></script>
<script defer src=”/__/firebase/5.5.3/firebase-storage.js”></script>
<!– initialize the SDK after all desired features are loaded –>
<script defer src=”/__/firebase/init.js”></script>

<style media=”screen”>
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id=”message”>
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You’re seeing this because you’ve successfully setup Firebase Hosting. Now it’s time to go build something extraordinary!</p>
<a target=”_blank” href=”https://firebase.google.com/docs/hosting/”>Open Hosting Documentation</a>
</div>
<p id=”load”>Firebase SDK Loading&hellip;</p>

<script>
document.addEventListener(‘DOMContentLoaded’, function() {
// //
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref(‘/path/to/ref’).on(‘value’, snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref(‘/path/to/ref’).getDownloadURL().then(() => { });
//
// //

try {
let app = firebase.app();
let features = [‘auth’, ‘database’, ‘messaging’, ‘storage’].filter(feature => typeof app[feature] === ‘function’);
document.getElementById(‘load’).innerHTML = Firebase SDK loaded with ${features.join(', ')};
} catch (e) {
console.error(e);
document.getElementById(‘load’).innerHTML = ‘Error loading the Firebase SDK, check the console.’;
}
});
</script>
</body>
</html>

ローカルのブラウザで見るとこんな感じ。

init コマンドの最後のステップで、デフォルトの Firebase プロジェクトを選択するよう求められます。これによりディレクトリがプロジェクトに関連付けられ、プロジェクト ディレクトリ内から firebase deploy などのプロジェクト固有のコマンドを実行したときに適切なプロジェクトが使用されるようになります。また、同じディレクトリに複数のプロジェクトを関連付けることもできます(ステージング プロジェクトや運用プロジェクトなど)。
デプロイ
Firebase CLI では、Firebase プロジェクトへのコードとアセットのデプロイを管理できます。firebase deploy コマンドを使用して次のデプロイを行うことができます。Firebase Hosting サイトの新規リリース
新規または既存の Cloud Functions
Firebase Realtime Database のルール
Cloud Storage のルール
Cloud Firestore のルール
Cloud Firestore のインデックス
デフォルトでは、デプロイを実行すると、プロジェクト ディレクトリ内にあるデプロイ可能なすべてのリソースについて、新しいリリースが作成されます。
デプロイするには、プロジェクト ディレクトリに firebase.json が置かれている必要があります。

注: 古いバージョンの CLI の –only rules 構文は、次のコマンドで置き換えられています。 * –only database(Realtime Database ルールの場合) * –only storage(Storage ルールの場合) * –only firestore(Cloud Firestore インデックスおよびルールの場合) * –only firestore:indexes(Cloud Firestore インデックスの場合) * –only firestore:rules(Cloud Firestore ルールの場合)

結局わからんかったぞ

スポンサーリンク
スポンサーリンク

関連記事

教えてよ象さん データバインディングって何?

データバインディング(データバインド、あるいはData Bindingの訳からデータ結合とも呼ばれる。) とは、XMLなどのデータソースとアプリケーションやウェブページ(ウェブアプリケーション)のユー …

クリオネさん label for=”ID名”って何

label要素 フォーム部品とラベルを関連付けることができます。

お名前: 出典:部品とラベルを関連付ける URL https://w …

教えてタヌキさん インスタンスって何 クラスって何?

インスタンスとクラス インスタンス(instance)は、「実体」や「実例」「事例」のこと。実際のメモリが割り当てられたデータ。 クラスは、「型」や「設計図」、金型というかテンプレート的なもの。 イン …

spliceってなに? おしえてアリさん

おしえてアリさん Vue.jsでは、配列の既存の要素を書き換えた場合、配列への参照は変化しないためその変化を検出できません。 dataプロパティで配列を定義した場合にリアクティブに動作させる方法 イン …

疲れたで

調べよう

ありがとう

【プロフィール】
はじめまして EveryDayisaGoodDayです。日本語に直すと日々是好日となります。
個人事業者です。望んでいたわけではないですが、いつのまにかそうなっていました。

病気をしてから、物忘れがひどいのでこのブログは私的な備忘録です。
さっきやったことも忘れるのでブログ自体も迷走中。
望んでも 望んでも 叶わないから望み続ける。

ペットのおうち

鍵開け 鍵修理 24時間 緊急対応
24時間対応鍵トラブル緊急サービスの全国展開おなじみのマルチ救急24岡山市鍵トラブル修理サービスホームページがリニューアル。

岡山市で、お住い 金庫 バイク 原付の鍵トラブルに緊急対応。

  • 鍵をなくしてドアが開けられない。
  • 鍵穴の不具合で鍵が回らない。
  • 鍵が折れた

鍵のトラブルでお困りならお気軽にお問合せ下さい。

深夜の突然の水漏れやトイレのつまりに困ったことは、ありませんか?

全国24時間対応で水漏れ修理 トイレつまりに深夜でも緊急に出動してくれる水道修理サービスがあります。

水漏れ 排水つまりでお困りならこちらの安心の水道修理サービスをご利用してみてください。