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.

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

Solution 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.

Solution 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.

Solution 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

View more solutions

Comments

[A. L]

after running npm run build, you should have production files in the dist folder, just upload the contents and it should be fine (given that they're static files).

[Max Croon]

I used npm run generate and did all your steps. It worked fine!

[Paul-Sebastian]

@A.L Nuxt builds a statically deployable version of the application (ie. a Node server is not needed, all routes are generated as static HTML files) with nuxt generate (or nuxt-ts generate) and builds the output in the build folder. For SSR + Client apps (ie. a Node server is needed to run the application), Nuxt creates a .nuxt folder after calling nuxt build (or nuxt-ts build), which can be deployed as a Node.js application.

[Max Croon]

Thanks for helping me out! In my case, I simply used npm run generate and put all that stuff into my htdocs folder.

[Paul-Sebastian]

@AbingPj yes. But one thing this question and this answer don't cover, is the question "Is the app server side rendered or just a static app?", so the answer is incomplete at best.

[Paul-Sebastian]

This is a complicated answer not really suited for the question. Before going through the effort, I supposed it would have been best to ask the OP what exactly he wants to do, because it is not clear: deploy a static or a universal Nuxt app?

[Paul-Sebastian]

@MaxCroon Better then you take the effort to update your question, because I don't see this information in the question and it's causing some confusion.

[AbingPj]

@Paul-SebastianManole , I have nuxt app but not SSR. can i deploy it using,. "npm run build & start",????... I already deploy static app in the apache server. But Icannt dynamic routes,. So, i want it to change using "npm run build & start" deployment

[Paul-Sebastian]

@AbingPj SSR as the name implies needs a Node.js server. You cannot deploy a dynamic Nuxt app to Apache as static content. Please learn the basics first or you'll become frustrated if you try to do things that won't work because they simply cannot work as you expect them to.

[evg_ny]

BTW, It's necessary to expose port from nuxt-node dockerfile and also HOST environment variable should be set (0.0.0.0 works for me)