How to deploy a finished nuxt.js app to a webserver? How to deploy a finished nuxt.js app to a webserver? vue.js vue.js

How to deploy a finished nuxt.js app to a webserver?


The simplest way - you need to generate all the content:

  1. Run npm run generate.
  2. 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:

  1. Change mode in nuxt.config.js to spa.
  2. Run npm run build.
  3. 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;    }}
  1. It can be run also locally, so can be accessed by localhost in a browser (at least on Linux).
  2. This is extraction from a project, so something can be simplified/removed according to your needs.
  3. In case of error Exit status 139 in the terminal (once docker-compose launched) remove node_modules folder and install it again.