웹 응용 프로그램 구성, 배치 및 테스트

웹 애플리케이션이 이 솔루션 플레이북의 예로 사용된 블록체인 네트워크 및 버킷을 가리키도록 구성되었습니다. 블록체인 네트워크 및 버킷을 가리키는 이 애플리케이션을 사용하려면 세부정보를 업데이트해야 합니다.

GitHub에서 웹 애플리케이션을 다운로드합니다. 웹 애플리케이션 예

Oracle Visual Builder Studio로 웹 애플리케이션 임포트

Oracle Visual Builder Studio는 Visual Builder 애플리케이션을 개발하는 데 사용될 뿐만 아니라 GIT 저장소, CI/CD 파이프라인 엔진, 아티팩트 생성, 컨테이너 저장소, 민첩한 도구, 팀 구축 도구 등과 같은 다양한 통합 개발 도구 덕분에 모든 종류의 최신 애플리케이션을 개발할 수 있습니다.

1. Oracle Cloud 웹 콘솔 탐색 메뉴에 사인인하고 OCI Classic Services로 이동한 다음 개발자를 누릅니다.
2. Oracle Visual Builder Studio 인스턴스 아이콘을 누른 다음 서비스 인스턴스 액세스를 누릅니다.

   주:

   기존 인스턴스가 없는 경우 새 인스턴스를 생성하고 생성될 때까지 기다렸다가 액세스합니다. 이 Visual Builder Studio 인스턴스의 URL을 다음 단계에서 사용되는 대로 저장합니다.
3. 새 프로젝트를 생성하려면 기본 페이지(조직)에서 + 생성을 누릅니다.
4. 프로젝트 이름을 입력하고 다음을 누릅니다.
5. 기존 Visual Builder 애플리케이션을 프로젝트 템플리트로 임포트하려면 비어 있는 프로젝트 옵션을 선택하고 다음을 누릅니다.
6. 마법사의 마지막 화면에서 기본 위키 마크업 언어를 그대로 두고 완료를 누릅니다. 새 프로젝트는 약 5분 내에 생성됩니다.
7. 프로젝트가 생성되면 프로젝트의 기본 페이지가 표시됩니다. 애플리케이션을 임포트하기 전에 애플리케이션을 구성하고 일시적으로 실행할 환경이 있어야 합니다. 환경 생성을 누릅니다.
8. 환경 이름, 설명을 입력하고 생성을 누릅니다.
   테넌시에 이미 Visual Builder 인스턴스가 있는 경우 인스턴스 추가를 눌러 이 환경에 추가합니다. Visual Builder 인스턴스가 없는 경우 하나를 프로비전하고 이 단계로 돌아가서 환경에 인스턴스를 추가합니다.
9. Visual Builder 인스턴스를 선택하고 추가를 누릅니다.
10. 환경이 프로젝트에 추가되면 미리 생성된 웹 애플리케이션을 임포트할 수 있는 Workspace를 생성합니다. 왼쪽 탐색 메뉴에서 작업 영역 메뉴 옵션을 선택합니다.
11. Visual Builder 웹 애플리케이션을 프로젝트로 임포트하여 작업영역을 생성할 수 있습니다. 임포트를 누릅니다.
12. 마법사에서 다음 세부정보를 제공합니다.
    • 미리 생성된 Visual Builder 웹 애플리케이션의 zip 파일입니다.
    • 작업 영역의 이름입니다.
    • 이전에 프로젝트에 구성한 환경을 선택하여 애플리케이션 테스트에 사용합니다.
    • 빈 Git 저장소를 새로 생성하고 이름과 기본 분기 이름을 지정합니다.
13. 임포트를 누릅니다.

블록체인 인스턴스를 가리키도록 웹 애플리케이션 구성

이 섹션에서는 이전 섹션에서 생성한 블록체인 인스턴스를 가리키도록 제공된 웹 애플리케이션을 구성합니다.

생성한 블록체인 네트워크에서 다음 정보를 기록해 둡니다.

• BC 끝점
• 인스턴스 이름
• 채널
• 체인코드

1. Visual Builder Studio에 액세스할 때 시작(조직)하는 기본 페이지에서 프로젝트 이름을 눌러 생성한 프로젝트를 Visual Builder Studio 인스턴스에 액세스하고 엽니다.
2. 웹 애플리케이션을 임포트할 때 생성한 작업영역을 선택한 다음 다음 이미지 및 단계에 표시된 대로 웹 앱을 선택합니다.
   
   
   그림 oci-vbs.png에 대한 설명
   
   
   1. 웹 앱 섹션을 선택합니다.
   2. 웹 앱을 선택합니다.
