Node.js、Firebaseの導入方法からデプロイまでを簡単にご紹介しますね
こんにちは、ヨロと申します。
今回必要なものは、
他にも必要であれば、HTMLファイルや、CSSファイルを用意。
もし、HTML, CSSが分からないという人はこちらの記事がおすすめかも ↓。
HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】
「Node.js」もあらかじめインストールしておく必要があるので、もし分からないという人はこちらの記事もおすすめかも ↓。
Node.jsのインストールからHello World!まで
という事で、早速まずは「コマンドプロンプト」を起動。
プロジェクトファイルの準備
今回は、試しにデスクトップに「sample」というプロジェクト用のフォルダを作成。
①「cd desktop」でデスクトップに移動。
②「mkdir ファイル名」でアプリケーションを作る為のフォルダを作る(今回のファイル名は、試しに「sample」)
③「cd sample」で②のフォルダ内に階層を移動。
Firebaseにログイン
「Firebase」にアクセスし、ログイン(Googleアカウントを持っていない場合はここで作成)
「プロジェクトの追加」をクリック
プロジェクト名、ID、国/地域を選択し、
今回は試しに「sample」というプロジェクト名。
そうするとこんな感じ(今回のプロジェクトIDは、sample-521c8)
「プロジェクトの作成」をクリックし、次へ。
「開発」 → 「hosting」 → 「始める」をクリック。
そうすると「ホスティングの設定」という画面が表示される
Firebaseツールをインストール
ここからは「Firebase」の画面に書かれている通りに進む。
「コマンドプロンプト」で「npm install -g firebase-tools」 → Firebaseツールをインストール
次に「firebase login」 → 「Y」
ブラウザが開くので、Googleにログイン後「許可」
そうするとこんな画面が表示される。
「コマンドプロンプト」で「firebase init」 → そうするとこんな感じ。
Are you ready to proceed? (Y/n)と、
プロジェクトのディレクトリ(フォルダ)を聞かれるので、もしOKなら「Y」
そうすると次に、Which Firebase CLI～ という質問が表示される。
PCの「↑↓キー」でカーソル「>」を移動、
「スペースキー」で( )内にチェック「*」を入れていく(今回は、DatabaseとHostingの部分にチェック) →「エンターキー」
(*) 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「Select a default Firebase project for this directory: (Use arrow keys)」と聞かれる →「エンターキー」
「What file should be used for Database Rules? (database.rules.json)」と聞かれる →「エンターキー」
「What do you want to use as your public directory? (public)」 →「エンターキー」
「Configure as a single-page app (rewrite all urls to /index.html)? (y/N)」と聞かれる →「N」
そうすると、プロジェクトフォルダ内にいろいろなフォルダが作成される。
この中の「public」フォルダの中に「index.html」が作られる。
あとは「index.html」を好きなように編集すればOK。
Firebaseでデプロイ
「コマンドプロンプト」で「firebase deploy」
そうすると「Hosting URL: https://プロジェクトID.firebaseapp.com」と表示されるので、そのURLをブラウザに入力し、アクセスが可能になる。
firebaseでエラーが出てdeployが出来ない場合：Error: No project active
「firebase deploy」でエラーが出る場合、
Error: No project active. Run with –project
この場合は「コマンドプロンプト」上で、
firebase deploy –project プロジェクトID でOK
なので、今回の場合だと
firebase deploy –project sample-521c8
※プロジェクトIDの確認方法は、Firebaseのサイトから
【Firebase】index.htmlを編集して再度アクセスしても初期画面から表示が変わらない
「firebase deploy」後に、Hosting URLにアクセス、
「public\index.html」を編集しても、初期画面から表示が変わらない場合、
これらを試してみる。
プロジェクトを停止する場合は「hosting:disable」
Firebaseプロジェクトの削除方法
「Firebase」トップ画面左上の歯車マークから「ユーザーと権限」をクリック
上の「全般」をクリックするとプロジェクト名が表示されるので、下にスクロールして「プロジェクトの削除」をクリック。
全ての項目にチェックを入れて「プロジェクトの削除」
終わり。
Firebaseって何？
最初の準備ってどうすればいいんだろう？