Docker 谷歌云构建上的Stenciljs e2e测试

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

长格式：

要在Google Cloud Build上运行stencil.js e2e测试，您需要一个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"]

# 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"]

现在将其插入cloud 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安装”或“纱线” 步骤2：安装“错误：未下载Chromium修订版。运行“npm” 步骤#2：在Launcher.launch安装“或”纱线安装 步骤2:（/workspace/node_modules/puppeter/lib/Launcher.js:120:15）

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

---

有人知道我如何用一个有效的木偶师设置创建一个有效的stencil.js docker图像吗？

我终于设法让stencil在一个适合谷歌云构建的容器中工作。 主要的问题是，e2e测试所需的Puppeter不能像安装的那样工作，因为它没有一个具有所有必要依赖项的chrome安装

要解决此问题，您必须做三件事：

单独安装Chrome

将木偶演员指向已安装的Chrome

修改模具配置以在没有沙箱的情况下调用测试

1和2通过以下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"]

# 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项目放在同一目录中——即，它与您的stencil.config.ts和package.json位于同一位置

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

通过修改您的stencil.config.ts（如中所示）来修复此问题，因此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',
    },
  ],
};

---

对于CircleCI，我使用了一个名为

CircleCI/node:8-browsers

的docker图像。也许你需要这样一个节点+浏览器的图像来构建谷歌云？谢谢你的建议。然而，云构建没有任何地方具有这样的docker形象。它们确实列出了一组正式的构建步骤（）和社区贡献的步骤（），但它们都没有浏览器或模具