Step1. firebase にログインしProjectを作る
注: Google Accountがなければ作ってください。
Step2. ターミナル(コマンド)から Firebaseにアクセスできるようにfirebase-toolsをセットアップ
npm install -g firebase-tools
注: npm
は事前にインストールしておいてください。
Step3. ターミナルから firebase-tools のコマンドで Firebaseにログインする。
firebase login
をするとブラウザでOAuth認証画面が開きますので、
ボタンを押せばログイン完了です。
Step4. プロジェクトの初期化とデプロイ
(1). 初期化
ローカルのプロジェクトディレクトリに入り、
下記のコマンドでそのプロジェクトを初期化します。
firebase init
(2). Project種類選択
Projectの種類の選択が聞かれます。
今回は Hosting を選択します。
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features,
then Enter to confirm your choices. (Press <space> to select)
❯◯ 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
(3). Deploy先を選択
さっき作ったプロジェクトを選択します。
Select a default Firebase project for this directory:
❯ test(project-00000)
[create a new project]
(4). Deploy設定を行なう
#説明: Deployされるフォルダを設定(Defaultでは **public** です。異なる場合はフォルダ名を入力)
? What do you want to use as your public directory? dist
#説明: Webサイトの入り口ファイル( **index.html** )を自動生成するか既存のファイルを利用するかを選択します。
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
(5). Deployする
$ firebase deploy
Deploy終了後 Hosting URL が表示されますので、
それにアクセスして確認してください。
=== Deploying to 'test-0000'...
i deploying hosting
i hosting: preparing dist directory for upload...
✔ hosting: 45 files uploaded successfully
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/test-0000/overview
Hosting URL: https://test-0000.firebaseapp.com