Oracle JET 가상 DOM 앱 배치 준비

소개

이 사용지침서에서는 배포를 위해 Oracle JET(Oracle JavaScript Extension Toolkit) 가상 DOM 앱을 준비하는 방법을 보여줍니다.

HTML 모음이 포함된 Oracle JET 가상 DOM 앱, JSX 구문(TSX)을 사용하는 TypeScript 파일 및 CSS(Cascading Style Sheets) 파일을 모든 유형의 웹 또는 Application Server에 배치할 수 있습니다. 배포 방법은 앱이 실행되는 서버 환경의 유형에 따라 다릅니다.

Oracle JET 가상 DOM 앱을 배치하려면 특정 환경에서 다른 클라이언트 인터페이스를 배치하는 데 사용하는 것과 동일한 방법을 사용할 수 있습니다.

Oracle JET 명령행 인터페이스 패키지(npx @oracle/ojet-cli create JET-Virtual-DOM-app --template=basic --vdom)의 명령으로 생성하는 가상 DOM 앱에는 빌드 프로세스에 대한 새 단계를 정의하는 데 사용할 수 있는 후크 스크립트 템플리트 파일의 디렉토리가 포함되어 있습니다. 예를 들어, 가상 DOM 앱 /web 디렉토리를 ZIP 파일 또는 WAR 파일로 아카이브하는 후크 스크립트를 만들 수 있습니다. 이 after_build 스크립트는 빌드 프로세스가 완료된 후에 실행됩니다.

이 자습서에서는 특정 환경 및 플랫폼에 종속된 배치 단계를 설명하지 않습니다.

목표

이 자습서에서는 가상 DOM 앱의 /web 디렉토리를 ZIP 파일 또는 WAR 파일로 아카이브하는 방법에 대해 알아봅니다. 또한 Oracle JET 앱 빌드 프로세스의 일부로 아카이빙을 자동화하도록 가상 DOM 앱을 수정하는 방법을 배웁니다.

필수 조건

작업 1: after_build 후크 스크립트 생성

수정하는 제공된 후크 스크립트 템플리트 파일을 사용하여 after_build 후크 스크립트를 생성합니다.

  1. JET-Virtual-DOM-app/scripts/hooks 디렉토리로 이동하고 편집기에서 after_build.js 후크 스크립트 템플리트 파일을 엽니다.

  2. after-build-js.txt 코드 조각을 복사하고 템플리트 파일의 내용을 복사된 코드 조각으로 바꿉니다.

작업 2: after_build 후크 스크립트 수정

가상 DOM 앱에 대해 생성할 아카이브 파일의 유형을 지정하도록 후크 스크립트를 수정합니다. 후크 스크립트는 동일한 압축 방법을 사용하여 ZIP 파일과 WAR 파일을 만듭니다. 출력 파일의 확장자를 지정하도록 after_build 후크 스크립트를 수정합니다(기본적으로 .war).

  1. after_build.js 파일에서 적절한 확장자인 .zip 또는 .war를 사용하도록 fs.createWriteStream()에 전달된 파일 이름을 편집합니다.
    • WAR 파일을 생성하려면 파일 이름을 my-archive.war로 지정합니다. 
      const output = fs.createWriteStream('my-archive.war');
    • ZIP 파일을 생성하려면 파일 이름을 my-archive.zip로 지정합니다. 
      const output = fs.createWriteStream('my-archive.zip');
  2. 파일 이름을 변경하지 않고 after_build.js 파일을 저장합니다. /scripts/hooks 디렉토리에 있는 후크 스크립트의 파일 이름은 다양한 Oracle JET 빌드 후크 포인트에 해당합니다.

작업 3: 릴리스 모드로 앱 빌드

릴리스 모드에서 가상 DOM 앱을 빌드할 때 build --release 명령은 /web/ 디렉토리의 라이브러리 및 스크립트의 개발 버전을 축소된 버전으로 바꿉니다. 빌드 프로세스가 완료되면 빌드는 after_build 후크 스크립트를 실행하고 /web 디렉토리의 내용을 아카이브합니다.

  1. 터미널 window를 열고 JET-Virtual-DOM-app 디렉토리로 변경한 다음 archiver npm 패키지를 설치합니다.

    npm install archiver

    그러면 JET-Virtual-DOM-app 프로젝트에 archiver npm 패키지가 설치됩니다. after_build.js 후크는 이 패키지를 사용하여 가상 DOM 앱을 아카이브합니다.

  2. 터미널 창을 열고 JET-Virtual-DOM-app 디렉토리로 변경한 다음 릴리스 모드에서 가상 DOM 앱을 빌드합니다.

    npx ojet build web --release

    빌드 프로세스는 /scripts/hooks 디렉토리에 있는 후크 스크립트를 트리거하고 완료하는 데 몇 분 정도 걸립니다.

  3. 확인을 기다립니다.

    . . .
Running after_build hook.
Success: Build finished.
Files were successfully archived.

  4. JET-Virtual-DOM-app 디렉토리로 이동하여 후크 스크립트로 생성된 아카이브 파일을 찾습니다. 예를 들어, my-archive.war라는 WAR 파일을 생성하도록 after_build 후크 스크립트를 수정한 경우 해당 이름의 WAR 파일이 앱 루트 디렉토리에 나타납니다.

    Oracle JET 가상 DOM 앱의 루트 디렉토리에 있는 WAR 파일

다음단계

이 자습서에서는 가상 DOM 웹 앱 구축에 대한 이 학습 경로에서 첫번째 Oracle JET 가상 DOM 앱 모듈을 완료합니다.

구성 요소 작성 모듈에서 학습 경로의 다음 자습서인 상위 컨테이너 1 및 작업 컨테이너 구성요소 생성으로 이동할 수 있습니다.

또한 가상 DOM 학습 경로의 기본 페이지로 돌아가 가상 DOM 앱 구축 시 모든 모듈에 액세스할 수 있습니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 랩을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 액세스하세요. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer가 되십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.