vue Firebase hosting で Vue(Nuxt)を動作させる

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます

Nuxtのbuildしたソースは publicに吐き出すようにする


nuxt.config.js
generate: {
    dir: 'public'
  }


$ npm run generate

※ firebase cliをダウンロードしている前提

firebaseの初期化(すでにプロジェクトは作成済み)
$ firebase init                                                             

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

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

  /Users/xxxxx/hogehoge-project

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Host
ing: 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.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: project-name-a1d8f (project-name)
i  Using project prod-name (project-name)

=== 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)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  Wrote public/index.html

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

✔  Firebase initialization complete!

firebase hostingにdeploy
$ firebase deploy
=== Deploying to 'project-name-a1d8f'...

i  deploying hosting
i  hosting[project-name-a1d8f]: beginning deploy...
i  hosting[project-name-a1d8f]: found 2 files in public
✔  hosting[project-name-a1d8f]: file upload complete
i  hosting[project-name-a1d8f]: finalizing version...
✔  hosting[project-name-a1d8f]: version finalized
i  hosting[project-name-a1d8f]: releasing new version...
✔  hosting[project-name-a1d8f]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-name-a1d8f/overview
Hosting URL: https://project-name-a1d8f.web.app

deploy完了

[参考]
https://deha.co.jp/magazine/nuxt-js/
Back