Vue + Nuxt + FirebaseでSPA(その1)

環境構築

• 1 firebaseでプロジェクト追加
• 2 vue+nuxtのセッティング

https://firebase.google.com から初めます
右上の Go to console をクリックします。

• 新規プロジェクトを作成
• プロジェクト名・国名を入力

プロジェクトをローカルで起動

npm install -g firebase-tools

firebase login

login後projectを作成

https://console.firebase.google.com/ で「新規プロジェクトを作成」をクリックしてプロジェクト作成

firebase init

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########



You're about to initialize a Firebase project in this directory:

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting
sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== 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? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

firebase serve

http://localhost:5000/ にアクセスすると、このようなwebページが開かれているはずです。

firebaseのコードを貼り付け

public/index.html のとの間に貼り付けましょう

firebase deploy

$ firebase deploy

=== Deploying to 'storyproject-4e200'...

i  deploying hosting
i  hosting[storyproject-4e200]: beginning deploy...
i  hosting[storyproject-4e200]: found 10 files in public
✔  hosting[storyproject-4e200]: file upload complete
i  hosting[storyproject-4e200]: finalizing version...
✔  hosting[storyproject-4e200]: version finalized
i  hosting[storyproject-4e200]: releasing new version...
✔  hosting[storyproject-4e200]: release complete

✔  Deploy complete!

Hosting URL: https://storyproject-4e200.firebaseapp.com

画面には、deployしました。が表示されるようになります。

続きはまた記載いたします。