CODEWITHSUNDEEP
dockernginxvue.js
mzbhura
mzbhura

Reputation: 393

Nginx try_files not working for my Vue app

I currently have a Docker container using Nginx to serve up my Vue application. The configuration that I am using is as follows:

worker_processes 5;  ## Default: 1
error_log /usr/share/nginx/nginx_logs/error.log;
pid /usr/share/nginx/nginx_logs/nginx.pid;
worker_rlimit_nofile 8192;

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  include /usr/share/nginx/conf/mime.types;
  include /usr/share/nginx/proxy.conf;
  index index.html index.htm;

  default_type application/octet-stream;
  log_format main '$remote_addr - $remote_user [$time_local]  $status '
    '"$request" $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log /usr/share/nginx/nginx_logs/access.log main;
  sendfile on;
  tcp_nopush on;
  server_names_hash_bucket_size 128;

  server {
    listen 80;
    server_name spshub.org www.spshub.org;
    root /usr/share/nginx/html;
    access_log /usr/share/nginx/nginx_logs/spshub.access.log main;

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

I thought by including the try_files it would redirect back to the index.html on refresh, but all I am getting is the 404 error message. I am using a Vue Router with the history mode turned on and my base url set to '/'. When it hits the '/', it will redirect to '/home'. The the navigation works normally, but the refresh is when it errors. If I look at my logs, it is trying to look for 'home' in the root directory. Is there a way to fix this?

This is from the logs:

2019/05/28 19:39:07 [error] 6#6: *15 open() "/usr/share/nginx/html/home" failed (2: No such file or directory), client: <client-ip>, server: localhost, request: "GET /home HTTP/1.1", host: "<public-host-ip>"
<client-ip> - - [28/May/2019:19:39:07 +0000] "GET /home HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" "-"
2019/05/28 19:39:08 [error] 6#6: *15 open() "/usr/share/nginx/html/favicon.ico" failed (2: No such file or directory), client: <client-ip>, server: localhost, request: "GET /favicon.ico HTTP/1.1", host: "<public-host-ip>", referrer: "http://<public-host-ip>/home"
<client-ip> - - [28/May/2019:19:39:08 +0000] "GET /favicon.ico HTTP/1.1" 404 555 "http://<public-host-ip>/home" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" "-"

My Dockerfile is as follows:

FROM node:lts-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build:prod

# Production deployment
FROM nginx:stable-alpine as production
COPY --from=build /app/dist /usr/share/nginx/html
COPY /nginx /usr/share/nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

The dist folder which gets copied into the nginx/html folder looks like this:

dist\main.243ea19f.js.map
dist\main.243ea19f.js
dist\main.2bb2bbfa.css.map
dist\main.2bb2bbfa.css
dist\index.html
dist\assets\images\

Upvotes: 2

Views: 4332

Answers (1)

Shawn C.
Shawn C.

Reputation: 6841

From the looks of it, as stated in the comments. You need to change

COPY /nginx /usr/share/nginx

TO

COPY /nginx /etc/nginx/

This assumes that in your /nginx directory you have a nginx.config file.

Upvotes: 2

Related Questions