在nuxt构建时将静态资源上载到S3

Question

我有一个Nuxt js应用程序，它是使用AWS codepipeline规则部署的。在构建阶段，我构建了一个docker镜像，该镜像被部署到ECS并在那里运行。我正在尝试将静态资源和Nuxt构建上传到S3，并使用，将资源指向publicPath实例。

我尝试在节点实例上构建项目，将资产上传到S3，然后在docker环境中构建项目，并进行ECS部署。但是通过这个方法，我得到了不同的构建文件名和哈希值。因此，我需要将构建docker镜像时构建的相同文件上传到S3。我不知道我如何才能完成最后这部分。

Answer 1

出于缓存破坏的目的，Webpack会自动将自定义哈希附加到导入到您的项目中的任何内容。您可以将静态图像放在静态文件夹中并将其作为源文件，而无需将它们导入到Vue文件中，但是在生产环境中，您必须将本地URL重写为您的S3路径。您最好从一开始就将静态资源放到S3上，然后在代码中直接获取它们的S3 URL。

因此，不是：

<template>
   <img :src="MyImage" />
</template>

<script>
import MyImage from '../assets/myImage.jpg'

export default {
  data() {
    return {
      MyImg
    }
  }
}

执行以下操作：

<template>
   <img src="/static/images/myImage.jpg" />
</template>

<script>
export default {
  mounted() {         // this is untested scratch code
     if (process.NODE_ENV == 'production') {
       document.getElementsByTagName('img')
         .filter(img => img.src.startsWith('/static/images'))
         .forEach(img => img.src = img.src.replace('/static/images', 'https://mybucket.s3.aws.amazon.com/static_images')
     }
  }
}
</script>

或者更简单：

<template>
   <img src="https://mybucket.s3.aws.amazon.com/static_images/myImage.jpg" />
</template>