如何使用 Webpack 配置 AWS Codebuild

问题描述

我创建了一个分四个阶段运行的 AWS Codepipeline。 1) 来自 github 的源代码,2) 将后端部署到 Elastic Beanstalk,3) 使用 Codebuild 构建前端代码(使用下面的 buildspec 文件),以及 4) 将 webpack 的结果部署到 S3。

到目前为止,除了第 3 阶段的结果外,一切都按预期工作。 Codebuild 似乎将工件设置为源文件,而不是 webpack 构建的结果。当我查看已部署代码的存储桶和文件夹时,我期待看到一系列 js 资产文件一个 manifest.json。相反,我看到了项目文件。不太确定我在这里配置错误

buildspec.yml

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
    commands:
      - echo Installing dependencies...
      - yarn
  build:
    commands:
      - echo Building project...
      - yarn build
  post_build:
    commands:
      - echo build completed on `date`

artifacts:
  files:
    - '**/*'

cache:
  paths:
    - '/root/.npm/**/*'
    - '/node_modules/'

webpack-build 配置

enter image description here

webpack-deploy 配置

enter image description here

解决方法

经过几个小时的故障排除后,我终于能够弄清楚发生了什么。

在项目上运行 yarn build 会将所有内容打包到 /dist 文件夹中。但是, artifacts 行表明应该上传到 S3 的文件都是项目文件。因此,修复就像将 **/* 更新为 dist/**/* 一样简单。