이 페이지는 Cloud Translation API를 통해 번역되었습니다.

HTTP Google Workspace 부가기능 테스트 및 디버그

Google Workspace 부가기능 개발자는 다음을 위해 코드를 디버그해야 할 수 있습니다. 변경사항을 테스트하거나 복잡한 문제를 해결할 수 있습니다. Google Workspace 부가기능 디버깅 여러 가지 방법으로 수행할 수 있습니다. 앱의 아키텍처, 앱 배포 방식 및 환경설정에 따라 달라집니다.

이 페이지에서는 다음을 사용하여 HTTP Google Workspace 부가기능을 디버그하는 방법을 설명합니다. ngrok: 로컬 내부 IP 주소를 테스트하는 데 사용할 수 있는 개발 환경입니다. 이 가이드에서는 문제를 해결하는 방법을 학습하는 데 도움이 될 수 있습니다

로컬 개발 환경에서 디버그

이 섹션에서는 Google Workspace 부가기능과 로컬 환경에서 실행됩니다

로컬 개발에서 디버그
환경

그림 1. 로컬 개발 환경에서 디버그합니다.

기본 요건

Node.js

node 및 npm의 최신 버전 설치됨 사용할 수 있습니다
로컬에 최신 버전의 nodemon이 설치됨 자동 새로고침 용도로 사용됩니다.
```
npm install -g nodemon
```
Google Cloud 프로젝트. Ad Exchange 계정의 기본 요건 그리고 환경 참조하세요. 빠른 시작 가이드를 참고하세요.
로컬에서 디버그할 Google Workspace 부가기능의 코드 환경입니다 코드 예시의 미리보기 링크 특성을 사용합니다. GitHub 저장소의 3p-resources googleworkspace/add-ons-samples 설명을 위해 제공하겠습니다
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
ngrok 계정
gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

Python

python3의 최신 버전 설치됨 사용할 수 있습니다
최신 버전의 pip 및 virtualenv 설치 Python 패키지 및 가상 프라이빗 클라우드를 관리하는 데 사용됩니다. 각 환경에 따라 다릅니다
Google Cloud 프로젝트. Ad Exchange 계정의 기본 요건 그리고 환경 참조하세요. 빠른 시작 가이드를 참고하세요.
로컬에서 디버그할 Google Workspace 부가기능의 코드 환경입니다 코드 예시의 미리보기 링크 특성을 사용합니다. GitHub 저장소의 3p-resources googleworkspace/add-ons-samples 설명을 위해 제공하겠습니다
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
ngrok 계정
gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

자바

Java SE 11's JDK의 최신 안정화 버전 로컬에 설치됨 환경입니다
Apache Maven의 최신 버전 로컬 환경에 설치되어 있는 경우 Java 프로젝트를 관리하는 데 사용됩니다
Google Cloud 프로젝트. Ad Exchange의 기본 요건 그리고 환경 참조하세요. 빠른 시작 가이드를 참고하세요.
로컬에서 디버그할 Google Workspace 부가기능의 코드 환경입니다 코드 예시의 미리보기 링크 특성을 사용합니다. GitHub 저장소의 3p-resources googleworkspace/add-ons-samples 설명을 위해 제공하겠습니다
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
ngrok 계정
gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

로컬 호스트 서비스를 공개적으로 제공

로컬 환경을 인터넷에 연결해야 Google Workspace 부가기능에서 액세스할 수 있습니다. ngrok 애플리케이션은 공개 URL에 대한 HTTP 요청을 로컬 환경으로 리디렉션합니다.

로컬 환경의 브라우저에서 ngrok 계정에 로그인합니다.
애플리케이션을 설치하고 로컬에 authtoken을(를) 설정합니다. 제공합니다.
프로젝트에서 정적 도메인을 만듭니다. ngrok 계정은 NGROK_STATIC_DOMAIN(으)로 참조됩니다. 참조하세요.

부가기능 배포 만들기 및 설치

모든 HTTP 요청을 사용할 수 있습니다 배포 파일은 다음과 같이 표시됩니다.

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "NGROK_STATIC_DOMAIN",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "$URL2",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

NGROK_STATIC_DOMAIN을 ngrok 계정.

사용할 Google Cloud 프로젝트를 설정합니다.
```
gcloud config set project PROJECT_ID
```
애플리케이션 기본값에 사용할 새로운 사용자 인증 정보를 획득합니다. 사용자 인증 정보:
```
gcloud auth application-default login
```
PROJECT_ID를 프로젝트 ID API에 액세스할 수 있습니다