3. 변수 탭으로 이동하고 각 변수에 대한 기본값 속성의 오른쪽 상단 모서리에 있는 f(x) 기호를 눌러 변수 bcEndpoint, bcInstance, chaincode 및 channel의 기본값을 변경합니다.

오브젝트 스토리지 버킷을 가리키도록 웹 애플리케이션 구성

이 섹션에서는 이전에 생성한 API 키 및 버킷 값을 기반으로 웹 애플리케이션에서 사용하도록 오브젝트 스토리지 버킷을 구성합니다.

1. Visual Builder Studio에 액세스할 때 시작(조직)하는 기본 페이지에서 프로젝트 이름을 눌러 생성한 프로젝트를 Visual Builder Studio 인스턴스에 액세스하고 엽니다.
2. 서비스 접속 섹션을 선택한 다음 fileUpload 서비스 접속을 선택합니다.
3. 서버 탭으로 이동하고 서버 구성 오른쪽에 있는 연필 아이콘을 눌러 fileUpload 서비스 연결의 구성을 변경합니다.
   버킷과 상호 작용하는 데 사용되는 서비스 연결 구성은 세 곳에서 조정해야 합니다.
4. 서버 편집 화면에서 다음 필드를 업데이트합니다.
   • 인스턴스 URL: OCI 테넌시의 몇 가지 속성과 버킷 생성 시 제공한 이름을 기반으로 버킷을 가리키도록 변경해야 합니다. URL은 다음 URL 템플리트를 기반으로 작성되어야 합니다.

     https://objectstorage.<region-name>.oraclecloud.com/n/<storage-namespace>/b/<bucket-name>

   • 인증: 인증 방법이 Oracle Cloud Infrastructure API Signature 1.0으로 설정되어 있는지, 키 ID 속성 오른쪽에 있는 연필 아이콘을 눌러 키가 설정되어 있는지 확인해야 합니다.

     주:

     키 ID는 다음 템플리트를 기반으로 구성됩니다.

     <Tenancy-OCID>/<User-OCID>/<Key-Fingerprint>
     

     OCI 버킷 스토리지 구성 중 API 키가 생성될 때 얻은 구성 파일 미리보기에서 이 모든 값에 액세스할 수 있습니다. 전용 키는 API 키 생성 중 사용 또는 생성하거나 다운로드한 전용 키입니다(선택한 옵션에 따라 다름).
   • 접속 유형: 동적, 서비스 지원 CORS로 설정해야 합니다.

   버킷 및 API 키에 따라 이러한 세 가지 속성이 제대로 구성되면 웹 애플리케이션이 스토리지 버킷과 상호 작용할 준비가 완료된 것입니다. 계속해서 웹 응용 프로그램 테스트를 진행할 수 있습니다.

웹 애플리케이션 테스트

이제 프로젝트에 구성된 Visual Builder 환경에서 애플리케이션을 테스트할 수 있습니다. 모든 것이 제대로 작동하면 웹 응용 프로그램을 앞으로 이동하여 독립형 구성에 배치할 수 있습니다.

이 웹 애플리케이션은 솔루션에 사용된 두 가지 백엔드(폴더 및 문서 메타데이터를 저장하는 블록체인)와 문서 콘텐츠에 대한 OCI 스토리지의 버킷과 상호 작용합니다. 따라서 웹 애플리케이션을 통해 두 백엔드(블록체인 및 버킷)에 모두 액세스할 수 있는지 확인하는 몇 가지 기능을 테스트하려고 합니다.

1. 애플리케이션을 테스트하려면 Visual Studio Workspace의 오른쪽 상단 모서리에 있는 [미리보기] 아이콘을 누릅니다.
2. 애플리케이션에 폴더 관리자로 로그인하면 사용자가 현재 소유자인 폴더에 액세스하거나, 현재 관리인이 될 새 폴더를 생성하거나, 폴더에 문서를 더 추가하거나, 전체 폴더를 다른 사용자 또는 부서로 전송할 수 있습니다.
   폴더를 생성하고 문서를 업로드해 보겠습니다.
