FirebaseHostingをWindowsのVScodeで開発と公開する

FirebaseHostingを使って静的Webサイト作成

最近になってようやくFirebaseという便利なMBaasを知り、試しにやってみたので、その備忘録

事前準備

開発するwindowsにnodejsをインストールをする必要があります。

プロジェクトの作成

Firebaseのコンソールにアクセスして、プロジェクトの作成。
プロジェクト追加をする

プロジェクト名等を入力して、プロジェクトの作成を押下する。(途中で作成完了のポップ出るので「OK」?か何かを押下)

下記画面になればオッケー

windowsの準備

適当な場所にフォルダーを作成します。

vscodeで開発

先ほどのフォルダーをVScodeで選択
ターミナルで「npm install -g firebase-tools」と入力する。

続いて、「firebase login」と入力して、webブラウザーが開くのでログイン
続いて、「firebase init」と入力する。
最初の質問に、「yes」とそして、「Hosting」を選択して、エンターを押す。

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

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

  C:\Users\***\Documents\firebase\testweb

? 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

次にプロジェクトを選択する。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
  [don't setup a default project]
> testweb (testweb-82e62)
  spell (spell-722ef)
  [create a new project]

最後に、空エンターして次の質問に「N」と回答すればOK

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

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

+  Firebase initialization complete!

Publicのフォルダーと他2つファイルができるので、Publicのフォルダー内でwebサイトを作ると良い。

最後にコマンドで、「firebase deploy」とするだけで、公開可能!!

=== Deploying to 'testweb-82e62'...

i  deploying hosting
i  hosting: preparing public directory for upload...
+  hosting: 2 files uploaded successfully

+  Deploy complete!

Project Console: https://*******************************
Hosting URL: https://*******************************

Hosting URLがURLになるのでそこにアクセスしてもらうとOKです。