배포를 만듭니다.

gcloud workspace-add-ons deployments create manageSupportCases \
    --deployment-file=DEPLOYMENT_FILE_PATH

DEPLOYMENT_FILE_PATH을 배포할 수 있습니다

배포를 설치합니다.

gcloud workspace-add-ons deployments install manageSupportCases

Google Workspace 부가기능은 모든 HTTP 요청을
정적 도메인

그림 2. Google Workspace 부가기능에서 모든 HTTP 요청을 전송함 사용할 수 있습니다 ngrok 공공 서비스는 Google Workspace 부가기능 및 실행되는 애플리케이션 코드 제공합니다

Google Workspace 부가기능 테스트하기

Cloud Build를 사용하여 배포, 테스트, 디버그, 자동 새로고침이 Google Workspace 부가기능.

Node.js

로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. add-ons-samples/node/3p-resources
2. 다음을 통해 로컬 실행 및 자동 새로고침 디버그용 애플리케이션 구성 package.json 파일에 종속 항목 하나와 스크립트 두 개를 추가합니다.
```
{
    ...
    "dependencies": {
      ...
      "@google-cloud/functions-framework": "^3.3.0"
    },
    "scripts": {
        ...
        "start": "npx functions-framework --target=createLinkPreview --port=9000",
        "debug-watch": "nodemon --watch ./ --exec npm start"
    }
    ...
}
```
3. 루트 디렉터리에서 애플리케이션을 설치합니다.
```
npm install
```
4. 다음을 트리거하는 Debug Watch라는 실행을 만들고 구성합니다. 다음 위치에 .vscode/launch.json 파일을 만들어 debug-watch 스크립트를 .
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Debug Watch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": ["run-script", "debug-watch"]
    }]
}
```
5. HTTP 요청 처리를 일시 중지하는 중단점을 index.js 파일을 실행하고 실행을 시작하고 디버깅을 수행할 수 있습니다. Debug Watch 구성이 이전에 추가되었습니다. 애플리케이션은 이제 포트 9000에서 HTTP 요청을 실행하고 리슨합니다.
  
  그림 3. 애플리케이션이 실행되고 HTTP를 수신 대기 중입니다. 포트 9000에서 요청을 전송합니다.
로컬 환경에서 ngrok 애플리케이션을 실행합니다.
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널
또한 웹 인터페이스는 ngrok에 의해 localhost에서 시작됩니다. 브라우저에서 열어서 모든 활동을 모니터링할 수 있습니다.

그림 5. ngrok 애플리케이션에서 호스팅하는 웹 인터페이스 HTTP 요청이 표시되지 않을 수 있습니다.
새로운 테스터 계정이 있는 Google 문서:
- 새 Google 문서를 만듭니다.
  
  새 Google 문서 만들기
- 다음 링크를 입력하고 enter 키를 누릅니다.
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 링크를 클릭합니다.
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Workspace 부가기능이 제한되기 전에 캐시의 Google 문서의 링크 미리보기를 표시합니다.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

그림 7. HTTP 요청이 ngrok 애플리케이션.
애플리케이션 동작을 변경하려면 Case를 Case: 인라인으로 바꿉니다. index.js의 51입니다. 파일을 저장하면 nodemon이(가) 자동으로 업데이트된 소스 코드로 애플리케이션을 다시 로드하고 Visual Studio Code는 디버그 모드로 유지됩니다.

그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)
이번에는 링크를 클릭하고 몇 초 동안 기다리는 대신 새 Google 문서를 만들면 웹에 기록된 마지막 HTTP 요청을 선택할 수 있습니다. 로컬 환경의 ngrok 애플리케이션이 호스팅하는 인터페이스 그런 다음 Replay를 클릭합니다. 지난번과 동일합니다. Google Workspace 부가기능 디버깅이 진행 중이므로 응답하지 않습니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 미리보기 카드의 업데이트된 버전을 업데이트합니다.

Python

로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. add-ons-samples/python/3p-resources/create_link_preview
2. Python env의 새 가상 환경을 만들고 활성화합니다.
```
virtualenv env
source env/bin/activate
```
3. 가상 머신에서 pip를 사용하여 모든 프로젝트 종속 항목 설치 환경:
```
pip install -r requirements.txt
```
4. 루트 디렉터리에 .vscode/launch.json 파일을 만듭니다. 애플리케이션을 트리거하는 Debug Watch라는 시작 구성 디버그 모드 포트 9000의 functions-framework 모듈에서 가상 환경 env에서:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "python",
        "request": "launch",
        "name": "Debug Watch",
        "python": "${workspaceFolder}/env/bin/python3",
        "module": "functions_framework",
        "args": [
            "--target", "create_link_preview",
            "--port", "9000",
            "--debug"
        ]
    }]
}
```
5. HTTP 요청 처리를 일시 중지하는 중단점을 main.py 파일을 실행하고 실행을 시작하고 디버깅을 수행할 수 있습니다. Debug Watch 구성이 이전에 추가되었습니다. 애플리케이션은 이제 포트 9000에서 HTTP 요청을 실행하고 리슨합니다.
  
  그림 3. 애플리케이션이 실행되고 HTTP를 수신 대기 중입니다. 포트 9000에서 요청을 전송합니다.
