如何控制vue-router和nginx

Question

我有一个前端 vue3 Web 应用程序。
我目前遇到以下问题。
但我不知道为什么会发生以及如何解决它..
我认为该错误是由于寻找一个名为回调的静态文件造成的，但我认为 vue-router 会正确处理它，因为如果找不到该文件，它会路由到index.html。
如果有人能告诉我原因，我很高兴知道。

□错误

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/" 

□背景
我的应用程序是 SPA Web 应用程序，具有 Amazon Cognito 的身份验证功能。
然后我在登录完成后调用重定向过程。
登录过程已完成，但重定向到我的应用程序后，浏览器上显示以下错误。
在此输入图片描述
我检查了 nginx 错误日志，日志显示了上面的错误消息
□Vue路由器

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

我尝试像下面这样修改 nginx，但确实有效。 □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;
    }
}

Answer 1

我可以解决我的问题。因此我将分享我简单的思念。
首先是最终的源代码
・nginx 配置

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

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    location / {
        try_files $uri $uri/ sample/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 文件
之前

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

之后

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

□为什么我遇到这个问题
原因其实很简单。
我的问题发生是因为 nginx 服务没有读取我的 nginx 配置。
Nginx 服务读取配置文件

etc/nginx/templates 或 conf.d

但是我把配置文件放在了目录

/usr/share/nginx

是我的错误。所以我需要将我的配置文件放在准确的目录中....

我希望这篇文章可以帮助某人逃离观音寺城之战。