見出し画像
Photo by bremendesign

【自分用メモ】Vue.js、Vuetify、および Firebase を使用してアプリケーションの環境構築を行う手順(mac環境)

1610

手順

アプリを作りたいフォルダに移動する:
コマンドラインまたはターミナルを開き、アプリを作成したい場所に移動します。
例えば、デスクトップ上に新しいフォルダを作成し、そこに移動したい場合は、次のコマンドを使用します:

cd デスクトップ
mkdir my-app
cd my-app

上記のコマンドでは、最初にデスクトップに移動し、次にmy-appという名前のフォルダを作成し、最後にそのフォルダに移動しています。

Node.js のインストール:
Node.js を公式ウェブサイト (https://nodejs.org/) からダウンロードし、インストールします。

Vue CLI のインストール:
コマンドラインまたはターミナルで以下のコマンドを実行します:

npm install -g @vue/cli

Vue プロジェクトの作成:
コマンドラインまたはターミナルで、アプリケーションを作成したいディレクトリに移動し、以下のコマンドを実行します:

vue create my-app

インタラクティブなプロンプトが表示されます。以下のオプションを選択します:

  • Manually select features (手動でフィーチャを選択): Enter キーを押す

  • Choose Vue version (Vue のバージョンを選択): 2.x

  • Check the features needed for your project (プロジェクトに必要なフィーチャを選択):

  • Babel

  • Router

  • Vuex

  • Linter / Formatter

  • Pick a linter / formatter config (Linter / Formatter の設定を選択):

  • ESLint with error prevention only

  • Pick additional lint features (追加の Lint フィーチャを選択):

  • Lint on save

  • Where do you prefer placing config for Babel, ESLint, etc.? (Babel、ESLint などの設定をどこに置くかを選択):

  • In dedicated config files (個別の設定ファイルに置く)

  • Save this as a preset for future projects? (これを将来のプロジェクトのプリセットとして保存しますか？):

  • N (いいえ)

最後に、プロジェクトのセットアップに必要な依存関係のインストールが開始されます。

Vuetify の導入:
コマンドラインまたはターミナルで、Vue プロジェクトのディレクトリに移動し、以下のコマンドを実行します:

cd my-app
vue add vuetify

インタラクティブなプロンプトが表示され、以下のオプションを選択します:
Default (デフォルト)
Vuetify のセットアップとインストールが開始されます。

Firebase の設定:
Firebase コンソールにログインし、新しいプロジェクトを作成します。
プロジェクトのダッシュボードに移動し、「ウェブアプリにFirebaseを追加」をクリックします。
アプリのニックネームを入力し、Firebase Hosting を有効にします。
Firebase SDK の設定情報が表示されるので、それをメモします。

Vue アプリに Firebase を追加:
Vue プロジェクトのルートディレクトリで、Firebase を初期化するための設定ファイル .env を作成します。ファイルの内容は次のようになります:

VUE_APP_API_KEY=ここにFirebaseのAPIキーを入力
VUE_APP_AUTH_DOMAIN=ここにFirebaseのAuthドメインを入力
VUE_APP_PROJECT_ID=ここにFirebaseのプロジェクトIDを入力
VUE_APP_STORAGE_BUCKET=ここにFirebaseのストレージバケットを入力
VUE_APP_MESSAGING_SENDER_ID=ここにFirebaseのメッセージング送信者IDを入力
VUE_APP_APP_ID=ここにFirebaseのアプリIDを入力

上記の各行の ここに...を入力 の部分に、Firebase コンソールから取得した該当する値を入力します。
.env ファイルを保存します。

Firebase パッケージのインストール:
コマンドラインまたはターミナルで、Vue プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します:

npm install firebase

Firebase の初期化:
src/main.js ファイルを開き、以下のコードを追加します:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_APP_ID
};

firebase.initializeApp(firebaseConfig);

上記のコードは、Firebase SDK をインポートし、設定情報を使用して Firebase を初期化するものです。

Firebase の使用:
これで、Vue アプリ内で Firebase の機能を使用する準備が整いました。Firebase のドキュメントや Vue.js の公式ドキュメントを参考に、必要な Firebase の機能（Authentication、Firestore、Storage など）を実装していくことができます。

