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

Node.js

• 로컬 환경에 설치된 최신 버전의 node 및 npm

• 로컬 환경에 최신 버전의 nodemon이 설치되어 있어야 합니다. 자동 충전 목적으로 사용됩니다.

  npm install -g nodemon

• Google Cloud 프로젝트. 빠른 시작 가이드의 기본 요건 및 환경 설정 섹션을 따르세요.

• 로컬 환경에서 디버그할 Google Workspace 부가기능의 코드입니다. 이 가이드에서는 설명 목적으로 GitHub 저장소 googleworkspace/add-ons-samples의 코드 예 3p-resources에 있는 미리보기 링크 기능을 사용합니다.

• 디버깅할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명 목적으로 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.

• ngrok 계정

• 로컬 환경에 최신 버전의 gcloud이(가) 설치되고 초기화되어 있어야 합니다.

Python

• 로컬 환경에 설치된 최신 버전의 python3
• 로컬 환경에 설치된 최신 버전의 pip 및 virtualenv 각각 Python 패키지와 가상 환경을 관리하는 데 사용됩니다.
• Google Cloud 프로젝트. 빠른 시작 가이드의 기본 요건 및 환경 설정 섹션을 따르세요.
• 로컬 환경에서 디버그할 Google Workspace 부가기능의 코드입니다. 이 가이드에서는 설명 목적으로 GitHub 저장소 googleworkspace/add-ons-samples의 코드 예 3p-resources에 있는 미리보기 링크 기능을 사용합니다.
• 디버깅할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명 목적으로 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.
• ngrok 계정
• 로컬 환경에 최신 버전의 gcloud이(가) 설치되고 초기화되어 있어야 합니다.

자바

• 로컬 환경에 설치된 Java SE 11's JDK의 최신 안정화 버전입니다.
• 로컬 환경에 설치된 최신 버전의 Apache Maven Java 프로젝트를 관리하는 데 사용됩니다.
• Google Cloud 프로젝트. 빠른 시작 가이드의 기본 요건 및 환경 설정 섹션을 따르세요.
• 로컬 환경에서 디버그할 Google Workspace 부가기능의 코드입니다. 이 가이드에서는 설명 목적으로 GitHub 저장소 googleworkspace/add-ons-samples의 코드 예 3p-resources에 있는 미리보기 링크 기능을 사용합니다.
• 디버깅할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명 목적으로 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.
• ngrok 계정
• 로컬 환경에 최신 버전의 gcloud이(가) 설치되고 초기화되어 있어야 합니다.

Node.js

1. 로컬 환경에 설치된 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. 루트 디렉터리에 .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"]
          }]
      }
      

   5. index.js 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가한 Debug Watch 구성으로 실행 및 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 수신 대기합니다.

      

2. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

3. ngrok 애플리케이션에 의해 localhost에서 웹 인터페이스도 시작됩니다. 브라우저에서 열어 모든 활동을 모니터링할 수 있습니다.

   

4. 테스터 계정으로 새 Google 문서에서 케이스 URL을 미리보기하여 Google Workspace 부가기능을 테스트합니다.

   • Google 문서를 만듭니다.

     Google 문서 만들기

   • 다음 링크를 입력하고 enter 키를 누릅니다.

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • 링크를 클릭합니다.

5. 로컬 환경의 Visual Studio Code에서 실행이 설정된 중단점에서 일시중지된 것을 확인할 수 있습니다.

   

6. Google Workspace 부가기능이 시간 초과되기 전에 Visual Studio Code 디버거에서 실행을 재개하면 Google Workspace 부가기능이 캐시에서 Google 문서의 링크 미리보기를 표시합니다.

7. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

8. 애플리케이션 동작을 변경하려면 index.js의 51 행에서 Case을 Case:로 바꿉니다. 파일을 저장하면 nodemon가 업데이트된 소스 코드로 애플리케이션을 자동으로 다시 로드하고 Visual Studio Code는 디버그 모드로 유지됩니다.

   

9. 이번에는 링크를 클릭하고 새 Google 문서에서 몇 초 동안 기다리는 대신 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay을 클릭합니다. 지난번과 마찬가지로 Google Workspace 부가기능이 적극적으로 디버깅되고 있어 답장하지 않습니다.

