【Firebase】Node.jsでWebアプリを作る際の準備, 開発環境【Windows】

man

困ってる人

Node.jsで何か作ってみたいんだけど、何から始めていいのかが分からない
Firebaseって何?
最初の準備ってどうすればいいんだろう?

それでしたら今回は、始めの準備として
Node.js、Firebaseの導入方法からデプロイまでを簡単にご紹介しますね

operator

オペレーター


こんにちは、ikuxxと申します。

今回必要なものは、

  • Node.jsのインストール
  • Firebase(Googleアカウント)
  • 他にも必要であれば、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 or define an alias by running firebase use –add

    この場合は「コマンドプロンプト」上で、

    なので、今回の場合だと

    ※プロジェクトIDの確認方法は、Firebaseのサイトから

    【Firebase】index.htmlを編集して再度アクセスしても初期画面から表示が変わらない

    「firebase deploy」後に、Hosting URLにアクセス、

    「public\index.html」を編集しても、初期画面から表示が変わらない場合、

  • ブラウザのキャッシュをクリア
  • 再度デプロイ
  • Firebaseのhosting画面でデプロイ時間を確認
  • これらを試してみる。

    プロジェクトを停止する場合は「hosting:disable」

    Firebaseプロジェクトの削除方法

    「Firebase」トップ画面左上の歯車マークから「ユーザーと権限」をクリック

    上の「全般」をクリックするとプロジェクト名が表示されるので、下にスクロールして「プロジェクトの削除」をクリック。

    全ての項目にチェックを入れて「プロジェクトの削除」

    終わり。

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール