概要
firebaseとVueでWebページを作成した記録です。
環境
macOS Mojave
バージョン 10.14.6
MacBook Air (13-inch, 2017)
準備
インストール
npm 6.10.3
Vue CLI 3.10.0
firebase CLI 7.2.2
ブラウザのfirebaseコンソールで、プロジェクトを作成しておきます。
ターミナルからfirebaseにログインしておきます。
firebase login
プロジェクト作成
vueプロジェクト作成
cd ~
vue create kotaro-dev
プロジェクト設定の質問に対しては、defaultを選択しました。
? Please pick a preset:
❯ default (babel, eslint)
gitのログを見ると、この時点で一度コミットされていました。
git log
firebaseの初期化
firebaseを初期化します。
firebase init
セットアップするプロジェクトの種類を指定します。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features,
then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert select
ion)
❯◯ 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
◯ Hosting: Configure and deploy Firebase Hosting sites
をスペースキーで選択し、Enterで決定します。
firebaseのプロジェクトを選択します。
私はfirebaseコンソールから作成済みだったプロジェクトを選択しました。
? Select a default Firebase project for this directory:
公開ディレクトリ名を指定します。
firebaseのデフォルトは public ですが、
Vue CLIと合わせるために dist を入力します。
? What do you want to use as your public directory? dist
single-page app、つまりSPAを設定するかを指定します。
今回はインストールしていませんが、Vue CLIの場合Vue RouterでSPAにすると思いますので、
y を入力します。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
これでfirebaseの初期化が完了します。firebaseによる追加ファイルをコミットしておきます。
git add .
git commit -m "firebase init"
Webページ作成
簡単に作成しました。詳細はGitHubをご参照ください。
https://github.com/chanchanrk/kotaro.dev/commit/3976ceb2fc29726aa26778c537da0e954557520f
動作確認
vueで確認
npm run serve
App running at:
- Local: http://localhost:26397/
- Network: http://192.168.1.18:26397/
このようにターミナルに表示されます。このURLをブラウザに貼り付けして確認します。
なお、npm run serveで実際に実行されるコマンドは package.json の "scripts" の箇所に書かれています。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
firebaseで確認
Vue CLIプロジェクトをビルドします。
npm run build
ローカルのfirebaseサーバーを起動します。
firebase serve
i hosting: Serving hosting files from: dist
✔ hosting: Local server: http://localhost:5000
このように出力されます。ブラウザで http://localhost:5000 を表示し確認します。
デプロイ
firebase deploy
firebase上のドメインを確認します。
インターネットに公開されていることが確認できました。