3. 역할이 폴더 관리자로 설정되도록 사용자(cmsleg001, cmsfin001 또는 cmsrsk001) 중 하나로 로그인하고 로그인을 누릅니다.
4. 폴더 관리 페이지에서 새 폴더를 누릅니다.
5. 세 개의 입력 필드(폴더 유형, 설명 및 고객 ID)에 값을 지정하고 폴더 생성을 누릅니다.
6. Oracle Blockchain Service 콘솔에서 채널 탭으로 이동하고 wedocms 채널을 선택한 다음 원장에 저장된 마지막 블록의 콘텐츠를 확인합니다. 여기에는 방금 실행한 트랜잭션 실행 요청이 포함되어야 합니다.
7. 문서를 새로 생성된 폴더로 업로드할 수 있는지 테스트하려면 폴더를 선택하고 문서 업로드를 누릅니다.
8. 이 폴더에 업로드된 문서가 없는 경우 새 문서 업로드를 누릅니다.
9. 문서 유형을 선택하고 문서 이름을 입력한 다음, 파일을 선택하거나 PDF 파일을 끌어 놓기 영역에 놓고 동적 속성을 추가한 다음 문서 업로드를 누릅니다.

이 새 트랜잭션이 실행되고 문서가 OCI 스토리지 버킷에 업로드된 경우 Oracle Blockchain 콘솔에서 검토할 수 있습니다. 문서 검토자로 로그인하면 앱에 액세스할 수 있는 모든 사용자가 폴더에서 업로드된 문서를 검토할 수 있습니다.

독립형 시스템에서 실행할 응용 프로그램 엑스포트

다음 단계에서는 애플리케이션을 익스포트하고 Visual Builder 외부에 배치할 익스포트 가능한 패키지를 다운로드하는 방법에 대해 설명합니다.

일부 조건을 충족하는 경우 Visual Builder 애플리케이션은 Visual Builder 컨텍스트 외부에서 실행할 수 있습니다. 자세한 내용은 다른 서버(및 온프레미스)에서 Visual Builder 앱 실행 및 Visual Builder 외부에서 Visual Builder 앱 실행 블로그를 참조하십시오.

1. 애플리케이션을 익스포트하려면 Git 저장소로 변경사항을 푸시합니다. 작업 영역의 왼쪽 위에서 저장소/분기 단위 메뉴를 누르고 푸시 옵션을 선택합니다.
2. 커밋 메시지를 입력하고 모두 커밋 및 푸시를 누릅니다.
   이 작업을 처음 실행할 때는 빌드 실행기를 기다리는 데 몇 분이 걸릴 수 있지만 빌드 실행기가 작업을 선택하면 약 3분 내에 실행되고 Git 푸시 성공 팝업 메시지가 표시되어야 합니다.
3. 이 시점에서 애플리케이션을 게시할 수 있으며, 이 작업은 최적의 조건에서 실행되도록 애플리케이션을 최적화하기 위해 빌드 작업을 트리거합니다. [작업 영역] 페이지의 오른쪽 상단 모서리에서 게시를 누릅니다.
4. 변경 사항 게시 대화상자에서 지금 병합 또는 검토 후 병합을 선택한 다음 게시를 누릅니다.
5. 인증서를 입력하고 인증서 추가 및 계속을 누릅니다.
6. 빌드 시작됨 팝업 창에서 작업 열기를 누릅니다.
7. 아티팩트를 눌러 생성된 패키지를 봅니다.
8. built-assets.zip를 눌러 패키지를 다운로드하면 내보내기 가능한 패키지를 Visual Builder 외부에 배치할 준비가 됩니다.

내보낸 패키지를 Apache Tomcat 서버로 실행합니다.

built-assets.zip 패키지는 Apache Tomcat 서버에서 직접 제공하도록 배포할 수 있습니다.

1. 설치 후 Apache Tomcat Server를 시작하고 URL http://localhost:8080에 액세스하여 작동하는지 확인합니다.
2. built-assets.zip 패키지의 압축을 풀고 zip의 콘텐츠를 /webapps 폴더 내에 생성된 새 폴더로 복사하여 Tomcat에 애플리케이션을 설치할 수 있습니다.
3. Tomcat 설치의 webapps 폴더에 애플리케이션이 배치되면 Tomcat을 다시 시작하고 다음 URL에 액세스하려고 시도할 수 있습니다. http://localhost:8080/<folder-name-inside-webapps>/webApps/docmngmt/
   이제 로컬 환경에서 응용 프로그램을 테스트할 수 있습니다.