How to deploy a finished nuxt.js app to a webserver?
The simplest way - you need to generate all the content:
- Run
npm run generate
. - Go to the
dist
subfolder of your project and copy all from there to some public hosting, like GitHub Pages.
Though if you have some content depended from the user, you need to deploy it as a SPA:
- Change
mode
innuxt.config.js
tospa
. - Run
npm run build
. - Deploy the created
dist/
folder to your static hostings like Surge, GitHub Pages or nginx.
More details:
https://nuxtjs.org/guide/commands#static-generated-deployment-pre-rendered-
https://nuxtjs.org/faq/github-pages#how-to-deploy-on-github-pages-
There is no one answer to this question and the main variables are, are you deploying a static app, or a universal (ssr) app and where do you want to host it.
Static apps are pretty straight forward as suggested in the comments and other answer, but chances are you've got a SSR app and need to deploy that.
The docs have details on deploying to a range of hosting providers as well as a bit about using nginx.
There is a tutorial to deploy to digital ocean.
Some hosting providers are easier than others, and really the ones that provide a CLI to deploy from are usually easier. Therefore Heroku is a good choice as are Now and Netlify, but the later two are only for static apps. The docs say that "AWS is a death by 1000 paper cuts", so I guess that's not easy.
So you should check out your hosting options and choose one, try and follow the nuxt docs to deploy and if you get stuck, ask another question here with specifics.
Here I will show how Nuxt can be run in production behind Docker based on nginx. This is for universal mode (server-side rendering + client-side navigation, ie not a Static Site generated by nuxt generate
command)
The structure
|- nuxt # (this is project folder)| |- dockerfiles| |- nginx| |- prod| |- conf.d| |- nginx.conf| |- docker-compose-wo-le.yml| |- nginx.tmpl # (must be downloaded, read top comments in docker-compose-wo-le.yml)|- src| |- .nuxt| |- folders and files here| |- assets| |- components| |- .......| |- node_modules| |- .......| |- nuxt.config.js| |- package.json| |- package-lock.json
Below are the necessary configs.
docker-compose-wo-le.yml
# HOW TO USE:# 1. Download latest nginx.tmpl (save next to this docker-compose file):# curl https://raw.githubusercontent.com/jwilder/nginx-proxy/master/nginx.tmpl > ./nginx.tmpl# 2. Run docker-compose: docker-compose -f ./docker-compose-wo-le.yml up -dversion: '3.5'services: nuxt-nginx: restart: always image: nginx container_name: nuxt-nginx-container volumes: - /etc/localtime:/etc/localtime:ro - ./nginx/prod/conf.d:/etc/nginx/conf.d ports: - '80:80' nuxt-node: image: node:10.23 container_name: nuxt-node-container command: npm run start volumes: - ../src:/usr/src/app working_dir: /usr/src/app environment: HOST: 0.0.0.0
nginx.conf
map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off;}proxy_cache_path /tmp/nuxt levels=1:2 keys_zone=nuxt_cache:10m max_size=100m inactive=30m use_temp_path=off;proxy_cache_key "$scheme$request_method$host$request_uri";proxy_cache_use_stale updating error timeout http_500 http_502 http_503 http_504;proxy_cache_background_update on;proxy_cache_valid 200 302 20m;server { listen 80 default_server; server_name localhost; charset utf-8; keepalive_timeout 5; gzip on; gzip_comp_level 5; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; gzip_proxied no-cache no-store private expired auth; gzip_min_length 1000; location / { expires $expires; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_read_timeout 1m; proxy_connect_timeout 1m; proxy_pass http://nuxt-node:3000; # Required for caching proxy_ignore_headers Expires Cache-Control; proxy_cache_revalidate on; proxy_cache_lock on; proxy_cache nuxt_cache; }}
- It can be run also locally, so can be accessed by
localhost
in a browser (at least on Linux). - This is extraction from a project, so something can be simplified/removed according to your needs.
- In case of
error Exit status 139
in the terminal (once docker-compose launched) removenode_modules
folder and install it again.