35

I want to build a single page application with Vue.js using Nginx as my webserver and a my own Dropwiward REST API. Moreover I use Axios to call my REST request.

My nginx config looks like 

server {
    listen       80;
    server_name  localhost;

    location / {
        root     path/to/vue.js/Project;
        index    index.html index.htm;
        include  /etc/nginx/mime.types;
    }
    location /api/ {
        rewrite ^/api^/ /$1 break;
        proxy_pass http://localhost:8080/;
    }
}

Currently I can just call my localhost/api/path/to/rescource to get the the information from the backend.

I build the Front end with HTML and javascript(vue.js) which has worked so far. However when I want to build a single page application most tutorials mention node.js. How can I use Nginx instead?

Improve this question
3
  • 2
    You need to use vuerouter if you want to create single page apps with Nginx. On the server side (nginx) does not need many configurations. Just point your root to your index file Commented Dec 5, 2017 at 14:33
  • 2
    @samayo OP will need a catch-all route if using vue-router, though, so that users accessing foo/bar/whatever won't get a 404. Commented Dec 5, 2017 at 14:47
  • 1
    Ah, good catch. Maybe try_files $uri $uri/ /$query_string; ?? I'm not sure though Commented Dec 5, 2017 at 14:52

4 Answers 4

Reset to default
65

Add the following code to your Nginx Config, as detailed in the VueRouter docs, here:

location / {
  try_files $uri $uri/ /index.html;
}

Also, you need to enable history mode on VueRouter:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks for the tip I think it also mentioned on Github gist here. However is this to good way to go or is there also a way to use the vue-cli webpack with nginx instead?
This answer is mainly for Vue CLI webpack one but does work with your config if you're using Vue router.
If you're not using Vue router, just use the standard nginx config for html.
thank you again. Do I understand you correctly. I develop with webpack and vue cli then I can run development webserver with npm run dev but then later can deploy it on nginx
@A.Dumas okay, try npm run build and then there file be a dist folder. copy the contents of the folder to the server.
|
1

I struggled with same problem. But I found how can I do. You just add this to your nginx.conf.

location / {
    root /home/admin/web/domain.com/public_html/;  #-> index.html location
    index index.html;
    include  /etc/nginx/mime.types;
    try_files $uri $uri/ /index.html;
}
Improve this answer

Comments

0

For those who used Vue CLI and are looking for the full documentation, I was able to locate the exact configuration inside the Vue CLI docs under deployment. Click the link to see how to build and run your app! Hope this helps!

Dockerfile:

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

.dockerignore

**/node_modules
**/dist

nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}
Improve this answer

1 Comment

Not using Vue CLI, but this line with the added slash before index.html: try_files $uri $uri/ /index.html; worked for me. It does not work without the slash, as proposed in the official documentation.
-1

This worked for me:

location /static/ {
    root /root/bdn/bdn/server/;
}

location /media/ {
    root /root/bdn/bdn/server/;
}

location ^~ /admin/ { # Define routes to be directed to backend as proxy
    proxy_set_header Host $http_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_pass http://unix:/run/gunicorn.sock;
}

location ^~ /api/ { # Define routes to be directed to backend as proxy
    proxy_set_header Host $http_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_pass http://unix:/run/gunicorn.sock;
}

location ^~ /api-auth/ {
    proxy_set_header Host $http_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_pass http://unix:/run/gunicorn.sock;
}

location ^~ /{
    root /root/bdn/bdn/server/templates/;
    index index.html;
}

error_page 404 /; # PARTICULARLY THIS ERROR REDIRECTION
Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.