Angular團隊把1.5GB鏡像縮到200行代碼

1.5GB的Docker鏡像，Chrome更新一次崩一次，內存泄漏像漏勺——這是用Puppeteer（無頭瀏覽器自動化工具）做截圖的常態。Angular開發者想生成PDF或Open Graph圖片，傳統路徑就是跳進這個坑。

PageBolt這類截圖API（應用程序編程接口）換了個思路：POST一個URL或HTML，拿回二進制文件。沒有Chrome，沒有容器膨脹，沒有半夜被警報叫醒。

但這里有個陷阱。Angular跑在瀏覽器里，你把API密鑰寫進服務，等于貼在腦門上給人看。正確的姿勢是搭一層薄代理：Angular調自己的后端，后端帶密鑰調PageBolt，結果原路返回。一次性配置，通吃所有需要密鑰的第三方API。

這篇是事件還原。從后端依賴裝起，到Angular服務對接，再到為什么"服務器端藏密鑰"不是可選項而是必選項——按時間線走一遍。

第一步：后端骨架，三行依賴

Express項目里執行：

npm install express axios dotenv

express（Node.js框架）起服務，axios（HTTP客戶端）調PageBolt，dotenv（環境變量管理）把密鑰隔離在代碼之外。沒有多余的東西。

根目錄建.env文件，只寫一行：

PAGEBOLT_API_KEY=your_api_key_here

這行不會進Git倉庫，部署時由CI/CD或服務器環境注入。密鑰泄露事件里，80%是把密鑰硬編碼進了前端或提交了配置文件。

Angular這邊，環境文件分開發和生產：

// src/environments/environment.ts
export const environment = {
production: false,
apiUrl: 'http://localhost:3000'
};

// src/environments/environment.prod.ts
export const environment = {
production: true,
apiUrl: 'https://your-api.yourapp.com'
};

注意這里apiUrl指向的是你自己的后端，不是PageBolt。Angular從頭到尾不知道第三方API的存在。

第二步：Angular服務，只負責傳話

src/app/services/pagebolt.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';

@Injectable({ providedIn: 'root' })
export class PageboltService {
private baseUrl = environment.apiUrl;

constructor(private http: HttpClient) {}

downloadPdf(url: string): Observable {
return this.http.post(
`${this.baseUrl}/capture/pdf`,
{ url },
{ responseType: 'blob' }
);
}

takeScreenshot(url: string): Observable {
return this.http.post(
`${this.baseUrl}/capture/screenshot`,
{ url },
{ responseType: 'blob' }
);
}
}

服務里只有兩個方法：下載PDF和截圖。都返回Observable（二進制大對象流），Angular的HttpClient處理成文件下載或直接展示。

別忘了在app module或bootstrap配置里注冊HttpClientModule（Angular 17以下）或provideHttpClient()（Angular 17+）。少了這一步，依賴注入會拋錯，但錯誤信息往往指向不明，新手容易卡半小時。

第三步：后端代理，密鑰的保險柜

server/index.ts：

import express from 'express';
import axios from 'axios';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
app.use(express.json());

const PAGEBOLT_API = 'https://pagebolt.dev/api/v1';
const API_KEY = process.env.PAGEBOLT_API_KEY;

app.post('/capture/pdf', async (req, res) => {
try {
const { url } = req.body;
const response = await axios.post(
`${PAGEBOLT_API}/pdf`,
{ url },
{
headers: { 'Authorization': `Bearer ${API_KEY}` },
responseType: 'arraybuffer'
}
);
res.set('Content-Type', 'application/pdf');
res.send(response.data);
} catch (error) {
res.status(500).json({ error: 'PDF generation failed' });
}
});

app.post('/capture/screenshot', async (req, res) => {
try {
const { url } = req.body;
const response = await axios.post(
`${PAGEBOLT_API}/screenshot`,
{ url },
{
headers: { 'Authorization': `Bearer ${API_KEY}` },
responseType: 'arraybuffer'
}
);
res.set('Content-Type', 'image/png');
res.send(response.data);
} catch (error) {
res.status(500).json({ error: 'Screenshot failed' });
}
});

app.listen(3000, () => console.log('Proxy running on port 3000'));

兩個端點，結構幾乎一樣。從請求體取URL，帶密鑰調PageBolt，把二進制結果原樣返回。Content-Type（內容類型）頭必須設對，否則瀏覽器會把PDF當亂碼文本打開。

密鑰只出現在服務器內存里，不在網絡請求中暴露，不進前端代碼，不存瀏覽器存儲。這是唯一安全的分發方式。

第四步：Open Graph圖片，社交分享的隱藏戰場

截圖API的第三個典型場景是生成OG圖片——微信、Twitter、LinkedIn分享鏈接時顯示的那張卡片圖。

PageBolt支持直接傳HTML字符串，不用先部署一個可訪問的URL。后端加一個新端點：

