共计 3460 个字符,预计需要花费 9 分钟才能阅读完成。
- 本篇文档对应的代码:https://github.com/LiangJunro…
- Docker 系列文档:https://github.com/LiangJunro…
一、前文回顾 & 前言
通过前文的解说,想必大家曾经对 Docker 有比拟深的印象了,那么这篇文章咱们将长话短说:
- 如何将 Puppeteer 这种无头浏览器塞到 Docker 中
二、Puppeteer 目录构造
治理,咱们的服务还是基于之前的 Node.js 服务革新,所以 jsliang 拿了本人写的一个根底 Node.js + TypeScript 的服务。
它的目录构造如下:
docker-puppeteer
启动这个 Demo 只须要 2 步:
- 安装包:
npm i
- 启动服务:
npm run robot-test
等到每分钟的第 0 秒的时候,终端操作关上 Puppeteer,并将图片寄存到 src/source
上。
要害代码是:
src/index.ts
// ……代码省略
console.log('你好,已进入程序');
let time = 0;
await schedule.scheduleJob('0 * * * * *', async () => {
const browser = process.env.NODE_ENV === 'production' ?
// 正式环境须要开启沙盒模式
await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'],
}) :
// 非正式环境则随便
await puppeteer.launch({
headless: false, // 非无头模式,
devtools: true, // 调试模式,能够在控制台看到 console
});
// 创立新标签页并关上
const page = await browser.newPage();
await page.goto('https://www.baidu.com/s?wd=jsliang');
// 期待 5 秒加载
await page.waitForTimeout(5 * 1000);
// 获取快照并存储到本地
await page.screenshot({path: `./src/source/baidu_${++time}.png`,
});
// 敞开窗口
await browser.close();});
// ……代码省略
感兴趣的小伙伴能够停下来关上仓库,先看下 Demo,不感兴趣的能够持续往下看。
咱们看下要害中的要害:
src/index.ts
const browser = process.env.NODE_ENV === 'production' ?
// 正式环境须要开启沙盒模式
await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'],
}) :
// 非正式环境则随便
await puppeteer.launch({
headless: false, // 非无头模式,
devtools: true, // 调试模式,能够在控制台看到 console
});
因为如果是通过 Docker 构建 Node.js 服务的话,咱们是没法失常启动 Puppeteer 的,所以须要:
- 设置 Dockerfile
- 设置
launch
的姿态
这里咱们的 package.json
代码:
package.json
"scripts": {
"robot": "cross-env NODE_ENV=production ts-node ./src/index.ts robot",
"robot-test": "cross-env NODE_ENV=test ts-node ./src/index.ts robot"
},
所以,咱们设置到 launch
后,只须要在在正式环境运行 npm run robot
,即可启动沙盒模式。
三、编写 Dockerfile
话不多说,咱们间接编写 Dockerfile:
Dockerfile
# 官网文档 https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker
# 基于 Alpine Linux 的最小 Docker 图像,具备残缺的包索引,大小仅为 5 MB!FROM alpine:edge
# 指定执行 CMD 的目录,即先 cd 到该目录上
WORKDIR /home/docker/we_render
# 装置最新版 Chromium(89) 的包
RUN apk add --no-cache \
chromium \
nss \
freetype \
harfbuzz \
ca-certificates \
ttf-freefont \
nodejs \
yarn
# 跳过主动装置 Chrome 包. 应用下面曾经装置的 Chrome
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
# Puppeteer v6.0.0 配套 Chromium 89
RUN yarn add puppeteer@6.0.0
# 拷贝宿主机的文件到容器中的 we_render 目录
COPY . /home/docker/we_render
# 通过 yarn 设置淘宝源和装包,并革除缓存
RUN yarn config set registry 'https://registry.npm.taobao.org' && \
yarn global add pm2 && \
yarn install && \
yarn cache clean
# 申明容器提供的服务端口
EXPOSE 9527
# 容器主过程的启动命令
CMD ["yarn", "run", "robot"]
而后只须要循序渐进创立镜像和创立容器等操作即可。
四、启动服务
留神 :强烈建议先切换镜像,否则下载内容会十分慢,之前我在公司操作还行,回来本人挂迷信上网也整了良久(3000s)。
批改镜像办法:03 – 入门 & 概念解疑
- 创立镜像(Image):
docker image build ./ -t docker-node:1.0.0
- 创立容器(Container):
docker container create -p 3333:80 docker-node:1.0.0
- 启动容器(Container):
docker restart dd420fc4267ad3bdb9eadfdbf37d89e2592dbc9d030a501b96fe10b07ac565ff
- 查看容器(Container)运行状况:
docker ps -a
- 查看容器(Container)的日志:
docker logs -f dd420fc4267a
- 进入容器(Container):
docker exec -it dd420fc4267a bash
- 返回目录:
cd src/source
- 查看目录内容:
ls
能够看到,咱们曾经有几张截图了:
应用后面学习的办法,将容器的内容拷贝进去,并查看下:docker cp f5000c4a530b:/home/docker/we_render/src/source E:\MyWeb\all-for-one
尽管不懂???是什么鬼,然而好歹能失常运行了!
那么,咱们将 Puppeteer 塞到 Docker 上就胜利啦,剩下的只须要将时区和 Hosts 设置下就能够了,这里就不一一赘述了。
这样,咱们的 Docker 之旅就先告一段落了,感兴趣的小伙伴欢送催更,后续的 本地编写 Git 仓库代码,而后 push 到 GitHub 后,走 CI/CD 并更新到服务器…… 操作,只能等 jsliang 有工夫了再进一步更新啦!
我是 jsliang,一个充斥摸索欲,喜爱折腾,乐于扩大本人知识面的一生学习斜杠程序员,让咱们一起来折腾摸索吧!
不折腾的前端,和咸鱼有什么区别!
感觉文章不错的小伙伴欢送点赞 / 点 Star。
如果小伙伴须要分割 jsliang:
- Github
集体联系方式寄存在 Github 首页,欢送一起折腾~
争取打造本人成为一个充斥摸索欲,喜爱折腾,乐于扩大本人知识面的一生学习斜杠程序员。
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。