Firebase Hosting 入門
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
** 事前準備 [#o5580ccc]
- Firebase にログイン(Google アカウント要)
- HTML / CSS 準備
** プロジェクト作成 [#v8ab66c1]
- "プロジェクトを追加" をクリック
- プロジェクト名: MyFirstFirebaseProject
- 国 / 地域: 日本
- "プロジェクトを作成" をクリック
- ローカルに作業用フォルダ "MyFirstFirebaseProject" を作成
- "MyFirstFirebaseProject" フォルダ配下に "public" フォル...
** Node.js インストール [#d3655cd3]
- [[Node.js Official Site:https://nodejs.org/ja/]] より m...
- インストーラーを利用して node.js をインストール
- node.js バージョン確認
$ node -v
v8.11.3
- npm バージョン確認
$ npm -v
5.6.0
- ターミナルの画面クリア: Ctrl + l
** Firebase CLI (firebase-tools) インストール [#fdb21fb1]
- Firebase CLI バージョン確認
$ firebase -V
3.19.3
- Firebase CLI ログイン
$ firebase login
- ブラウザが起動するので Google アカウントを指定して "許...
✔ Success! Logged in as example@gmail.com
** プロジェクトの初期設定 [#b7fbb615]
- ローカルの作業用フォルダへ移動
$ cd Desktop/MyFirstFirebaseProject
- Firebase 初期化
$ firebase init
- 利用するサービスにカーソルを移動して Space キーを選択し...
? Which Firebase CLI features do you want to setup for t...
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firest...
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase H...
◯ Storage: Deploy Cloud Storage security rules
- Firebase プロジェクトを選択
- 公開するフォルダを選択
? What do you want to use as your public directory? public
- SPA として公開するかどうか選択
? Configure as a single-page app (rewrite all urls to /i...
- index.html を上書きするかどうか選択
? File public/index.html already exists. Overwrite? No
- Firebase 初期化完了
✔ Firebase initialization complete!
** サイト公開 [#ocfca7fd]
- フォルダ構造(firease.json, public/404.html は自動生成)
|--.firebaserc
|--firebase.json
|--public
| |--404.html
| |--index.html
| |--style.css
- Firebase 上にデプロイ
$ firebase deploy
=== Deploying to 'myfirststyledpageproject'...
i deploying hosting
i hosting: preparing public directory for upload..
✔ hosting: 3 files uploaded successfully
✔ Deploy complete!
Project Console: https://console.firebase.google.com/pro...
Hosting URL: https://myfirstfirebaseproject.firebaseapp....
- URL を確認
- エラーページを確認(存在しない URI を指定)
** サイト更新 [#w8d8aa90]
- html / css を修正後に firebase を再デプロイ
$ firebase deploy
- Firebase console (Web console) でデプロイ履歴や過去バー...
** 別のサイトを作成 [#y81ec059]
- 1サイトにつき1プロジェクト作成する必要があるため新規サ...
- デフォルトではプロジェクト作成数の上限が存在するため必...
** プロジェクト削除 [#z77fd735]
- FIrebase console >> Project Overview >> プロジェクトの...
終了行:
#contents
** 事前準備 [#o5580ccc]
- Firebase にログイン(Google アカウント要)
- HTML / CSS 準備
** プロジェクト作成 [#v8ab66c1]
- "プロジェクトを追加" をクリック
- プロジェクト名: MyFirstFirebaseProject
- 国 / 地域: 日本
- "プロジェクトを作成" をクリック
- ローカルに作業用フォルダ "MyFirstFirebaseProject" を作成
- "MyFirstFirebaseProject" フォルダ配下に "public" フォル...
** Node.js インストール [#d3655cd3]
- [[Node.js Official Site:https://nodejs.org/ja/]] より m...
- インストーラーを利用して node.js をインストール
- node.js バージョン確認
$ node -v
v8.11.3
- npm バージョン確認
$ npm -v
5.6.0
- ターミナルの画面クリア: Ctrl + l
** Firebase CLI (firebase-tools) インストール [#fdb21fb1]
- Firebase CLI バージョン確認
$ firebase -V
3.19.3
- Firebase CLI ログイン
$ firebase login
- ブラウザが起動するので Google アカウントを指定して "許...
✔ Success! Logged in as example@gmail.com
** プロジェクトの初期設定 [#b7fbb615]
- ローカルの作業用フォルダへ移動
$ cd Desktop/MyFirstFirebaseProject
- Firebase 初期化
$ firebase init
- 利用するサービスにカーソルを移動して Space キーを選択し...
? Which Firebase CLI features do you want to setup for t...
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firest...
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase H...
◯ Storage: Deploy Cloud Storage security rules
- Firebase プロジェクトを選択
- 公開するフォルダを選択
? What do you want to use as your public directory? public
- SPA として公開するかどうか選択
? Configure as a single-page app (rewrite all urls to /i...
- index.html を上書きするかどうか選択
? File public/index.html already exists. Overwrite? No
- Firebase 初期化完了
✔ Firebase initialization complete!
** サイト公開 [#ocfca7fd]
- フォルダ構造(firease.json, public/404.html は自動生成)
|--.firebaserc
|--firebase.json
|--public
| |--404.html
| |--index.html
| |--style.css
- Firebase 上にデプロイ
$ firebase deploy
=== Deploying to 'myfirststyledpageproject'...
i deploying hosting
i hosting: preparing public directory for upload..
✔ hosting: 3 files uploaded successfully
✔ Deploy complete!
Project Console: https://console.firebase.google.com/pro...
Hosting URL: https://myfirstfirebaseproject.firebaseapp....
- URL を確認
- エラーページを確認(存在しない URI を指定)
** サイト更新 [#w8d8aa90]
- html / css を修正後に firebase を再デプロイ
$ firebase deploy
- Firebase console (Web console) でデプロイ履歴や過去バー...
** 別のサイトを作成 [#y81ec059]
- 1サイトにつき1プロジェクト作成する必要があるため新規サ...
- デフォルトではプロジェクト作成数の上限が存在するため必...
** プロジェクト削除 [#z77fd735]
- FIrebase console >> Project Overview >> プロジェクトの...
ページ名: