Claude Code 클라우드 컨테이너에 고급 브라우저 설정하기
요약
Claude Code 환경에서 고급 브라우저 설정을 위한 상세한 스크립트와 절차를 안내합니다. 이 설정은 Playwright CLI의 기능을 활용하여 프록시 지원 및 특정 Chromium 옵션을 적용함으로써 웹 테스트 환경을 개선하는 것이 목표입니다.
핵심 포인트
- Playwright CLI 설치 및 공식 스킬 복사 과정을 거칩니다.
- 스크립트는 여러 홈 디렉토리(/root, /home/user)에 걸쳐 설정을 분산합니다.
- HTTPS_PROXY 변수를 활용하여 프록시 서버를 통한 브라우저 접속을 구현합니다.
- SessionStart 훅과 cli.config.json 파일을 수정하여 설정의 영속성을 확보합니다.
웹에서 Claude Code로 이동하여 새 세션을 만들고, '☁ Default'를 클릭합니다. 새 컨테이너를 생성하고 네트워크 액세스를 선택한 다음, 시작 스크립트에 다음 내용을 입력하세요:
#!/bin/bash
npm install -g /cli@latest # npm 패키지에서 공식 스킬을 복사 — playwright-cli의 자체 설치 프로그램이 이 환경에서 잘못된 홈 디렉토리를 해결합니다.
PKG_SKILL="$(npm root -g)/@playwright/cli/skills/playwright-cli"
for home in /root /home/user; do mkdir -p "$home/.claude/skills" cp -r "$PKG_SKILL" "$home/.claude/skills/" done # 설정 생성기 — SessionStart 훅에 의해 실행됩니다. HTTPS_PROXY가 존재하는 경우
makepath /root/.claude/hooks
cat > /root/.claude/hooks/playwright-config.sh <<'HOOK'
#!/bin/bash
[ -n "$HTTPS_PROXY" ] || exit 0 # 홈 디렉토리별로 실행
for home in /root /home/user; do mkdir -p "$home/.playwright"
cat > "$home/.playwright/cli.config.json" <<EOF
{
"browser": {
"launchOptions": {
"executablePath": "/opt/pw-browsers/chromium",
"chromiumSandbox": false,
"proxy": {
"server": "${HTTPS_PROXY}",
"bypass": "localhost,127.0.0.1"
},
"args": ["--ssl-version-max=tls1.2"]
}
}
}
EOF done HOOK
chmod +x /root/.claude/hooks/playwright-config.sh # SessionStart 훅 등록 (settings.json에 이미 설정이 있는 경우 병합 안전)
python3 - <<'PY'
import json, os
p = '/root/.claude/settings.json'
s = json.load(open(p))
if os.path.exists(p) else {}
hooks = s.setdefault('hooks', {}).setdefault('SessionStart', [])
cmd = '/root/.claude/hooks/playwright-config.sh'
if not any(cmd in json.dumps(h) for h in hooks):
hooks.append({'hooks': [{'type': 'command', 'command': cmd}]})
json.dump(s, open(p, 'w'), indent=2)
PY
감사합니다. /u/hous 님이 제출했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 r/ClaudeAI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기