├── .eslintrc.json
├── .github
└── workflows
│ └── browser.yml
├── .gitignore
├── README.md
├── __test__
└── browser.test.js
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── next.svg
└── vercel.svg
├── src
├── app
│ ├── components
│ │ ├── Spotlight.jsx
│ │ └── github-icon.jsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.js
│ ├── page.js
│ └── try
│ │ └── route.js
└── utils
│ ├── cfCheck.js
│ ├── cn.js
│ ├── preload.js
│ └── utils.js
└── tailwind.config.js
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.github/workflows/browser.yml:
--------------------------------------------------------------------------------
1 | name: Build and Deploy Changes
2 |
3 | on:
4 | push:
5 | branches: [main]
6 | pull_request:
7 | branches: [main]
8 |
9 | jobs:
10 | build-app:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout repo
14 | uses: actions/checkout@v3
15 |
16 | - name: Setup Bun
17 | uses: oven-sh/setup-bun@v1
18 | with:
19 | bun-version: latest
20 |
21 | - name: Install packages
22 | run: bun i
23 | shell: bash
24 | - name: Create Screenshots Directory
25 | run: mkdir screenshots
26 | - name: Test
27 | run: bun run test
28 | shell: bash
29 |
30 | - name: Upload Browser Screenshots
31 | uses: actions/upload-artifact@v4
32 | with:
33 | name: browser-screenshots
34 | path: screenshots/
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
38 | bun.lockb
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Deploy puppeteer headless api in vercel
4 |
5 |
6 | 
7 |
8 |
9 |
10 | ## Getting Started
11 |
12 | First, run the development server:
13 |
14 | ```bash
15 | npm install
16 | npm run dev
17 | ```
18 |
19 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
20 |
21 | ## Features
22 |
23 | - Support webpage screenshots
24 | - Support cloudflare [nopecha](https://nopecha.com/demo)
25 |
26 | 
27 | 
28 |
29 | ## Refs
30 |
31 | - [在 Vercel 部署无头浏览器实现网页截图](https://www.hehehai.cn/posts/vercel-deploy-headless)
32 |
--------------------------------------------------------------------------------
/__test__/browser.test.js:
--------------------------------------------------------------------------------
1 | const cfCheck = require('../src/utils/cfCheck.js');
2 | const puppeteer = require("puppeteer-core");
3 | const chromium = require("@sparticuz/chromium-min");
4 | const fs = require('fs');
5 | const path = require('path');
6 | const remoteExecutablePath =
7 | "https://github.com/Sparticuz/chromium/releases/download/v123.0.1/chromium-v123.0.1-pack.tar";
8 | const userAgent = "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Mobile Safari/537.36";
9 | const websites = [
10 | "https://nopecha.com/demo/cloudflare"
11 | , "https://nowsecure.nl/"
12 | , "https://2captcha.com/demo/cloudflare-turnstile"
13 | , "https://infosimples.github.io/detect-headless/"
14 | , "https://arh.antoinevastel.com/bots/areyouheadless"
15 | , "https://bot.sannysoft.com/"
16 | , "https://hmaker.github.io/selenium-detector/"
17 | , "https://kaliiiiiiiiii.github.io/brotector/"
18 | , "https://fingerprintjs.github.io/BotD/main/"
19 | , "https://pixelscan.net/"
20 | ];
21 | describe("Testing page navigation and title", () => {
22 | let browser;
23 | let page;
24 |
25 | beforeAll(async () => {
26 | browser = await puppeteer.launch({
27 | ignoreDefaultArgs: ["--enable-automation"],
28 | args: [...chromium.args, "--disable-blink-features=AutomationControlled"],
29 | defaultViewport: { width: 1920, height: 1080 },
30 | executablePath: await chromium.executablePath(remoteExecutablePath),
31 | headless: "new",
32 | });
33 | const pages = await browser.pages();
34 | page = pages[0];
35 | await page.setUserAgent(userAgent);
36 | const preloadFile = fs.readFileSync(path.join(process.cwd(), '/src/utils/preload.js'), 'utf8');
37 | await page.evaluateOnNewDocument(preloadFile);
38 | page.on('dialog', async dialog => {
39 | await dialog.accept();
40 | });
41 | }, 10000);
42 | afterAll(async () => {
43 | await browser.close();
44 | });
45 |
46 | it("should set up the browser", async () => {
47 | expect(browser).toBeDefined();
48 | expect(page).toBeDefined();
49 | });
50 | websites.forEach((website, i) => {
51 | it(`should navigate to '${website}'`, async () => {
52 | try {
53 | await page.goto(website, { waitUntil: "networkidle2" });
54 | await cfCheck(page);
55 | await page.screenshot({ path: `screenshots/example${i}.png` });
56 | console.log(website + "\nTest passed!");
57 | } catch (error) {
58 | console.error(website + "\nTest failed:", error);
59 | throw error;
60 | }
61 |
62 | }, 60000);
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./src/*"]
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | experimental: {
4 | serverComponentsExternalPackages: ['puppeteer-core', '@sparticuz/chromium-min']
5 | },
6 | }
7 |
8 | module.exports = nextConfig
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "headless-try",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "test": "jest"
11 | },
12 | "dependencies": {
13 | "@sparticuz/chromium-min": "^122.0.0",
14 | "clsx": "^2.1.1",
15 | "framer-motion": "^11.1.9",
16 | "geist": "^1.3.0",
17 | "mini-svg-data-uri": "^1.4.4",
18 | "next": "14.0.4",
19 | "puppeteer-core": "22.5.0",
20 | "react": "^18",
21 | "react-dom": "^18",
22 | "tailwind-merge": "^2.3.0"
23 | },
24 | "devDependencies": {
25 | "autoprefixer": "^10.0.1",
26 | "eslint": "^8",
27 | "eslint-config-next": "14.0.4",
28 | "jest": "^29.7.0",
29 | "postcss": "^8",
30 | "tailwindcss": "^3.3.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/components/Spotlight.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { cn } from "@/utils/cn";
3 |
4 | export const Spotlight = ({ className, fill }) => {
5 | return (
6 |
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/app/components/github-icon.jsx:
--------------------------------------------------------------------------------
1 |
2 | export function LineMdGithubLoop(props) {
3 | return (
4 |
5 | )
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hehehai/headless-try/66cfd6294ac93bb1e1d563955582e0af62add48e/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/app/layout.js:
--------------------------------------------------------------------------------
1 | import { GeistSans } from "geist/font/sans";
2 | import "./globals.css";
3 |
4 | export const metadata = {
5 | title: "Try screenshot",
6 | description: "Vercel functions run headless browser url screenshot",
7 | };
8 |
9 | export default function RootLayout({ children }) {
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/page.js:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { Spotlight } from "@/app/components/Spotlight";
5 | import { LineMdGithubLoop } from "@/app/components/github-icon";
6 |
7 | export default function Home() {
8 | const [imgUrl, setImgUrl] = useState("");
9 | const [loading, setLoading] = useState(false);
10 | const [time, setTime] = useState(0);
11 | const [duration, setDuration] = useState(0);
12 |
13 | const handleSubmit = async (e) => {
14 | e.preventDefault();
15 |
16 | const formData = new FormData(e.target);
17 | const url = formData.get("url");
18 | if (!url) {
19 | return;
20 | }
21 |
22 | setDuration(0);
23 | setTime(0);
24 | const timePoint = Date.now();
25 | const intervalTimer = startDuration();
26 | try {
27 | setLoading(true);
28 | const res = await fetch(`/try?url=${url}`, {
29 | next: { revalidate: 10 },
30 | });
31 | const data = await res.blob();
32 | setImgUrl(URL.createObjectURL(data));
33 | } catch (error) {
34 | console.error(error);
35 | alert("Something went wrong");
36 | } finally {
37 | // 秒
38 | setTime((Date.now() - timePoint) / 1000);
39 | intervalTimer && clearInterval(intervalTimer);
40 | setLoading(false);
41 | }
42 | };
43 |
44 | function startDuration() {
45 | return setInterval(() => {
46 | setDuration((prev) => Number((prev + 0.2).toFixed(1)));
47 | }, 200);
48 | }
49 |
50 | return (
51 |
52 |
56 |
57 |
58 |
59 | Try screenshot
60 |
61 |
62 | Thursday, May 9th 2024 Vercel Functions for Hobby can now run up to
63 | 60 seconds{" "}
64 |
68 | detail
69 |
70 |
71 |
72 |
114 | {imgUrl && (
115 |
116 |
117 |
118 | )}
119 |
120 |
121 |
130 |