时间戳

首页 > 解决方案 > AWS ECS 上的 Vue docker 部署最初使用 js 和 css 文件作为 html 加载

javascript - AWS ECS 上的 Vue docker 部署最初使用 js 和 css 文件作为 html 加载

问题描述

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

如果我硬刷新它syntax error unexpected token <在控制台中加载一个空白页面的网站，那么在部署之后会发生什么。这个错误是因为 css 和 js 文件，例如。app.js 内容是 html，特别是 index.html 文件。如果我再次用力刷新页面，则站点加载正常，并且 css 和 js 文件加载正确。

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

我的码头文件：

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

标签： javascriptamazon-web-servicesdockervue.jsamazon-ecs

解决方案

推荐阅读