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

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


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 appFROM node:lts-alpine as nodeLABEL author="Waqas Dilawar"WORKDIR /appCOPY package*.json ./RUN npm installCOPY . .RUN npm run build##### 02- Run NGINX using build from step 01FROM nginx:alpineVOLUME /var/cache/nginxCOPY --from=node /app/dist /usr/share/nginx/htmlCOPY ./config/nginx.conf /etc/nginx/conf.d/default.conf# docker build -t nginx-vue .# docker run -p 8080:80 nginx-vue


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;}


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.