app.post('/capture/og', async (req, res) => {
try {
const { html, width = 1200, height = 630 } = req.body;
const response = await axios.post(
`${PAGEBOLT_API}/screenshot`,
{ html, width, height },
{
headers: { 'Authorization': `Bearer ${API_KEY}` },
responseType: 'arraybuffer'
}
);
res.set('Content-Type', 'image/png');
res.send(response.data);
} catch (error) {
res.status(500).json({ error: 'OG image generation failed' });
}
});

Angular服務對應添加方法，傳HTML模板和尺寸。1200×630是Twitter和Facebook的標準卡片尺寸，但你可以按平臺定制。

這里的關鍵是：HTML可以完全動態生成。用戶頭像、文章標題、實時數據——拼成一段HTML字符串，截圖API把它變成像素。不需要為每張OG圖維護一個真實路由。

第五步：錯誤處理與流式響應

上面的代碼用了try-catch，但生產環境需要更細的控制。PageBolt返回的錯誤分幾種：400（請求參數錯誤）、401（密鑰無效）、429（頻率限制）、5xx（服務端故障）。

代理層應該透傳狀態碼，讓前端知道該重試、該報錯還是該換密鑰：

catch (error: any) {
const status = error.response?.status || 500;
const message = error.response?.data?.message || 'Unknown error';
res.status(status).json({ error: message });
}

大文件場景下，axios的arraybuffer（數組緩沖區）會把整個響應塞進內存。如果生成的是幾十頁的PDF，考慮改用stream（流式）模式，邊接收邊轉發給客戶端，降低服務器內存壓力。

流式版本的截圖端點：

app.post('/capture/screenshot-stream', async (req, res) => {
const { url } = req.body;
const response = await axios({
method: 'post',
url: `${PAGEBOLT_API}/screenshot`,
data: { url },
headers: { 'Authorization': `Bearer ${API_KEY}` },
responseType: 'stream'
});
res.set('Content-Type', 'image/png');
response.data.pipe(res);
});

pipe（管道）方法把PageBolt的響應流直接接到Express的響應流，服務器只充當中轉，不緩存完整文件。

第六步：部署與密鑰輪換

本地跑通后，部署到Vercel、Railway或自研服務器。環境變量的注入方式因平臺而異，但原則不變：密鑰不進代碼倉庫。

GitHub的secret scanning（密鑰掃描）會檢測提交的API密鑰并自動撤銷，這是最后一道防線，但別依賴它。

密鑰輪換策略：PageBolt支持多密鑰，舊密鑰設過期時間，新密鑰提前生成。代理層可以簡單實現故障轉移：

const API_KEYS = [process.env.PAGEBOLT_API_KEY_1, process.env.PAGEBOLT_API_KEY_2];
let keyIndex = 0;

async function callPageBoltWithFallback(endpoint: string, data: any) {
for (let i = 0; i < API_KEYS.length; i++) {
const key = API_KEYS[(keyIndex + i) % API_KEYS.length];
try {
const res = await axios.post(`${PAGEBOLT_API}${endpoint}`, data, {
headers: { 'Authorization': `Bearer ${key}` },
responseType: 'arraybuffer'
});
keyIndex = (keyIndex + i) % API_KEYS.length;
return res;
} catch (e: any) {
if (e.response?.status === 401) continue;
throw e;
}
}
throw new Error('All API keys exhausted');
}

401（未授權）時自動試下一個密鑰，其他錯誤直接拋出。輪換邏輯對調用方透明，端點代碼不用改。

第七步：Angular端的使用示例

組件里注入服務，觸發下載：

import { Component } from '@angular/core';
import { PageboltService } from './services/pagebolt.service';

@Component({
selector: 'app-report',
template: `
下載PDF
生成分享圖
`
})
export class ReportComponent {
constructor(private pagebolt: PageboltService) {}

downloadReport() {
this.pagebolt.downloadPdf('https://myapp.com/report/123')
.subscribe(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
window.URL.revokeObjectURL(url);
});
}

shareImage() {
const html = `

Q3財報：增長47%

this.pagebolt.takeScreenshotFromHtml(html, 1200, 630)
.subscribe(blob => {
// 上傳到圖床或直接展示

takeScreenshotFromHtml需要在服務里補充，邏輯和takeScreenshot類似，只是POST體里傳html而非url。

這里有個細節：window.URL.createObjectURL生成的臨時URL必須revoke（釋放），否則瀏覽器內存中會堆積大量blob引用，長時間運行的單頁應用可能因此變慢。

對比：Puppeteer方案 vs 截圖API方案

Puppeteer的代價是顯性的。Chrome二進制本身占100MB+，Docker基礎鏡像再加一層，輕松突破1GB。每次Chrome版本更新，可能引入破壞性變更，CI/CD pipeline要跟著調。

截圖API把這部分外包出去。你的服務器只跑200行Express代碼，內存占用按MB算，啟動時間按秒算。代價是網絡延遲（多一跳）和按調用付費，但大多數業務的調用頻率，賬單遠低于運維一個Chrome集群的人力成本。