로컬 환경에서 ngrok 애플리케이션을 실행합니다.
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널
또한 웹 인터페이스는 ngrok에 의해 localhost에서 시작됩니다. 브라우저에서 열어서 모든 활동을 모니터링할 수 있습니다.

그림 5. ngrok 애플리케이션에서 호스팅하는 웹 인터페이스 HTTP 요청이 표시되지 않을 수 있습니다.
새로운 테스터 계정이 있는 Google 문서:
- 새 Google 문서를 만듭니다.
  
  새 Google 문서 만들기
- 다음 링크를 입력하고 enter 키를 누릅니다.
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 링크를 클릭합니다.
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Workspace 부가기능이 제한되기 전에 캐시의 Google 문서의 링크 미리보기를 표시합니다.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

그림 7. HTTP 요청이 ngrok 애플리케이션
애플리케이션 동작을 변경하려면 Case를 Case: 인라인으로 바꿉니다. main.py 파일의 56입니다. 파일을 저장하면 Visual Studio Code 업데이트된 소스 코드로 애플리케이션을 자동으로 다시 로드하고 디버그 모드로 유지됩니다

그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)
이번에는 링크를 클릭하고 몇 초 동안 기다리는 대신 새 Google 문서를 만들면 웹에 기록된 마지막 HTTP 요청을 선택할 수 있습니다. 로컬 환경의 ngrok 애플리케이션이 호스팅하는 인터페이스 그런 다음 Replay를 클릭합니다. 지난번과 동일합니다. Google Workspace 부가기능 디버깅이 진행 중이므로 응답하지 않습니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 미리보기 카드의 업데이트된 버전을 업데이트합니다.

자바

