404 nginx error on page reload with vuejs

Question

The issue I have is already asked here : How to use vue.js with Nginx? but trying the solutions didn't solve my problem.

So when I build my Dockerfile and go to localhost:8080 for example it works (reloading the page works too). When I navigate to a different page, let's say localhost:8080/add_app it shows the page the first time. But when I reload I'm getting an error:

Error in docker desktop:

This is mine Dockerfile:

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

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

This is mine nginx.conf file :

server {
    listen      80;
    server_name localhost;   
        
    location / {
        root /app/dist;
        index   index.html index.html;
        try_files $uri /index.html;
    }    
}

My project structure:

senadk · Accepted Answer · 2022-12-13 13:21:26Z

0

I solved the problem using following solution of maximkrouk from https://github.com/vuejs/v2.vuejs.org/issues/2818

answered Dec 13, 2022 at 13:21

senadk

231 silver badge8 bronze badges

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

Comments

bravohex · Accepted Answer · 2023-08-29 07:07:45Z

You can review this config:

server {
    listen 80;
    listen [::]:80;

    root /var/www/html/frontend;
    index index.html;
    server_name your-domain.com www.your-domain.com;

    # X-Frame-Options is to prevent from clickJacking attack
    add_header X-Frame-Options SAMEORIGIN;

    # disable content-type sniffing on some browsers.
    add_header X-Content-Type-Options nosniff;

    # This header enables the Cross-site scripting (XSS) filter
    add_header X-XSS-Protection "1; mode=block";

    location / {
        root /var/www/html/frontend;
        try_files $uri /index.html;
    }
    
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires 1d;
    }
    
    error_log  /var/log/nginx/my-frontend.log;
}

Collectives™ on Stack Overflow

404 nginx error on page reload with vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related