NGINX 404 when accessing a specific page (Azure App Service)

user_670488 0
Viewed 1082

I'm facing a 404 error when accessing a specific route from my webapp.

Here is my Dockerfile:

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

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

And here is my 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;
    }
  }
}

The application is accessible and route navigation works fine.

However, when I try to access directly a certain page ... say for example https://example.org/privacy... it returns a 404.

I've been playing around with the configuration but without any success. Could you let me know what is wrong?

PS: I'm using vue routing in history mode.

vuejs2 azure-web-app-service vue.js nginx
3 Answers

I have used this approach to deploy Vue.js at Azure, GitHub repository.

NGINX Config:

server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

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

Please use this Dockerfile.

##### 01- Build app
FROM node:lts-alpine as node
LABEL author="Waqas Dilawar"
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

##### 02- Run NGINX using build from step 01
FROM nginx:alpine
VOLUME /var/cache/nginx
COPY --from=node /app/dist /usr/share/nginx/html
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf

# docker build -t nginx-vue .
# docker run -p 8080:80 nginx-vue
user_63320740

Can you try with proxy_pass in location?

server {
  server_name myhost.com;
  listen [::]:443 ssl http2;
  listen 443 ssl http2;

  # Nginx Proxy
  location / {
    proxy_pass http://0.0.0.0:8080; #  port of your vue app 
  }
}

server {
  listen 80;
  listen [::]:80;
  server_name myhost.com;
  return 301 https://www.myhost.com$request_uri;
}
user_54082740

This should work:

server {
    listen       80;
    server_name  localhost;
    root   /app;
    index  index.html;
    location / { 
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

There is more information in the docs here and here.

user_22167030
Related