【Firebase入門】FirebaseへHTMLファイルをデプロイし静的サイトを公開する

スポンサーリンク

FirebaseへHTMLファイルをデプロイし静的サイトを公開してみます。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node version 14.15.0

・npm version 6.14.8

■Firebaseへアクセスする

まずは、Firebase（https://firebase.google.com/?hl=ja）にアクセスします。アクセスすると、「使ってみる」ボタンがありますので、こちらをクリックします。クリックする場合は、事前にGoogleアカウントを取得しておく必要があります。なお、今回はSparkプラン（無料プラン）で行います。

クリックすると、「プロジェクトを作成、もしくはプロジェクトの作成」ボタンがありますので、こちらをクリックします。

クリックすると、「プロジェクトの作成（手順）」というのが表示されますので、まずはプロジェクトに名前をつけます。「プロジェクト」と表示されている下の入力欄にプロジェクト名を入力します。今回は「test」とします。

入力後、「続行」ボタンをクリックします。

クリックすると、「Google アナリティクス （Firebase プロジェクト向け）」と表示されます。Google アナリティクスの機能の確認を行い、「このプロジェクトでGoogleアナリティクスを有効にする」かどうかをスイッチボタンできりかえます。今回は「有効」のまま「続行」ボタンをクリックします。

クリックすると、「Google アナリティクスの構成」と表示されます。「アカウントを選択」をクリックします。

クリックすると、プルダウンメニューが表示されます。すでにGoogleアナリティクスをお使いの方は、アカウントが表示されていますので、その中から今回のプロジェクトと結びつけるアカウントを選択するか「新しくアカウントを作成」ボタンで新しくアカウントを作成し、選択します。

選択後、「プロジェクトを作成」ボタンをクリックします。

クリックすると、プロジェクトの作成が開始されます。

しばらくすると、「新しいプロジェクトの準備ができました」と表示されます。その下に「続行」ボタンがあるので、こちらをクリックします。

クリックすると、新しく作成したプロジェクトの画面になります。これでプロジェクトの作成は完了です。

■HTMLファイルを置くディレクトリを用意する

作成後、HTMLファイルを置くディレクトリを用意します。

今回は「C:\deploy\public（フォルダパス）」にHTMLファイルを置きます。

HTMLファイルの中身は、上記となります。

■package.jsonファイルを作成する

今回用意したディレクトリにHTMLファイルが置いた後は、Windowsのデスクトップ画面にある検索ボックスに「Node.js command prompt」と入力し、「Node.js command prompt」をクリックします。

クリックすると、コマンドプロンプトが起動しますので、cdコマンドでHTMLファイルを置いたディレクトリまで移動します。

npm init -y

移動後、上記のコマンドを入力し、Enterキーを押します。

Wrote to C:\deploy\package.json:

{
  "name": "deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Enterキーを押すと、上記のpackage.jsonファイルが作成されます。

■Firebaseをインストールする

C:\deploy> npm install --save firebase

作成後、Firebaseをインストールしますので、コマンドプロンプトで上記のコマンドを入力し、Enterキーを押します。

……] | extract:core-js: sill extract core-js@3.6.5 extracted to C:\deploy\node_modules\.staging\core-js-
> core-js@3.6.5 postinstall C:\deploy\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> protobufjs@6.10.1 postinstall C:\deploy\node_modules\protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN deploy@1.0.0 No description
npm WARN deploy@1.0.0 No repository field.

+ firebase@8.0.0
added 114 packages from 102 contributors and audited 114 packages in 11.705s

4 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

Enterキーを押すと、インストールが開始され、完了となります。

C:\deploy>npm install -g firebase-tools

完了後、firebase-toolsをインストールしますので、上記のコマンドを入力し、Enterキーを押します。

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\firebase -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js

> re2@1.15.8 install C:\Users\Administrator\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\re2
> install-from-cache –artifact build/Release/re2.node –host-var RE2_DOWNLOAD_MIRROR || npm run rebuild

Trying https://github.com/uhop/node-re2/releases/download/1.15.8/win32-x64-83.br …
Writing to build/Release/re2.node …
Done.

> protobufjs@6.10.1 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\protobufjs
> node scripts/postinstall

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\firebase-tools\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ firebase-tools@8.14.1
added 599 packages from 375 contributors in 45.243s

Enterキーを押すと、インストールが開始され、完了となります。

■Firebaseにログインする

C:\deploy>firebase login

完了後、上記のコマンドを入力し、Enterキーを押します。

■プロジェクトを初期化する

C:\deploy>firebase init

ログイン後、プロジェクトを初期化するために、上記のコマンドを入力し、Enterキーを押します。

Enterキーを押すと、「You’re about to initialize a Firebase project in this directory（このディレクトリでFirebaseプロジェクトを初期化しようとしています）」と書かれており、「C:\deploy」が指定されています。

