在 Google Cloud Build 上进行 Stenciljs e2e 测试

Question

TL;DR：有人知道如何制作有效的 stencil.js docker 映像来运行 stencil 构建和测试吗？

长格式：

要在 Google Cloud Build 上运行 stencil.js e2e 测试，您需要一个 custom build step 作为 docker 映像。
这是一个示例 Dockerfile：

# THESE STEPS GET STENCIL BUILD WORKING & SHOULD HAVE GOT TESTING WORKING
FROM node:10-jessie-slim
WORKDIR /
RUN npm init stencil app stencil
WORKDIR /stencil
COPY package*.json ./
RUN npm install
WORKDIR /stencil/node_modules/puppeteer
RUN npm install
WORKDIR /stencil

# STEPS ADDED BASED ON https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker
RUN apt-get update && apt-get install -y --no-install-recommends ca-certificates curl wget && rm -rf /var/lib/apt/lists/*
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*
RUN npm i puppeteer \
    # Add user so we don't need --no-sandbox.
    # same layer as npm install to keep re-chowned files from using up several hundred MBs more space
    && groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /stencil/home/pptruser/Downloads \
    && chown -R pptruser:pptruser /stencil/home/pptruser \
    && chown -R pptruser:pptruser /stencil/node_modules

ENTRYPOINT ["npm"]

现在您将其插入到云 build.yaml 文件中：

steps:
  #1 Build stencil project
  - name: 'gcr.io/$PROJECT_ID/stencil'
    args: ['run','build']
  #2 Test stencil project
  - name: 'gcr.io/$PROJECT_ID/stencil'
    args: ['test']

在此构建文件中，第 1 步有效，验证模板安装。但是，步骤 #2 失败并显示错误消息：

[ 错误 ] 未下载 Chromium 修订版。运行“npm install”或“yarn 第 2 步：安装”错误：未下载 Chromium 修订版。运行“npm 步骤#2：在 Launcher.launch 安装”或“yarn install” 第 2 步：(/workspace/node_modules/puppeteer/lib/Launcher.js:120:15)

上面的错误是关于 puppeteer 没有找到 chromium（即使安装了本地版本），我已经在 puppeteer 上运行了 npm install 并验证了本地 chromium 已安装。但是Puppeteer documentation 确实提到在 Docker 中运行 puppeteer 很棘手，并提供了一个解决方案，但他们的解决方案是专门用于 Puppeteer 的 docker 容器。

有谁知道如何使用有效的 puppeteer 设置创建有效的 stencil.js docker 映像？

Answer 1

我终于设法让 Stencil 在适合 Google Cloud Build 的容器中工作。 主要问题是 e2e 测试所需的 puppeteer 无法安装，因为它没有包含所有必要依赖项的 chrome 安装。

要修复你必须做三件事：

1. 单独安装 Chrome
2. 将 puppeteer 指向已安装的 Chrome
3. 修改模板配置以在没有沙箱的情况下调用测试

1 和 2 使用以下 Dockerfile 解决：

# Need jessie to install dependencies
FROM node:10-jessie-slim

# Copy files from stencil project
WORKDIR /
COPY package*.json ./
COPY node_modules/ ./node_modules

# Install wget & dependencies needed to install Chrome (next step)
RUN apt-get update && apt-get install -y --no-install-recommends ca-certificates curl wget && rm -rf /var/lib/apt/lists/*

# Install Chromium dev & dependencies
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

# Point puppeteer to the Chromium just installed
ENV PUPPETEER_EXECUTABLE_PATH '/usr/bin/google-chrome-unstable'

# Set entry point
ENTRYPOINT ["npm"]

请注意，此 Dockerfile 必须与您的模板项目放在同一目录中——即它与您的 stencil.config.ts 和 package.json 位于同一位置。

另请注意，这仅在您已经在本地环境中运行测试时才有效。这样做可确保安装必要的测试依赖项。

3 已通过修改您的 stencil.config.ts 得到修复，如 stencil documentation 所示，因此 chrome 在没有沙箱的情况下运行：

export const config: Config = {
  namespace: 'Foo',
  testing: {
    // run chrome with no sandbox to have it work in a container
    browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
  },
  outputTargets: [
    { type: 'dist' },
    {
      type: 'www',
    },
  ],
};