LoginSignup
2
9

More than 5 years have passed since last update.

[Google FireBase] FirebaseでWebサイトを無料で公開する手順

Posted at

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
2
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
9