Vue.js(3系)でアプリをfirebaseで公開する

Node.jsのダウンロード

バージョン確認

node --version

ダウンロード

https://nodejs.org/en/

FireBaseのユーザ登録

https://firebase.google.com/?hl=ja

Vue CLIのインストール

ダウンロード

npm install -g @vue/cli

バージョン確認

vue --version

Vueプロジェクト作成

サイト名を決めてプロジェクト作成

vue create サイト名

Manually select featuresを選択

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

BabelとLinter選択されているのでそのまま

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Vue3系を使用するので3.xを選択

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

ESLint with error prevention onlyを選択

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
保存時にLint実行

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit


In dedicated config filesを選択

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

nを選択

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)


プロジェクト作成成功

🎉  Successfully created project サイト名.
👉  Get started with the following commands:

 $ cd shift-magic
 $ npm run serve

プロジェクトに移動して実行してみる

npm run serve

Firebaseプロジェクト作成

コンソールからプロジェクト追加→流れに身を任せて作成

作成できたらプロジェクトに移動して、ウェブアイコンを押す。（ウェブアプリに Firebase を追加）

アプリのニックネーム決めて(なんでもいい)このアプリの Firebase Hosting も設定しますをチェック入れて登録

コマンドプロンプトで以下を実行

npm install firebase

SDK情報をメモっておき、以下実行

npm install -g firebase-tools

次へをクリック

firebase init

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys選択

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to
confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default
instance
>(*) Firestore: Configure security rules and indexes files for Firestore
 ( ) Functions: Configure a Cloud Functions directory and its files
 ( ) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Hosting: Set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
(Move up and down to reveal more choices)

さっきプロジェクトつくったのでUse an existing project

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

プロジェクト選択

? Select a default Firebase project for this directory:
  xxxxxxxxxxxxxxxxxx
  yyyyyyyyyyyyyy
> xxxxxxxxxxxxxxx

publicフォルダでデプロイなのでそのままエンター

=== 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)? (y/N)

Nにする

? Set up automatic builds and deploys with GitHub? (y/N)

Nにする

? File public/index.html already exists. Overwrite? (y/N) n

Firebaseの初期化が終わる

+  Firebase initialization complete!

ブラウザのfirebaseでコンソールに戻るををクリック

ビルドする

npm run build

distフォルダに吐き出されるのでfirebaseのホスティング先をdistに変更

firebase.jsonファイル

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

ホスティングする

firebase deploy --only hosting

+  Deploy complete!

Project Console: xxxxxxxxxxxxxxx
Hosting URL: xxxxxxxxxxxxxxx

Hosting URLにアクセスしてみる

表示されれば完了！