事前準備
Vue.js、Nuxt.jsアプリケーションのデプロイを想定しています。
・firebaseプロジェクト
・Googleアカウント
・node、npm環境
・Vue.jsまたはNuxt.jsアプリケーション
Firebase-CLIのインストール
Firebaseを操作するためにFirebase-CLIをインストールします。
ターミナル
$ npm install -g firebase-tools
バージョンが表示されればインストール完了です。
ターミナル
$ firebase --version
8.16.2
Googleアカウントと紐付け
ターミナル
$ firebase login
ターミナル
Allow Firebase to collect CLI usage and error reporting information? (Y/n)
Yと入力しEnter
ブラウザが立ち上がる
自身のGoogleアカウントを選択しましょう
許可を選択
この画面が表示されれば完了です
Firebaseプロジェクトの初期化
Hostingの設定を行います。
アプリケーション配下で以下のコマンドを実行。
ターミナル
アプリ名$ firebase init
Hostingを選択しEnter
Use an existing projectを選択し、自身のFirebaseプロジェクトを選択してください。
ターミナル
=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? (y/N) No
以下の順に入力
・dist
・y (SPAの場合)
・N
この様な表示になればOKです。
アプリケーションに以下のファイルが作成されています。
・.firebaserc
・firebase.json
アプリケーションのビルド
アプリケーション配下で以下のコマンドを実行。
ターミナル
アプリ名$ npm run build
これによりdestディレクトリ配下にコンパイルされたファイルが作成されます。
デプロイ
ターミナル
アプリ名$ firebase deploy
Deploy complete!と表示されればOKです。
Hosting URLにアクセスするとアプリが公開されています。
ターミナル
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/********
Hosting URL: https://***************.web.app
デプロイの停止
ターミナル
アプリ名$ firebase hosting:disable
ターミナル
? Are you sure you want to disable Firebase Hosting for the site deploy-test-6110f
This will immediately make your site inaccessible! (Y/n) Y
Yでアプリが閉じます。