로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. add-ons-samples/java/3p-resources
2. 애플리케이션을 실행하도록 Maven 프로젝트 구성 Cloud를 추가하여 포트 9000에서 로컬로 CreateLinkPreview 함수 프레임워크 빌드 플러그인 function-maven-plugin의 pom.xml 파일:
```
...
<plugin>
    <groupId>com.google.cloud.functions</groupId>
    <artifactId>function-maven-plugin</artifactId>
    <version>0.11.0</version>
    <configuration>
        <functionTarget>CreateLinkPreview</functionTarget>
        <port>9000</port>
    </configuration>
</plugin>
...
```
3. 이제 로컬에서 디버그 모드로 실행할 수 있습니다.
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. 루트 디렉터리에 .vscode/launch.json 파일을 만듭니다. 에 연결되는 Remote Debug Watch라는 실행을 구성합니다. 이전에 포트 8000로 시작된 애플리케이션:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Remote Debug Watch",
        "projectName": "http-function",
        "hostName": "localhost",
        "port": 8000
    }]
}
```
5. HTTP 요청 처리를 일시 중지하는 중단점을 CreateLinkPreview.java 파일을 열고 첨부를 시작하고 디버깅을 수행할 수 있습니다. Remote Debug Watch 구성이 이전에 추가되었습니다. 애플리케이션은 이제 포트 9000에서 실행되고 HTTP 요청을 리슨합니다.
  
  그림 3. 애플리케이션이 실행 중이고 HTTP를 수신 대기하는 경우 포트 9000에서 요청이 실행됩니다.
로컬 환경에서 ngrok 애플리케이션을 실행합니다.
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널
또한 웹 인터페이스는 ngrok에 의해 localhost에서 시작됩니다. 브라우저에서 열어서 모든 활동을 모니터링할 수 있습니다.

그림 5. ngrok 애플리케이션에서 호스팅하는 웹 인터페이스 HTTP 요청이 표시되지 않을 수 있습니다.
새로운 테스터 계정이 있는 Google 문서:
- 새 Google 문서를 만듭니다.
  
  새 Google 문서 만들기
- 다음 링크를 입력하고 enter 키를 누릅니다.
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 링크를 클릭합니다.
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Workspace 부가기능이 제한되기 전에 캐시의 Google 문서의 링크 미리보기를 표시합니다.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

그림 7. HTTP 요청이 ngrok 애플리케이션
애플리케이션 동작을 변경하려면 Case를 Case: 인라인으로 바꿉니다. CreateLinkPreview.java 파일의 78, mvnDebug 다시 시작 Remote Debug Watch을(를) 다시 실행하여 다시 연결하고 다시 시작 디버깅을 참조하세요.
이번에는 링크를 클릭하고 몇 초 동안 기다리는 대신 새 Google 문서를 만들면 웹에 기록된 마지막 HTTP 요청을 선택할 수 있습니다. 로컬 환경의 ngrok 애플리케이션이 호스팅하는 인터페이스 그런 다음 Replay를 클릭합니다. 지난번과 동일합니다. Google Workspace 부가기능 디버깅이 진행 중이므로 응답하지 않습니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 미리보기 카드의 업데이트된 버전을 업데이트합니다.

원격 환경에서 디버그

이 섹션에서는 Google Workspace 부가기능과 원격 환경에서 실행됩니다

원격으로 디버그
환경

그림 9. 원격 환경에서 디버그합니다.

기본 요건

Google Workspace 부가기능이 배포 및 설치되었습니다.
디버거를 통해 원격 환경에서 실행되는 애플리케이션 특정 포트에서 사용 설정된 경우 REMOTE_DEBUG_PORT를 참조하세요.
로컬 환경이 원격 환경으로 ssh할 수 있습니다.
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 이 모듈의 디버깅 기능은 가이드를 참조하세요.

로컬 환경과 원격 환경 연결

디버그 클라이언트를 시작하려는 로컬 환경에서 SSH 터널을 설정합니다.

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

다음을 바꿉니다.

LOCAL_DEBUG_PORT: 로컬의 디버그 포트입니다. 환경입니다
REMOTE_USERNAME: 원격 환경의 사용자 이름입니다.
REMOTE_ADDRESS: 원격 환경의 주소입니다.
REMOTE_DEBUG_PORT: 리모컨의 디버그 포트입니다. 환경입니다

이제 로컬 환경의 디버그 포트가 원격 환경을 만들 수 있습니다

디버깅 시작하기

로컬 환경에 설치된 Visual Studio Code IDE에서 다음을 수행합니다. 있습니다.

새 창에서 앱의 소스 코드를 엽니다.

루트 디렉터리에 .vscode/launch.json 파일을 만들고 로컬의 디버그 포트에 연결되는 Debug Remote라는 이름의 실행 환경:

Node.js

{
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "attach",
        "name": "Debug Remote",
        "address": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

Python

{
    "version": "0.2.0",
    "configurations": [{
        "type": "python",
        "request": "attach",
        "name": "Debug Remote",
        "connect": {
            "host": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }
    }]
}

자바

{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Debug Remote",
        "hostName": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

LOCAL_DEBUG_PORT를 로컬 환경입니다.

앱의 소스 코드에 HTTP 요청을 일시중지하는 중단점 추가 실행을 시작하고 이전에 추가된 Debug Remote 구성으로 디버깅합니다.

설치된 Google Workspace 부가기능과 상호작용합니다. 내 Google Workspace 부가기능이 적극적으로 작동 중이므로 답장하지 않음 디버깅된 (Visual Studio Code IDE)

HTTP Google Workspace 부가기능 테스트 및 디버그

로컬 개발 환경에서 디버그

기본 요건

Node.js

Python

자바

로컬 호스트 서비스를 공개적으로 제공

부가기능 배포 만들기 및 설치

Google Workspace 부가기능 테스트하기

Node.js

Python

자바

원격 환경에서 디버그

기본 요건

로컬 환경과 원격 환경 연결

디버깅 시작하기

Node.js

Python

자바

관련 주제