AWS ECS 上的 Vue docker 部署最初以 html 形式加载 js 和 css 文件

Question

我有一个在 AWS ECS Fargate 上运行的 Vue 应用程序。一般来说，它工作得很好，我遇到的问题只是在部署时启动新任务（容器）时发生的事情。

部署后发生的情况是，如果我硬刷新网站，它会在控制台中加载一个带有

syntax error unexpected token <

的空白页面。这个错误是因为 css 和 js 文件，例如。 app.js 内容是 html，具体来说是 index.html 文件。如果我再次硬刷新页面，网站加载正常，并且 css 和 js 文件加载正确。

我无法在本地主机上复制它，我如何复制它是我部署到ECS，然后不断刷新页面直到它发生，有时它不会发生。我认为它发生在启动容器的第一秒，然后就好了。

我的dockerfile：

# build stage
FROM node:lts-alpine as build-stage

# Declare ARGS
ARG VUE_APP_API_ENDPOINT_ARG
ARG VUE_APP_ENVIRONMENT_ARG
ARG VUE_APP_GTM_ARG
ARG VUE_APP_INTERCOM_ARG
ARG VUE_APP_LOAD_FULL_STORY_ARG
ARG VUE_APP_LOAD_HOTJAR_ARG
ARG VUE_APP_ONCE_OFF_PRICE_ARG
ARG VUE_APP_PEACH_PAYMENTS_BASE_URL_ARG
ARG VUE_APP_SENTRY_DSN_ARG
ARG VUE_APP_STRIKETHROUGH_ONCE_OFF_PRICE_ARG
ARG VUE_APP_SUBSCRIPTION_PRICE_ARG

# Set ENV variables
ENV VUE_APP_API_ENDPOINT=$VUE_APP_API_ENDPOINT_ARG
ENV VUE_APP_ENVIRONMENT=$VUE_APP_ENVIRONMENT_ARG
ENV VUE_APP_GTM=$VUE_APP_GTM_ARG
ENV VUE_APP_INTERCOM=$VUE_APP_INTERCOM_ARG
ENV VUE_APP_LOAD_FULL_STORY=$VUE_APP_LOAD_FULL_STORY_ARG
ENV VUE_APP_LOAD_HOTJAR=$VUE_APP_LOAD_HOTJAR_ARG
ENV VUE_APP_ONCE_OFF_PRICE=$VUE_APP_ONCE_OFF_PRICE_ARG
ENV VUE_APP_PEACH_PAYMENTS_BASE_URL=$VUE_APP_PEACH_PAYMENTS_BASE_URL_ARG
ENV VUE_APP_SENTRY_DSN=$VUE_APP_SENTRY_DSN_ARG
ENV VUE_APP_STRIKETHROUGH_ONCE_OFF_PRICE=$VUE_APP_STRIKETHROUGH_ONCE_OFF_PRICE_ARG
ENV VUE_APP_SUBSCRIPTION_PRICE=$VUE_APP_SUBSCRIPTION_PRICE_ARG

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

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

下图是错误的来源，app.js 文件包含 html（特别是 index.html 文件）。当我再次刷新页面时，js 文件包含预期的 js。这就是我在部署后发现错误的奇怪情况下的样子。它有时也会发生在 .css 文件上，而不仅仅是 .js 文件上。

我已经为此苦苦挣扎了几天，但无法弄清楚。我尝试按照网上类似问题的建议将

<base href="/" />

添加到 index.html 文件的头部，但它不起作用，该解决方案似乎更适合那些持续出现此错误的人，而不仅仅是部署后的一秒钟。

有谁知道为什么会发生这种情况？或者如果这是问题所在，我如何通过给 ECS 中的任务更多的时间来正确加载来解决这个问题？我有一个负载均衡器，它执行运行状况检查，并且仅在给出 200 状态时将用户发送到服务器，但带有语法错误的空白页面返回 200 状态，因此负载均衡器认为其运行状况良好。

任何帮助将不胜感激。

编辑： 我的 nginx.conf 了解更多信息

server {
  listen 80;

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

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

  # enable gzip compression
  gzip on;
  gzip_min_length  1000;
  gzip_types    text/plain text/xml text/css application/javascript application/json;
  # end gzip configuration
}

Answer 1

我花了很长时间来解决这个问题......

但我通过在用于反应应用程序的目标组中启用粘性会话解决了这个问题。

现在对index.html的请求将具有AWS cookie标头。这可确保对静态文件的所有后续请求都将从同一实例提供服务。