🍭

Vue.js& Firebase でサクッとデプロイしてみる

2022/11/13に公開4

約8分ほどで完了するためおすすめです。では早速手順をご紹介していきます。
※Vue CLIなどはインストールしている前提で勧めます。
動画でもご紹介してます。よろしければどうぞ。
https://youtu.be/Cblsqsl1qWE

Firebaseでプロジェクト作成

適当な名前でプロジェクトを作成します。

少し待ち時間が発生しますが、完了すると下記の表示となります。

Vue.jsでプロジェクト作成〜ビルドまで

下記コマンドを打っていきます。
※test-firebase はアプリ名

vue create test-firebase
cd test-firebase
npm run serve

上記表示が確認できれば無事プロジェクトは作成できています。後ほど使用するために下記コマンドも実行しておきましょう。distフォルダが作られればOKです。

npm run build

Vue.jsとFirebaseを紐付ける

firebaseに戻り画像のボタンを押下します。するとアプリ名の入力を求められるのでVue.jsでつけたアプリ名を入力しておきましょう。

すると下記のConfig情報が表示されます。firebaseの設定を行うためにコマンドを打っていきましょう。

npm install firebase

インストール後にmain.jsにconfig情報を入力しておきます。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXX"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

firebaseで次へを押下すると更にコマンド入力を求められるので一気に打ってしまいましょう。

npm install -g firebase-tools
firebase login
firebase init hosting
// ここでいくつか質問されます.
// please select an option には Use an existing projectを選択
// what do you want to use as your public directory? には distを選択
// それ以外は基本的にエンターで構いません。
firebase deploy

上記コマンド完了後、Hosting URLに表示されたURLに飛んで確認してあげると無事デプロイできています。

Discussion

稲凪 咲稲凪 咲

こんばんは、こちらの記事を参考にセットアップして無事デプロイまで出来たのですが、F12開発者メニューからmain.jsを見るとAPIキーなどがそのまま見えてしまっているように思います。
私の知識不足でしたら申し訳ありません。

r9uk0r9uk0

コメントありがとうございます。
誤解のある表記をしてしまいすみません。念の為隠してはおりますが、このApi Keyなどはどのプロジェクトを利用するかを示すもののため、公開されていても問題ない認識です。
もしご不安でしたら、ルールによって書き込みや読み取りの制限を行うのが望ましいかと思います。

{
 "rules": {
   "users": {
     "$uid": {
       ".read": "$uid === auth.uid",
       ".write": "$uid === auth.uid"
     }
   }
 }
}
稲凪 咲稲凪 咲

返信ありがとうございます!
なるほど...公開しても大丈夫なのですね、丁寧な説明本当にありがとうございます!

r9uk0r9uk0

とんでもございません。
こちらこそ、配慮の至らない点をご指摘いただきありがとうございました。