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