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

Google Chat 앱 디버그

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

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

로컬 개발 환경에서 디버그

이 섹션에서는 채팅 앱에서 로컬 환경에서 실행됩니다

로컬 개발에서 디버그
환경

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

워크숍

Node.js

Python

자바

기본 요건

Node.js

node 및 npm의 최신 버전 설치됨 사용할 수 있습니다
로컬에 최신 버전의 nodemon이 설치됨 자동 새로고침 용도로 사용됩니다.
```
npm install -g nodemon
```
다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다. Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
Git 설치됨 사용할 수 있습니다
ngrok 계정

Python

python3의 최신 버전 설치됨 사용할 수 있습니다
최신 버전의 pip 및 virtualenv 설치 Python 패키지 및 가상 프라이빗 클라우드를 관리하는 데 사용됩니다. 각 환경에 따라 다릅니다
다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다. Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
Git 설치됨 사용할 수 있습니다
ngrok 계정
gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

자바

Java SE 11's JDK의 최신 안정화 버전 로컬에 설치됨 환경입니다
Apache Maven의 최신 버전 로컬 환경에 설치되어 있는 경우 Java 프로젝트를 관리하는 데 사용됩니다
다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다. Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)
디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
Git 설치됨 사용할 수 있습니다
ngrok 계정
gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

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

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

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

채팅 앱 구성

모든 HTTP 요청을 사용할 수 있습니다

Google Cloud 콘솔에서 Google Chat API 페이지를 엽니다.

Google Chat API 페이지로 이동
구성 탭을 클릭합니다.
양방향 기능으로 이동합니다. 연결 설정을 클릭하고 값을 설정합니다. 앱 URL을 변경하여 다음 단계를 따릅니다.
```
https://NGROK_STATIC_DOMAIN
```
NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정
저장을 클릭합니다.

채팅 앱은 모든 HTTP 요청을
정적 도메인

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

채팅 앱 테스트

Cloud Shell에서 채팅 앱

Node.js

GitHub에서 googleworkspace/google-chat-samples 저장소 클론 로컬 환경에 연결하고, 로컬 환경에서 실행되고, 실행합니다.
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. google-chat-samples/node/basic-app
2. 두 개의 코드를 추가하여 자동 새로고침 디버그용 애플리케이션 구성 package.json 파일에서 다음 스크립트를 실행합니다.
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
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 Chat을 엽니다.
  
  Google Chat으로 이동
- 새 채팅 을 클릭합니다.
- 대화상자에 채팅 앱
- 검색결과에서 Chat 앱을 찾습니다. 추가를 클릭합니다. > 채팅.
- 채팅 메시지 공간에서 Hello를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 다음과 같이 응답하지 않습니다. 있습니다
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 답글: Your message : Hello.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

그림 7. HTTP 요청이 ngrok 애플리케이션.
애플리케이션 동작을 변경하려면 Your message를 다음으로 바꿉니다. index.json의 Here was your message 인라인 35. 저장 시 nodemon는 자동으로 애플리케이션을 새로고침합니다. 소스 코드가 업데이트되고 Visual Studio Code가 디버그 모드로 유지됩니다.

그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)
이번에는 스페이스에서 두 번째 메시지(Hello)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 Replay를 클릭합니다. 지난번과 마찬가지로 채팅 앱이 응답하지 않습니다. 디버그되고 있기 때문입니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 Here was your message : Hello 메시지의 업데이트된 버전입니다.

Python

애플리케이션 기본값에 사용할 새로운 사용자 인증 정보를 획득합니다. 사용자 인증 정보:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
PROJECT_ID를 프로젝트 ID 앱 Cloud 프로젝트에 액세스할 수 있습니다
GitHub에서 googleworkspace/google-chat-samples 저장소 클론 로컬 환경에 배포하면 애플리케이션 코드가 포함됩니다.
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. google-chat-samples/python/avatar-app
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", "hello_chat",
            "--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 Chat을 엽니다.
  
  Google Chat으로 이동
