どうも、シローです。
今回は、Firebaseでプロジェクトを作ってホスティングをする方法を紹介します。
動作環境
| OS | MacOS (10.13.6) |
| npm --version | 6.11.3 |
| node --version | 10.14.1 |
Firebaseとは
FirebaseはmBaaS(mobile backend as a Service)と呼ばれ、アプリやWebサイトのバックエンド処理に関する機能をクラウドで提供しているサービスです。
バックエンド処理だけではなく、Webサイトのホスティング（HTMLやCSSをサーバーに置いて、実際にアクセスできるようにする一連の仕事）もやってくれます。
1.Firebaseプロジェクトを作成
Firebaseコンソールにアクセスして(https://console.firebase.google.com/?hl=ja)「プロジェクトを作成」をクリックします。
あとは道なりに進んでいけば作成できます。
2.Firebaseコマンドをインストール
npmを使ってFirebaseコマンドをインストールします。
|
1 |
$ npm install -g firebase-tools |
3.Firebaseコマンドでプロジェクトをホスティングする
まずは適当なディレクトリを作成します。
|
1 |
$ mkdir sample-project |
そのディレクトリに入って、以下のコマンドを実行
|
1 2 3 4 |
// firebaseにログイン $ firebase login // firebaseプロジェクトをローカルに作成 $ firebase init |
Firebaseのどの機能を使うかを問われるので、「Hosting」を選択（spaceボタン)します。
|
1 2 3 4 5 6 7 |
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to con firm 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 |
その後、1で作成したプロジェクトを選択して道なりに進むと完了です。
4.デプロイしてアクセスしてみる
以下のコマンドでFirebaseプロジェクトをデプロイします。
|
1 |
$ firebase deploy |
「Hosting URL: https://xxxxxxxxxxxxxx.firebaseapp.com」と出ると思うので、それにアクセスしてみます。
↑のような画面がでたら完成です。
 npm --version 6.11.3 no){kind=link}