【Vue.js】Firebase Hostingを使ったデプロイまでの流れ【Nuxt.js】

5236 ワード
Firebase FirebaseHosting Vue.js nuxt.js デプロイ Vue.js テキストリンク

事前準備

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でアプリが閉じます。