2

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\
3
  • 1
    What is your docker config? Commented May 28, 2019 at 20:42
  • @ShawnC. I've added it in now Commented May 28, 2019 at 21:06
  • i dont see you are applying the nginx.conf inside your container, the path for the config is /etc/nginx/nginx.conf Commented May 29, 2019 at 9:59

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Could you provide some insights why it needs to be copied over to /etc/nginx/ ?
By default nginx looks for its configuration files in /etc/nginx. The original poster was putting the configuration files into /usr/share/nginx/ which is the default home for html files for nginx so it was not loading the configuration files correctly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.