LoginSignup
2
1

More than 3 years have passed since last update.

nuxt on firebase hosting

Posted at

NUXTJSでアプリを作ってFirebase Hostingにデプロイする

create nuxt-app

~/workspace ❯❯❯ yarn create nuxt-app nuxt-sandbox
yarn create v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.11.1" with binaries:
      - create-nuxt-app

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in nuxt-sandbox
? Project name nuxt-sandbox
? Project description My gnarly Nuxt.js project
? Author name hirose504
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)
yarn run v1.19.1
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 3.48s.

🎉  Successfully created project nuxt-sandbox

  To get started:

    cd nuxt-sandbox
    yarn dev

  To build & start for production:

    cd nuxt-sandbox
    yarn build
    yarn start

  To test:

    cd nuxt-sandbox
    yarn test

✨  Done in 93.80s.

firebase init

~/workspace ❯❯❯ cd nuxt-sandbox
~/w/nuxt-sandbox ❯❯❯ firebase init                                                                                                               ✘ 2

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

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

  /Users/khirose/workspace/nuxt-sandbox

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Conf
igure 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: nuxt-sandbox-2f8d1 (nuxt-sandbox)
i  Using project nuxt-sandbox-2f8d1 (nuxt-sandbox)

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

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

✔  Firebase initialization complete!

nuxt generate

~/w/nuxt-sandbox ❯❯❯ yarn generate
yarn run v1.19.1
$ nuxt generate
ℹ Production build                                                                                                                          18:52:55
✔ Builder initialized                                                                                                                       18:52:55
✔ Nuxt files generated                                                                                                                      18:52:55

✔ Client
  Compiled successfully in 24.14s

✔ Server
  Compiled successfully in 13.40s


Hash: 6e1a84982bc450810118
Version: webpack 4.41.2
Time: 24143ms
Built at: 2019/10/22 18:53:22
                         Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json   13.6 KiB          [emitted]
       0b658315de63248e12ce.js   24.7 KiB       2  [emitted] [immutable]         pages/index
       323bb4b831bf6a302dbf.js    4.3 KiB       6  [emitted] [immutable]
       4b718bd97a5e88177cbd.js    414 KiB       5  [emitted] [immutable]  [big]  vendors.app
       52258e76a48b54fdc8b1.js   2.35 KiB       4  [emitted] [immutable]         runtime
                      LICENSES  633 bytes          [emitted]
       a1efd49d5b8422178a61.js    169 KiB       1  [emitted] [immutable]         commons.app
       c93d0f95293e9045e70a.js  817 bytes       3  [emitted] [immutable]         pages/inspire
       d9f513475435b43278a7.js   41.3 KiB       0  [emitted] [immutable]         app
     icons/icon_120.5f6a36.png   4.68 KiB          [emitted]
     icons/icon_144.5f6a36.png    5.8 KiB          [emitted]
     icons/icon_152.5f6a36.png    6.1 KiB          [emitted]
     icons/icon_192.5f6a36.png   7.83 KiB          [emitted]
     icons/icon_384.5f6a36.png   18.1 KiB          [emitted]
     icons/icon_512.5f6a36.png     20 KiB          [emitted]
      icons/icon_64.5f6a36.png   2.35 KiB          [emitted]
        manifest.10425c23.json  777 bytes          [emitted]
 + 2 hidden assets
Entrypoint app = 52258e76a48b54fdc8b1.js a1efd49d5b8422178a61.js 4b718bd97a5e88177cbd.js d9f513475435b43278a7.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  4b718bd97a5e88177cbd.js (414 KiB)

Hash: e22d5b5d65dfd9243124
Version: webpack 4.41.2
Time: 13398ms
Built at: 2019/10/22 18:53:35
                  Asset       Size  Chunks                         Chunk Names
7a4ee41dd28023c8bc02.js  793 bytes       2  [emitted] [immutable]  pages/inspire
b63314f900e381aababf.js   23.4 KiB       1  [emitted] [immutable]  pages/index
              server.js    410 KiB       0  [emitted]              app
   server.manifest.json  239 bytes          [emitted]
 + 1 hidden asset
Entrypoint app = server.js server.js.map
ℹ Generating pages                                                                                                                          18:53:35
✔ Generated /inspire                                                                                                                        18:53:37
✔ Generated /                                                                                                                               18:53:37
✨  Done in 45.00s.

firebase deploy

~/w/nuxt-sandbox ❯❯❯ firebase deploy

=== Deploying to 'nuxt-sandbox-2f8d1'...

i  deploying hosting
i  hosting[nuxt-sandbox-2f8d1]: beginning deploy...
i  hosting[nuxt-sandbox-2f8d1]: found 24 files in dist
✔  hosting[nuxt-sandbox-2f8d1]: file upload complete
i  hosting[nuxt-sandbox-2f8d1]: finalizing version...
✔  hosting[nuxt-sandbox-2f8d1]: version finalized
i  hosting[nuxt-sandbox-2f8d1]: releasing new version...
✔  hosting[nuxt-sandbox-2f8d1]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/nuxt-sandbox-2f8d1/overview
Hosting URL: https://nuxt-sandbox-2f8d1.firebaseapp.com
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1