Google Chat 앱 개발자는 변경사항을 테스트하거나 복잡한 문제를 해결하기 위해 코드를 디버그해야 할 수 있습니다. 채팅 앱 디버깅은 앱의 아키텍처, 앱의 기능, 앱 배포 방법, 환경설정에 따라 다양한 방법으로 실행할 수 있습니다.
이 페이지에서는 로컬 개발 환경을 테스트하는 데 사용할 수 있는 통합 인그레스 플랫폼인 ngrok을 사용하여 HTTP 채팅 앱을 디버그하는 방법을 설명합니다. 이 가이드에서는 로컬 환경에서 코드 변경사항을 테스트하고 원격 환경의 문제를 해결합니다.
로컬 개발 환경에서 디버그
이 섹션에서는 로컬 환경에서 실행되는 채팅 앱과 상호작용합니다.
그림 1. 로컬 개발 환경에서 디버그합니다.
워크숍
Node.js
Python
Java
기본 요건
Node.js
- 로컬 환경에 최신 버전의
node
및npm
가 설치되었습니다. 로컬 환경에 설치된 최신 버전의
nodemon
는 자동 새로고침 용도로 사용됩니다.npm install -g nodemon
메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은
Debug App
로, 앱 URL은http://example.com
와 같은 값으로 설정해야 한다는 것입니다.디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해
Visual Studio Code
IDE와 기본 디버깅 기능을 사용합니다.Git
가 로컬 환경에 설치되어 있어야 합니다.ngrok
계정
Python
- 로컬 환경에 최신 버전의
python3
가 설치되었습니다. - 로컬 환경에 설치된 최신 버전의
pip
및virtualenv
은 각각 Python 패키지와 가상 환경을 관리하는 데 사용됩니다. - 메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은
Debug App
로, 앱 URL은http://example.com
와 같은 값으로 설정해야 한다는 것입니다. - 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해
Visual Studio Code
IDE와 기본 디버깅 기능을 사용합니다. Git
가 로컬 환경에 설치되어 있어야 합니다.ngrok
계정- 로컬 환경에 최신 버전의
gcloud
가 설치되고 초기화되었습니다.
Java
- 로컬 환경에 설치된
Java SE 11's JDK
의 최신 안정화 버전입니다. - 로컬 환경에 설치된 최신 버전의
Apache Maven
으로, Java 프로젝트를 관리하는 데 사용됩니다. - 메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은
Debug App
로, 앱 URL은http://example.com
와 같은 값으로 설정해야 한다는 것입니다. - 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해
Visual Studio Code
IDE와 기본 디버깅 기능을 사용합니다. Git
가 로컬 환경에 설치되어 있어야 합니다.ngrok
계정- 로컬 환경에 최신 버전의
gcloud
가 설치되고 초기화되었습니다.
로컬 호스트 서비스를 공개적으로 제공
채팅 앱에서 액세스할 수 있도록 로컬 환경을 인터넷에 연결해야 합니다. ngrok
애플리케이션은 공개 URL에 대한 HTTP 요청을 로컬 환경으로 리디렉션하는 데 사용됩니다.
- 로컬 환경의 브라우저에서
ngrok
계정에 로그인합니다. - 애플리케이션을 설치하고 로컬 환경에서
authtoken
을 설정합니다. ngrok
계정에서 정적 도메인을 만듭니다. 이 가이드의 안내에서NGROK_STATIC_DOMAIN
로 참조됩니다.
채팅 앱 구성
모든 HTTP 요청을 정적 도메인으로 보내도록 채팅 앱을 구성합니다.
Google Cloud 콘솔에서 Google Chat API 페이지를 엽니다.
구성 탭을 클릭합니다.
양방향 기능 > 연결 설정으로 이동하고 텍스트 필드 앱 URL의 값을 다음과 같이 설정합니다.
https://NGROK_STATIC_DOMAIN
NGROK_STATIC_DOMAIN
을ngrok
계정의 정적 도메인으로 바꿉니다.저장을 클릭합니다.
그림 2. 채팅 앱은 모든 HTTP 요청을 정적 도메인으로 보냅니다. ngrok
공개 서비스는 채팅 앱과 로컬에서 실행되는 애플리케이션 코드 간의 브리지 역할을 합니다.
채팅 앱 테스트
채팅 앱을 로컬에서 배포, 구성, 테스트, 디버그, 자동 새로고침할 수 있습니다.
Node.js
GitHub에서 로컬 환경으로
googleworkspace/google-chat-samples
저장소를 클론합니다. 이 저장소에는 실행할 애플리케이션의 코드가 포함됩니다.git clone https://github.com/googleworkspace/google-chat-samples.git
로컬 환경에 설치된
Visual Studio Code
IDE에서 다음을 수행합니다.- 새 창에서
google-chat-samples/node/basic-app
폴더를 엽니다. package.json
파일에 두 스크립트를 추가하여 자동 새로고침 디버그를 위해 애플리케이션을 구성합니다.{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
루트 디렉터리에서 애플리케이션을 설치합니다.
npm install
루트 디렉터리에
.vscode/launch.json
파일을 만들어debug-watch
스크립트를 트리거하는Debug Watch
라는 실행을 만들고 구성합니다.{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
index.js
파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된Debug Watch
구성으로 실행과 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트9000
에서 HTTP 요청을 리슨합니다.그림 3. 애플리케이션이 실행 중이고 포트
9000
에서 HTTP 요청을 리슨합니다.
- 새 창에서
로컬 환경에서
ngrok
애플리케이션을 실행합니다.ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
을ngrok
계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.그림 4.
ngrok
서버가 실행 중이고 리디렉션하는 터미널또한 웹 인터페이스는 localhost에서
ngrok
애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.그림 5.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.채팅 메시지를 보내 채팅 앱을 테스트합니다.
Google Chat을 엽니다.
새 채팅
을 클릭합니다.대화상자에 채팅 앱의 이름을 입력합니다.
검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.
채팅 메시지 공간에서
Hello
를 입력하고enter
키를 누릅니다. 채팅 앱이 적극적으로 디버그되고 있기 때문에 응답하지 않습니다.
로컬 환경의
Visual Studio Code
에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Google Chat이 타임아웃되기 전에
Visual Studio Code
의 디버거에서 실행을 재개하면 채팅 앱이Your message : Hello
을 반환합니다.로컬 환경에서
ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.그림 7.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청애플리케이션 동작을 변경하려면
Your message
를index.json
의Here was your message
인라인35
로 바꿉니다. 파일을 저장하면nodemon
가 업데이트된 소스 코드로 애플리케이션을 자동으로 새로고침하고Visual Studio Code
는 디버그 모드를 유지합니다.그림 8. 애플리케이션이 실행되고 코드 변경사항이 로드된 포트
9000
에서 HTTP 요청을 리슨합니다.이번에는 공간에서 두 번째 메시지
Hello
를 보내는 대신 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고Replay
를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그되고 있으므로 응답하지 않습니다.Visual Studio Code
의 디버거에서 실행을 재개하면 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의Here was your message : Hello
메시지로 응답을 생성하는 것을 확인할 수 있습니다.
Python
애플리케이션 기본 사용자 인증 정보에 사용할 새로운 사용자 인증 정보를 가져옵니다.
gcloud config set project PROJECT_ID gcloud auth application-default login
PROJECT_ID
를 앱의 Cloud 프로젝트에 대한 프로젝트 ID로 바꿉니다.GitHub에서 로컬 환경으로
googleworkspace/google-chat-samples
저장소를 클론합니다. 이 저장소에는 애플리케이션 코드가 포함됩니다.git clone https://github.com/googleworkspace/google-chat-samples.git
로컬 환경에 설치된
Visual Studio Code
IDE에서 다음을 수행합니다.- 새 창에서
google-chat-samples/python/avatar-app
폴더를 엽니다. Python
env
의 새 가상 환경을 만들고 활성화합니다.virtualenv env
source env/bin/activate
가상 환경에서
pip
를 사용하여 모든 프로젝트 종속 항목을 설치합니다.pip install -r requirements.txt
루트 디렉터리에
.vscode/launch.json
파일을 만들고env
가상 환경env
의 디버그 모드로 포트9000
의functions-framework
모듈에서 애플리케이션을 트리거하는Debug Watch
라는 실행을 구성합니다.{ "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" ] }] }
main.py
파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된Debug Watch
구성으로 실행과 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트9000
에서 HTTP 요청을 리슨합니다.그림 3. 애플리케이션이 실행 중이고 포트
9000
에서 HTTP 요청을 리슨합니다.
- 새 창에서
로컬 환경에서
ngrok
애플리케이션을 실행합니다.ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
을ngrok
계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.그림 4.
ngrok
서버가 실행 중이고 리디렉션하는 터미널또한 웹 인터페이스는 localhost에서
ngrok
애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.그림 5.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.채팅 메시지를 보내 채팅 앱을 테스트합니다.
Google Chat을 엽니다.
새 채팅
을 클릭합니다.대화상자에 채팅 앱의 이름을 입력합니다.
검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.
채팅 메시지 공간에서
Hey!
를 입력하고enter
키를 누릅니다. 채팅 앱이 적극적으로 디버그 중이기 때문에 응답하지 않습니다.
로컬 환경의
Visual Studio Code
에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Google Chat 타임아웃 전에
Visual Studio Code
의 디버거에서 실행을 재개하면 채팅 앱이 메시지의 이름과 아바타 사진으로 응답합니다.로컬 환경에서
ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.그림 7.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청애플리케이션 동작을 변경하려면
Hello
를main.py
파일의Hey
인라인51
로 바꿉니다. 파일을 저장하면Visual Studio Code
가 업데이트된 소스 코드로 애플리케이션을 자동으로 새로고침하고 디버그 모드를 유지합니다.그림 8. 애플리케이션이 실행되고 코드 변경사항이 로드된 포트
9000
에서 HTTP 요청을 리슨합니다.이번에는 공간에서 두 번째 메시지
Hey!
를 보내는 대신 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고Replay
를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그 중이기 때문에 응답하지 않습니다.Visual Studio Code
의 디버거에서 실행을 재개하면 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 메시지로 응답을 생성하는 것을 확인할 수 있습니다.
Java
애플리케이션 기본 사용자 인증 정보에 사용할 새로운 사용자 인증 정보를 가져옵니다.
gcloud config set project PROJECT_ID gcloud auth application-default login
PROJECT_ID
를 앱의 Cloud 프로젝트에 대한 프로젝트 ID로 바꿉니다.애플리케이션 코드가 포함된 로컬 환경의 GitHub에서
googleworkspace/google-chat-samples
저장소를 클론합니다.git clone https://github.com/googleworkspace/google-chat-samples.git
로컬 환경에 설치된
Visual Studio Code
IDE에서 다음을 수행합니다.- 새 창에서
google-chat-samples/java/avatar-app
폴더를 엽니다. pom.xml
파일에 Cloud Functions 프레임워크 빌드 플러그인function-maven-plugin
를 추가하여 포트9000
에서 로컬로 애플리케이션HelloChat
를 실행하도록 Maven 프로젝트를 구성합니다.... <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> ...
이제 로컬에서 디버그 모드로 실행할 수 있습니다.
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
루트 디렉터리에
.vscode/launch.json
파일을 만들고 이전에 포트8000
로 시작된 애플리케이션에 연결되는Remote Debug Watch
라는 시작을 구성합니다.{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
HelloChat.java
파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된Remote Debug Watch
구성을 사용하여 연결 및 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트9000
에서 HTTP 요청을 리슨합니다.그림 3. 이 애플리케이션이 실행 중이고
9000
포트에서 HTTP 요청을 수신 대기하고 있습니다.
- 새 창에서
로컬 환경에서
ngrok
애플리케이션을 실행합니다.ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
을ngrok
계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.그림 4.
ngrok
서버가 실행 중이고 리디렉션하는 터미널또한 웹 인터페이스는 localhost에서
ngrok
애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.그림 5.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.채팅 메시지를 보내 채팅 앱을 테스트합니다.
Google Chat을 엽니다.
새 채팅
을 클릭합니다.대화상자에 채팅 앱의 이름을 입력합니다.
검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.
채팅 메시지 공간에서
Hey!
를 입력하고enter
키를 누릅니다. 채팅 앱이 적극적으로 디버그 중이기 때문에 응답하지 않습니다.
로컬 환경의
Visual Studio Code
에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.그림 6. 설정된 중단점에서 실행이 일시중지됩니다.
Google Chat 타임아웃 전에
Visual Studio Code
의 디버거에서 실행을 재개하면 채팅 앱이 메시지의 이름과 아바타 사진으로 응답합니다.로컬 환경에서
ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.그림 7.
ngrok
애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청애플리케이션 동작을 변경하려면
Hello
를HelloChat.java
파일의Hey
인라인55
로 바꾸고mvnDebug
프로세스를 다시 시작한 다음Remote Debug Watch
를 다시 실행하여 다시 연결하고 디버깅을 다시 시작합니다.이번에는 공간에서 두 번째 메시지
Hey!
를 보내는 대신 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고Replay
를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그되고 있으므로 응답하지 않습니다.Visual Studio Code
의 디버거에서 실행을 재개하면 로컬 환경의ngrok
애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 메시지로 응답을 생성하는 것을 확인할 수 있습니다.
원격 환경에서 디버그
이 섹션에서는 원격 환경에서 실행되는 채팅 앱과 상호작용합니다.
그림 9. 원격 환경에서 디버그합니다.
기본 요건
- 채팅 앱의 채팅 메시지 공간입니다. 빠른 시작 가이드의 채팅 앱 테스트 섹션에 따라 채팅 앱을 검색하여 시작할 수 있습니다.
- 지정된 포트에서 디버거가 사용 설정된 원격 환경에서 실행되는 애플리케이션은 이 가이드의 안내에서
REMOTE_DEBUG_PORT
로 참조됩니다. - 로컬 환경이 원격 환경으로
ssh
할 수 있습니다. - 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해
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 } }] }
Java
{ "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에서 현재 디버깅되고 있으므로 채팅 앱이 응답하지 않습니다.
관련 주제
- 오류 로그를 enable하고 쿼리하는 방법을 알아보세요.
- '앱이 응답하지 않음', 'Google Chat API는 Google Workspace 사용자만 사용할 수 있음' 또는 '스페이스에서 사용자를 제외할 수 있음'과 같은 Google Chat 앱 오류를 해결하는 방법 알아보기
- 카드 메시지, 대화상자, 링크 미리보기가 예상대로 렌더링되지 않거나 작동하지 않는 것과 같은 카드 오류를 해결하는 방법을 알아보세요.