- 새 채팅 을 클릭합니다.
- 대화상자에 채팅 앱
- 검색결과에서 Chat 앱을 찾습니다. 추가를 클릭합니다. > 채팅.
- 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 있습니다
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 내 이름과 아바타 사진을 메시지로 보낸 답장을 보냅니다.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

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

그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)
이번에는 스페이스에서 두 번째 메시지(Hey!)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 Replay를 클릭합니다. 지난번과 마찬가지로 채팅 앱에서 응답하지 않습니다. 디버그되고 있기 때문입니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 메시지의 업데이트된 버전입니다.

자바

애플리케이션 기본값에 사용할 새로운 사용자 인증 정보를 획득합니다. 사용자 인증 정보:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
PROJECT_ID를 프로젝트 ID 앱 Cloud 프로젝트에 액세스할 수 있습니다
GitHub에서 googleworkspace/google-chat-samples 저장소 클론 컨테이너에는 애플리케이션 코드가 포함되어 있습니다.
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
로컬 환경에 설치된 Visual Studio Code IDE에서 다음 명령어를 실행합니다. 다음을 수행하세요.
1. 새 창에서 폴더를 엽니다. google-chat-samples/java/avatar-app
2. HelloChat 애플리케이션을 실행하도록 Maven 프로젝트 구성 Cloud Functions 프레임워크 빌드를 추가하여 로컬로 포트 9000 pom.xml 파일의 function-maven-plugin 플러그인:
```
...
<plugin>
    <groupId>com.google.cloud.functions</groupId>
    <artifactId>function-maven-plugin</artifactId>
    <version>0.11.0</version>
    <configuration>
        <functionTarget>HelloChat</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 요청 처리를 일시 중지하는 중단점을 HelloChat.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 Chat을 엽니다.
  
  Google Chat으로 이동
- 새 채팅 을 클릭합니다.
- 대화상자에 채팅 앱
- 검색결과에서 Chat 앱을 찾습니다. 추가를 클릭합니다. > 채팅.
- 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 있습니다
로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 내 이름과 아바타 사진을 메시지로 보낸 답장을 보냅니다.
웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다. 로컬 환경의 ngrok 애플리케이션에서 호스팅합니다.

그림 7. HTTP 요청이 ngrok 애플리케이션
애플리케이션 동작을 변경하려면 Hello를 Hey 인라인으로 바꿉니다. HelloChat.java 파일의 55를 실행하고 mvnDebug 프로세스를 다시 시작합니다. Remote Debug Watch을(를) 다시 실행하여 다시 연결하고 다시 시작 디버깅을 참조하세요.
이번에는 스페이스에서 두 번째 메시지(Hey!)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 Replay를 클릭합니다. 지난번과 마찬가지로 채팅 앱이 응답하지 않습니다. 디버그되고 있기 때문입니다.
Visual Studio Code의 디버거에서 실행을 재개하는 경우 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 응답을 생성하는 로컬 환경에 메시지의 업데이트된 버전입니다.

원격 환경에서 디버그

이 섹션에서는 채팅 앱에서 원격 환경에서 실행됩니다

원격으로 디버그
환경

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

기본 요건

Chat 앱과의 채팅 메시지 스페이스 다음과 같은 작업을 할 수 있습니다. 섹션 팔로우 채팅 앱을 테스트합니다. 빠른 시작 가이드를 검색하고 채팅을 시작하려면 채팅 앱을 사용하세요.
디버거를 통해 원격 환경에서 실행되는 애플리케이션 특정 포트에서 사용 설정된 경우 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 구성으로 디버깅합니다.

채팅 앱의 채팅 메시지 스페이스에 다음을 입력합니다. enter 키를 누릅니다. 내 채팅 앱이 활발하게 작동하기 때문에 응답하지 않습니다. 디버깅된 (Visual Studio Code IDE)

Google Chat 앱 디버그

로컬 개발 환경에서 디버그

워크숍

Node.js

Python

자바

기본 요건

Node.js

Python

자바

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

채팅 앱 구성

채팅 앱 테스트

Node.js

Python

자바

원격 환경에서 디버그

기본 요건

로컬 환경과 원격 환경 연결

디버깅 시작하기

Node.js

Python

자바

관련 주제