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