在 nuxt build 上将静态资产上传到 S3答案

【问题标题】：Upload static assets to S3 on nuxt build在 nuxt build 上将静态资产上传到 S3
【发布时间】：2021-05-10 15:44:59
【问题描述】：

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

我尝试在节点实例上构建项目，将资产上传到 S3，然后在 docker 环境中构建项目并进行 ECS 部署。但是通过这种方法，我得到了不同的构建文件名称哈希。所以我需要将构建 docker 映像时构建的相同文件上传到 S3。我不知道我怎样才能实现这最后一部分。

【问题讨论】：

我对 Nuxt 本身并不熟悉，但如果它在构建过程中产生工件（如果它是静态的，它应该会这样做）只需将它们复制到 s3 在您构建的同一代码构建阶段码头工人形象。如需更好的答案，请分享您的 bildspec.yml 文件。

标签： amazon-web-services amazon-s3 build nuxt.js

【解决方案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>

【讨论】：