在 docker 容器内的 puppeteer 中渲染 nextjs 页面时出现问题答案

【问题标题】：Problem rendering nextjs page inside puppeteer inside a docker container在 docker 容器内的 puppeteer 中渲染 nextjs 页面时出现问题
【发布时间】：2020-04-02 16:12:56
【问题描述】：

我来到你面前是最后的希望。我有一个项目，我需要能够将页面导出到 pdf 文件。该项目是一个部署在 docker swarm 中的 nextjs 站点。

考虑到 nextjs 的 SSR/CSR，我选择使用 puppeteer 来渲染和导出页面。为此，我创建了一个 POST 端点，将 url 和令牌作为参数，以允许呈现页面服务器端。

出口代码：

let cfg = {
    headless: true,
    args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-web-security"]
};

if (serverRuntimeConfig.chromiumPath != undefined) {
    cfg.executablePath = serverRuntimeConfig.chromiumPath
}

const browser = await puppeteer.launch(cfg);
const page = await browser.newPage();
page.on('console', msg => {
    for (let i = 0; i < msg.args().length; ++i)
        console.log(`${i}: ${msg.args()[i]}`);
});

await page.setCookie(...cookies)
await page.goto(query);
await page.waitFor(10000)
const pdf = await page.pdf({
    format: "A4",
    scale: 0.75,
    printBackground: true
});
await browser.close();
return pdf;

如您所见，我的页面需要认证，所以我使用 puppeteer 设置了 cookie。

当我在本地使用它时，绝对没有问题。我的页面已正确加载和导出。使用 docker 部署时会出现问题。我已经控制台记录了这个问题，我在 componentDidMount 钩子中异步加载了一些数据，当我启动第一个获取数据的请求时，加载就停止了。没有错误，什么都没有。它只是停止。

async componentDidMount() {
    console.log("yeah");
    let ad = await apiCase.doRequest(...);
    console.log("re yeah");
}

有一个“是的”，没有“是的”。

Dockerfile（它的产品部分）

FROM alpine:edge as prod

ENV PORT 80
EXPOSE 80

WORKDIR /app
COPY --from=prune-builder /src /app

RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    freetype-dev \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
    nodejs \
    npm

CMD ["npm", "run", "prod"]

有什么想法吗？我会把钱花在容器中的一些愚蠢的配置问题上，但似乎我找不到它......

【问题讨论】：

标签： docker puppeteer next.js

【解决方案1】：

好的，所以，如果有人有这个问题...没有问题。

我尝试在本地安装我的图像，效果很好。问题似乎与容器部署在集群上的网络访问有关。

【讨论】：