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

Question

At work, I got some little insight to nuxtjs development and I got very interested in it. So, I started developing on my own a little bit, but now, I'm stuck with my finished project.

To develop, I spin up a local server with "npm run dev" in my CLI. This all works fine.

But, how do I deploy my now finished project to run it in something like nginx (or are there better alternatives that run on an Windows Server environment) on my home server? I heard about "npm run build" into my CLI, but how is the procedure beyond that? And is that command even the right method?

I'm absolutely a noob in this department. Could anybody teach me step by step what I have to do to go "in production"?

Thank's very much in advance!

Max

Of course, "npm run dev" isn't a viable option for production. It's only accessable from the machine the server is running on.

Answer 1

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-

Answer 2

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.

Answer 3

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 -d

version: '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.

Answer 4

I have written a detailed article how to test and deploy Nuxt applications on server. You can read it here: https://medium.com/js-dojo/how-to-deploy-nuxt-application-to-server-production-mode-on-db67633421fd?source=friends_link&sk=32e2893ad759748e88cdaf7ecbf0b250