How to control vue-router and nginx

I have a fronted vue3 web application.
I am currently experiencing the following problems.
But i don't know why happened and how fix it..
I think the error is due to looking for a static file called callback, but I thought it would be handled correctly by vue-router because it routes to index.html if the file is not found.
If anyone can tell me why, I'd be glad to know.

□Error
2024/07/23 09:37:09 [error] 29#29: *9 open() "/usr/share/nginx/html/callback" failed (2: No such file or directory), client: 10.1.1.70, server: localhost, request: "GET /callback?code=22c784ca-4973-4268-96d4-735dba9ddf08 HTTP/1.1", host: "mask.mask.com", referrer: "https://mask.auth.mask.amazoncognito.com/"
□Context
My app is SPA Web application that has Authentication function with Amazon Cognito.
Then I am making the redirection process is called after the login is completed.
The login process is completed work but after redirect to my app, Following error is shown on browser.
enter image description here
I had checked nginx error log and the log said the above error message
□Vue router

import { createRouter, createWebHistory } from 'vue-router'
import MedicalPlanDocView from '../views/MedicalPlanDocView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'medicalPlanDocView',
      component: MedicalPlanDocView
    },
    {
      path: '/callback',
      name: 'callback',
      redirect: to => {
        const code = to.query.code as string
        sessionStorage.setItem("code",code)
        return "/"
      }
    }
  ]
})

export default router

□Nginx

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

    root   /usr/share/nginx/html;
    index  index.html index.htm;

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

I have tried to modify nginx like following but did work. □Nginx

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

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /callback {
        try_files $uri $uri/ /;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Solution

I could fix my issue. Therefore I will share my simple miss.
Firstly follow is final source code
・nginx config

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

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /callback {
        try_files /index.html =404; ← fixed it
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

・Docker File
Before

FROM node:20.11 as build-stage
WORKDIR /app
COPY ./package*.json ./
RUN npm isntall
COPY . .
# RUN npm run build-only
RUN if [ "$ENVIRONMENT" = "production" ]; then \
        npm run build-only; \
    else \
        npm run build-only; \
    fi

FROM nginx:1.25.1 as production-stage
COPY --from=build-stage /app/nginx /usr/share/nginx
COPY --from=build-stage /app/dist /usr/share/nginx/html

After

FROM node:20.11 as build-stage
WORKDIR /app
COPY ./package*.json ./
RUN npm isntall
COPY . .
# RUN npm run build-only
RUN if [ "$ENVIRONMENT" = "production" ]; then \
        npm run build-only; \
    else \
        npm run stg-build-only; \
    fi

FROM nginx:1.25.1 as production-stage
COPY --from=build-stage /app/nginx /etc/nginx ← fixed it
COPY --from=build-stage /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf ← fixed it

□Why i got the problem
The reason was actually simple.
My problem happened because my nginx config was not read by nginx service.
Nginx service read config file on

etc/nginx/templates or conf.d

directory however i put my config file on

/usr/share/nginx

by my mistake. So i needed to put my config file on accurate directory....

I hope this article helps someone to escape from Battle of Kannonji Castle.