Looker 확장 프로그램 프레임워크에서 곧 새로운 로드 메커니즘을 사용합니다. 새 로더가 있으면 기존 확장 프로그램이 로드될 때 예기치 않은 동작과 오류가 발생할 수 있습니다. 이 페이지는 개발자가 확장 프로그램을 테스트하고 업데이트할 수 있도록 새로운 확장 프로그램 프레임워크 로더를 Looker 환경에서 공식적으로 사용 설정하기 전에 테스트하는 방법을 설명합니다.
이 업데이트가 출시되는 날짜는 아직 결정되지 않았습니다. 이때 고객이 새로운 로드 방법을 일시적으로 사용 중지할 수 있는 전환 버튼이 제공됩니다. 하지만 한동안 콘텐츠 보안 정책 (CSP) 위반을 수정하고 <!DOCTYPE html> 사전 분석을 사용하려면 새 로드 기술을 사용 설정해야 합니다.
광고 확장에 영향을 줄 수 있는 변경사항
확장 프로그램에 영향을 미칠 수 있는 확장 프로그램 프레임워크 변경사항의 목록은 다음과 같습니다.
- CSP 위반을 해결하기 위해 HTML이 생성되어 브라우저가 아닌 서버에 확장 프로그램을 로드합니다. 이 변경사항 자체는 기존 광고 확장에 영향을 미치지 않습니다.
base태그가 삭제되어 맞춤 코드 분할에 영향을 미칠 수 있습니다.base태그가 CSP를 위반하여 삭제되었습니다. 그러나 일부 개발자는base태그를 사용하는 자체 코드 분할 기법을 구현했을 수 있습니다. 코드 분할이 여전히 작동하는지 확인하세요. 또는 필요한 경우base태그를 사용하지 않는 다른 기법을 구현하세요.- 새 로더는
<!DOCTYPE html>프리앰블을 사용합니다. 이는height: 100%;를 사용하는 구성요소에 영향을 줄 수 있습니다.height: 100vh을 사용하면 이 문제를 완화할 수 있습니다.
새 로드 방법으로 확장 프로그램 테스트
새로운 로드 기법을 사용하려면 Looker 인스턴스에서 Looker 22.4 이상을 실행해야 합니다. 시작 옵션을 사용하여 사용 설정됩니다. 시작 옵션은 확장 프로그램을 로드하는 데 사용될 URL을 정의합니다. 이 URL의 출처는 Looker 서버의 출처와 달라야 합니다. 이는 확장 프로그램이 안전하게 샌드박스가 될 수 있도록 하는 데 필요합니다.
다음 절차를 따르면 시스템의 다른 사용자에게 영향을 주지 않고 단일 사용자를 위한 새로운 로드 메서드로 확장 프로그램을 테스트할 수 있습니다. 이를 위해 브라우저의 세션 저장소에 확장 프로그램 로드 URL을 작성합니다. 새 메커니즘은 사용자 세션이 완료되거나 사용자가 세션 스토리지에서 값을 삭제할 때까지 유지됩니다. 이 방법은 숙련된 개발자가 사용합니다.
HTTP 프록시 서버 구성
새 확장 프로그램 로드 방법을 사용 설정하기 전에 확장 프로그램 로드 서비스를 시뮬레이션하는 로컬 머신에서 프록시 서버를 실행해야 합니다. 로컬 머신에 Node.js가 설치되어 있는지 확인하고 다음 명령어를 실행합니다.
npx http-server --port 4000 --proxy https://experiment.dev.looker.com --proxy-options.secure false
https://experiment.dev.looker.com를 Looker 인스턴스의 URL로 바꿉니다. 포트 번호를 변경할 수도 있지만 이 위치가 확장 프로그램 개발 서버에서 사용되는 포트 번호와 충돌하지 않도록 해야 합니다.
이 명령어를 처음 실행하면 http-server 설치 권한을 요청하는 메시지가 표시됩니다.
HTTP 프록시 서버 구성
일부 환경에서는 혼합 HTTP 및 HTTPS 콘텐츠가 차단될 수 있습니다. 이 경우 인증서로 HTTP 프록시 서버를 구성해야 합니다. HTTP 프록시 서버를 구성하려면 자체 서명 인증서를 생성해야 합니다. 기본 요건을 충족하려면 openssl가 시스템에 설치되어 있어야 합니다. HTTP 프록시 서버를 실행하려는 디렉터리에서 다음 명령어를 실행합니다.
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
이렇게 하면 cert.pem과 key.pem, 이렇게 두 개의 파일이 생성됩니다.
HTTP 프록시 서버를 실행하려면 로컬 머신에 Node.js가 설치되어 있는지 확인하고 다음 명령어를 실행합니다.
npx http-server --port 4000 -S -C cert.pem --proxy https://experiment.dev.looker.com --proxy-options.secure false
프록시 서버를 사용하기 전에 브라우저가 자체 서명된 인증서를 사용하도록 승인해야 합니다. 브라우저를 열고 https://localhost:4000를 입력합니다. Chrome에서 링크나 버튼이 표시되어 서버로 진행할 수도 있고 브라우저 창에 포커스가 있을 때 thisisunsafe을 입력해야 할 수도 있습니다. 후자의 경우 텍스트가 표시되지 않지만 계속 진행할 수 있습니다.
https를 사용하도록 http-server를 구성하는 방법을 자세히 알아보려면 다음을 참고하세요. https://www.npmjs.com/package/http-server
테스트 시작
-
HTTP 프록시 서버를 설정한 경우, 프록시를 사용하도록 다음 URL을 사용하여 브라우저를 구성합니다.
https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=http://localhost:4000각 항목의 의미는 다음과 같습니다.
https://experiment.dev.looker.com는 Looker 인스턴스의 URL입니다./kitchensink::kitchensink는 테스트하려는 확장 프로그램의 ID입니다.http://localhost:4000은 프록시 서버입니다. 이 절차의 앞부분에서 변경한 경우 포트 번호를 수정합니다.
-
HTTP 프록시 서버를 설정한 경우, 프록시를 사용하도록 다음 URL을 사용하여 브라우저를 구성합니다.
https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=https://localhost:4000각 항목의 의미는 다음과 같습니다.
https://experiment.dev.looker.com는 Looker 인스턴스의 URL입니다./kitchensink::kitchensink는 테스트하려는 확장 프로그램의 ID입니다.https://localhost:4000은 프록시 서버입니다. 이 절차의 앞부분에서 변경한 경우 포트 번호를 수정합니다.
LOOKER_EXTENSION_LOAD_URL 매개변수가 URL에서 즉시 삭제됩니다. 앞서 언급했듯이 프록시 서버 URL은 세션 저장소에 저장되며 세션 기간 동안 활성 상태로 유지됩니다.
테스트 중지
테스트를 중지하려면 다음 URL을 입력하세요.
https://experiment.dev.looker.com/extensions/kitchensink::kitchensink/?LOOKER_EXTENSION_LOAD_URL=
세션 스토리지에서 URL이 삭제됩니다. 다시 한 번 LOOKER_EXTENSION_LOAD_URL 매개변수가 URL에서 삭제됩니다.