10. Visual Studio Code 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 미리보기 카드로 응답을 생성하는 것을 확인할 수 있습니다.

Python

1. 로컬 환경에 설치된 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 파일을 만들고 가상 환경 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", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. main.py 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가한 Debug Watch 구성으로 실행 및 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 수신 대기합니다.

      

2. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

3. ngrok 애플리케이션에 의해 localhost에서 웹 인터페이스도 시작됩니다. 브라우저에서 열어 모든 활동을 모니터링합니다.

   

4. 테스터 계정으로 새 Google 문서에서 케이스 URL을 미리보기하여 Google Workspace 부가기능을 테스트합니다.

   • Google 문서를 만듭니다.

     Google 문서 만들기

   • 다음 링크를 입력하고 enter 키를 누릅니다.

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • 링크를 클릭합니다.

5. 로컬 환경의 Visual Studio Code에서 실행이 설정된 중단점에서 일시중지된 것을 확인할 수 있습니다.

   

6. Google Workspace 부가기능이 시간 초과되기 전에 Visual Studio Code 디버거에서 실행을 재개하면 Google Workspace 부가기능이 캐시에서 Google 문서의 링크 미리보기를 표시합니다.

7. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

8. 애플리케이션 동작을 변경하려면 main.py 파일의 56 행에서 Case를 Case:로 바꿉니다. 파일을 저장하면 Visual Studio Code가 업데이트된 소스 코드로 애플리케이션을 자동으로 다시 로드하고 디버그 모드로 유지됩니다.

   

9. 이번에는 링크를 클릭하고 새 Google 문서에서 몇 초 동안 기다리는 대신 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay을 클릭합니다. 지난번과 마찬가지로 Google Workspace 부가기능이 적극적으로 디버깅되고 있어 답장하지 않습니다.

10. Visual Studio Code 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 미리보기 카드로 응답을 생성하는 것을 확인할 수 있습니다.

자바

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

   1. 새 창에서 add-ons-samples/java/3p-resources 폴더를 엽니다.

   2. pom.xml 파일에 Cloud Functions Framework 빌드 플러그인 function-maven-plugin을 추가하여 로컬에서 포트 9000에서 애플리케이션 CreateLinkPreview을 실행하도록 Maven 프로젝트를 구성합니다.

      ...
      <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 파일을 만들고 포트 8000에서 이전에 실행된 애플리케이션에 연결되는 Remote Debug Watch이라는 실행을 구성합니다.

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. CreateLinkPreview.java 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가한 Remote Debug Watch 구성으로 연결 및 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 수신 대기합니다.

      

2. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

3. ngrok 애플리케이션에 의해 localhost에서 웹 인터페이스도 시작됩니다. 브라우저에서 열어 모든 활동을 모니터링합니다.

   

4. 테스터 계정으로 새 Google 문서에서 케이스 URL을 미리보기하여 Google Workspace 부가기능을 테스트합니다.

   • Google 문서를 만듭니다.

     Google 문서 만들기

   • 다음 링크를 입력하고 enter 키를 누릅니다.

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • 링크를 클릭합니다.

5. 로컬 환경의 Visual Studio Code에서 실행이 설정된 중단점에서 일시중지된 것을 확인할 수 있습니다.

   

6. Google Workspace 부가기능이 시간 초과되기 전에 Visual Studio Code 디버거에서 실행을 재개하면 Google Workspace 부가기능이 캐시에서 Google 문서의 링크 미리보기를 표시합니다.

7. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

8. 애플리케이션 동작을 변경하려면 CreateLinkPreview.java 파일의 78 행에서 Case을 Case:로 바꾸고 mvnDebug 프로세스를 다시 시작하고 Remote Debug Watch을 다시 실행하여 디버깅을 다시 연결하고 다시 시작합니다.

9. 이번에는 링크를 클릭하고 새 Google 문서에서 몇 초 동안 기다리는 대신 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay을 클릭합니다. 지난번과 마찬가지로 Google Workspace 부가기능이 적극적으로 디버깅되고 있어 답장하지 않습니다.

10. Visual Studio Code 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션에서 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 미리보기 카드로 응답을 생성하는 것을 확인할 수 있습니다.