Google Cloud Build 上的 Stenciljs e2e 测试

Question

TL;DR：有谁知道如何制作有效的 stencil.js docker 图像到运行模板构建和测试？

长格式：

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

# 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 失败并显示错误消息：

[ ERROR ] Chromium revision is not downloaded. Run "npm install" or "yarn Step #2: install" Error: Chromium revision is not downloaded. Run "npm Step #2: install" or "yarn install" at Launcher.launch Step #2: (/workspace/node_modules/puppeteer/lib/Launcher.js:120:15)

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

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

Answer 1

我终于设法让模板在适合 Google Cloud Build 的容器中工作。主要问题是 e2e 测试所需的 puppeteer 不能像安装的那样工作，因为它没有 chrome 安装和所有必要的依赖项。

要修复你必须做三件事：

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

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 运行s 没有沙盒：

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',
    },
  ],
};

Google Cloud Build 上的 Stenciljs e2e 测试

Stenciljs e2e tests on Google Cloud Build

docker

stenciljs

google-cloud-build