そして、「Are you ready to proceed? (Y/n)（続行する準備はできていますか？ （Y / n））」と質問されていますので、「Y」と入力し、Enterキーを押します。

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm yo
ur choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) 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
( ) Emulators: Set up local emulators for Firebase features
( ) Remote Config: Get, deploy, and rollback configurations for Remote Config

Enterキーを押すと、「Which Firebase CLI features do you want to set up for this folder?（このフォルダにどのFirebaseCLI機能を設定しますか？）」と質問されますので、「Hosting: Configure and deploy Firebase Hosting sites（ホスティング：Firebaseホスティングサイトを構成してデプロイする）」に矢印キーで移動し、スペースキーで選択します。選択後、Enterキーを押します。

=== 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.

? Please select an option: (Use arrow keys)
> Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don’t set up a default project

Enterキーを押すと、「Project Setup（プロジェクトの設定）」と表示されます。このプロジェクトディレクトリ（C:\deploy）をFirebaseプロジェクトに関連付けを行います。「 Please select an option: (Use arrow keys)（オプションを選択してください:(矢印キーを使用））」と書かれていますので、Firebaseプロジェクトは既に作成済みなので、「Use an existing project（既存のプロジェクトを使用する）」に矢印キーを移動し、Enterキーを押します。

? Select a default Firebase project for this directory: (Use arrow keys)
> test-23325 (test)

Enterキーを押すと、「Select a default Firebase project for this directory: (Use arrow keys)（このディレクトリのデフォルトのFirebaseプロジェクトを選択します:(矢印キーを使用））」と表示されますので、作成したFirebaseのプロジェクト「test」を選択し、Enterキーを押します。

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.

? What do you want to use as your public directory? (public)

Enterキーを押すと、「Hosting Setup（ホスティング設定）」が表示されます。（プロジェクトディレクトリに対して）パブリックディレクトリとして何を使用しますか？と質問されますが、Enterキーを押します。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Enterキーを押すと、「シングルページアプリとして構成しますか（すべてのURLを/index.htmlに書き換えます）？（Configure as a single-page app (rewrite all urls to /index.html)? (y/N)）」と質問されますので、書き換えは行わないので、「N」と入力し、Enterキーを押します。

Set up automatic builds and deploys with GitHub? (y/N)

Enterキーを押すと、「Set up automatic builds and deploys with GitHub? (y/N)（GitHubで自動ビルドとデプロイを設定しますか？ （y / N））」と質問されますので、GitHubで自動ビルドとデプロイを設定しないので、「N」と入力し、Enterキーを押します。

Wrote public/404.html

Enterキーを押すと、「C:\deploy」の「public」フォルダに404.htmlが追加されます。

File public/index.html already exists. Overwrite? (y/N)

追加後、「ファイル「public / index.html」はすでに存在します。上書きしますか？ （y / N）（File public/index.html already exists. Overwrite? (y/N)）」と質問されますので、上書きはしないので、「N」と入力し、Enterキーを押します。

i Skipping write of public/index.html

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

+ Firebase initialization complete!

Enterキーを押すと、「Firebase initialization complete!（Firebaseの初期化が完了しました！）」と表示されますので、これで初期化は完了となります。

■HTMLファイルをデプロイする

完了後、コマンドプロンプトは開いたままで、Webブラウザを起動させて、Firebaseの先程作ったプロジェクト「test」のページを表示させます。表示後、上記「コード」のボタンがありますので、こちらをクリックします。

クリックすると、「ウェブアプリに Firebase を追加」と表示されます。アプリ（HTMLファイル）の登録を行いますので、「アプリのニックネーム」の入力欄にニックネームを入力します。今回は「テスト公開」とします。入力後、「アプリを登録」ボタンをクリックします。「このアプリの Firebase Hosting も設定します。」のチェックボックスは外したままにしておきます。

クリックすると、「Firebase SDK の追加」という項目が表示されますので、スクリプトが表示されていますので、このスクリプトをコピーし、「C:\deploy\public」に置かれているindex.htmlをコード・エディター（今回はVisual Studio Code）で開きます。

開いた後に、コピーしたスクリプトを<body> タグの下部に貼り付けます。貼り付け後、保存します。

保存後、コマンドプロンプトに戻ります。

C:\deploy>firebase deploy

戻った後に、上記のコマンドを入力し、Enterキーを押します。

=== Deploying to ‘test’…

i deploying hosting
i hosting[test]: beginning deploy…
i hosting[test]: found 2 files in public
+ hosting[test]: file upload complete
i hosting[test]: finalizing version…
+ hosting[test]: version finalized
i hosting[test]: releasing new version…
+ hosting[test]: release complete

+ Deploy complete!

Project Console: https://console.firebase.google.com/project/test/overview
Hosting URL: https://test.web.app

Enterキーを押すと、「Deploy complete!」と表示されますので、これが表示されればデプロイは完了となります。

完了後、「Hosting URL:」が表示されていますので、URLをコピーし、Webブラウザで開きます。

開くとサイトが公開されていることが確認できました。

スポンサーリンク

コメント

タイトルとURLをコピーしました