これで、Vue.js、Vuetify、および Firebase を導入した SPA アプリの環境構築が完了しました。必要に応じて、Firebase の各機能についてのドキュメントやチュートリアルを参照しながらアプリケーションを開発してください。

vuetifyを導入後に次のエラーメッセージが出る場合： error Component name "Home" should always be multi-word vue/multi-word-component-names

このエラーメッセージは、Vue.jsのベストプラクティスに基づいて、コンポーネント名が常に複数の単語で構成されるべきであるという警告です。"Home"という単語だけではなく、複数の単語を組み合わせてより具体的な名前を付けることを推奨しています。
エラーを解決するためには、コンポーネント名を変更して複数の単語を使用する必要があります。例えば、"Home"コンポーネントを"HomePage"や"HomeView"などのより具体的な名前に変更することができます。
コンポーネント名を変更する手順は以下の通りです。

  1. Vue プロジェクト内の "Home" コンポーネントのファイルを見つけます。通常、src/components ディレクトリ内に存在します。

  2. "Home" コンポーネントのファイルを開き、コンポーネントの定義を修正します。例えば、以下のように変更することができます。

npm run build

  1. コンポーネント名を変更したら、修正を保存し、アプリケーションを再ビルドします。

firebase deploy

これにより、コンポーネント名のエラーメッセージが解消され、Vue.jsのベストプラクティスに従ったコンポーネント名を使用することができます。

Firebase Hosting を有効にする方法

Firebase Hosting を有効にするためには、Firebase プロジェクト内で以下の手順を実行する必要があります。

  1. Firebase コンソールにアクセスします。URLは以下の通りです: https://console.firebase.google.com/

  2. Firebase コンソールで作成したプロジェクトを選択します。

  3. 左側のメニューから「Hosting」を選択します。

  4. 「始めましょう」というボタンをクリックします。

  5. Firebase Hosting のセットアップウィザードが表示されます。以下の手順に従って設定を行います。

    • a. プロジェクトのルートディレクトリを指定します。デフォルトでは、Vue プロジェクトのルートディレクトリが自動的に検出されるはずです。もし異なるディレクトリを使用したい場合は、適切なディレクトリを指定します。

    • b. シングルページアプリケーションの場合、すべてのリクエストをindex.htmlにリライトする設定を行います。この設定は Vue プロジェクトのデフォルトの動作に合致しています。

    • c. Firebase CLI のインストールがまだ行われていない場合は、指示に従って Firebase CLI をインストールします。CLI は Firebase Hosting のデプロイなど、さまざまな操作を行うために使用します。

    • d. Firebase Hosting のセットアップが完了すると、デプロイ用のコマンドが表示されます。例えば、firebase deployといったコマンドが表示されるはずです。このコマンドを実行することで、アプリケーションを Firebase Hosting にデプロイすることができます。

Firebase Hosting を有効にする手順は以上です。これにより、Vue.js アプリケーションを Firebase Hosting にデプロイし、公開することができます。

ビルド、デプロイ（公開）の手順（）

「npm run build」を使用して、開発中のソースコードを本番用に最適化し、最終的な成果物（バンドルされたJavaScriptファイル、CSSファイル、画像など）を生成します。
Firebase Hosting にアプリをデプロイする際には、事前にアプリをビルドしておく必要があります。ビルドによって生成された成果物がデプロイされ、公開されることになります。
以下に、手順を示します。

  1. ターミナルまたはコマンドラインを開きます。

  2. Vue プロジェクトのルートディレクトリに移動します。

  3. 以下のコマンドを実行してアプリをビルドします：

    • npm run build

  4. ビルドが正常に完了すると、Firebase Hosting にデプロイする準備が整います。

  5. Firebase CLI を使用して、以下のコマンドを実行します：

    • firebase deploy

  6. デプロイが完了すると、Firebase Hosting 上で公開されたアプリの URL が表示されます。 例: Hosting URL: https://your-app.firebaseapp.com

これらの手順を実行することで、Vue.js アプリケーションをビルドし、Firebase Hosting にデプロイして公開することができます。


この記事が気に入ったらサポートをしてみませんか？