jhipster sample app

jhipster샘플신청

이 애플리케이션은 JHipster 8.7.3을 사용하여 생성되었습니다. https://www.jhipster.tech/documentation-archive/v8.7.3에서 설명서와 도움말을 찾을 수 있습니다.

프로젝트 구조

노드는 생성에 필요하고 개발에 권장됩니다. package.json 더 예쁘고 커밋 후크, 스크립트 등을 사용하여 더 나은 개발 환경을 위해 항상 생성됩니다.

프로젝트 루트에서 JHipster는 git, prettier, eslint, husky 및 기타 잘 알려진 도구에 대한 구성 파일을 생성하며 웹에서 참조를 찾을 수 있습니다.

/src/* 구조는 기본 Java 구조를 따릅니다.

• .yo-rc.json - Yeoman 구성 파일 JHipster 구성은 이 파일의 generator-jhipster 키에 저장됩니다. 특정 청사진 구성에 대해서는 generator-jhipster-* 찾을 수 있습니다.

• .yo-resolve (선택 사항) - Yeoman 충돌 해결 프로그램 충돌이 발견되면 패턴과 일치하는 파일에 대한 프롬프트를 건너뛰고 특정 작업을 사용할 수 있습니다. 각 줄은 [pattern] [action] 과 일치해야 하며 패턴은 Minimatch 패턴이고 작업은 건너뛰기(생략된 경우 기본값) 또는 강제 중 하나여야 합니다. # 으로 시작하는 줄은 주석으로 간주되어 무시됩니다.

• .jhipster/*.json - JHipster 엔터티 구성 파일

• npmw - 로컬에 설치된 npm을 사용하기 위한 래퍼입니다. JHipster는 기본적으로 빌드 도구를 사용하여 로컬로 Node와 npm을 설치합니다. 이 래퍼는 npm이 로컬에 설치되어 있는지 확인하고 이를 사용하여 버전별로 발생할 수 있는 일부 차이를 방지합니다. 기존 npm 대신 ./npmw 를 사용하면 Node-less 환경을 구성하여 애플리케이션을 개발하거나 테스트할 수 있습니다.

• /src/main/docker - 애플리케이션이 의존하는 애플리케이션 및 서비스에 대한 Docker 구성

개발

빌드 시스템은 권장 버전의 Node 및 npm을 자동으로 설치합니다.

우리는 npm을 시작하기 위한 래퍼를 제공합니다. package.json에서 종속성이 변경되는 경우에만 이 명령을 실행하면 됩니다.

 ./npmw install

우리는 빌드 시스템으로 Webpack과 함께 npm 스크립트와 Angular CLI를 사용합니다.

두 개의 별도 터미널에서 다음 명령을 실행하여 하드 드라이브의 파일이 변경될 때 브라우저가 자동으로 새로 고쳐지는 행복한 개발 환경을 만드세요.

 ./mvnw
./npmw start

Npm은 이 애플리케이션에 사용되는 CSS 및 JavaScript 종속성을 관리하는 데에도 사용됩니다. package.json에서 최신 버전을 지정하여 종속성을 업그레이드할 수 있습니다. ./npmw update 및 ./npmw install 실행하여 종속성을 관리할 수도 있습니다. 명령에 help 플래그를 추가하여 사용 방법을 확인하세요. 예를 들어 ./npmw help update .

./npmw run 명령은 이 프로젝트에 대해 실행할 수 있는 모든 스크립트를 나열합니다.

PWA 지원

JHipster는 PWA(Progressive Web App) 지원과 함께 제공되며 기본적으로 꺼져 있습니다. PWA의 주요 구성 요소 중 하나는 서비스 워커입니다.

서비스 워커 초기화 코드는 기본적으로 비활성화되어 있습니다. 이를 활성화하려면 src/main/webapp/app/app.config.ts 에서 다음 코드의 주석 처리를 제거하세요.

 ServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled : false } ) ,

종속성 관리

예를 들어 Leaflet 라이브러리를 애플리케이션의 런타임 종속성으로 추가하려면 다음 명령을 실행합니다.

 ./npmw install --save --save-exact leaflet

개발 시 확실히 유형이 지정된 저장소의 TypeScript 유형 정의를 활용하려면 다음 명령을 실행합니다.

 ./npmw install --save-dev --save-exact @types/leaflet

그런 다음 Webpack이 알 수 있도록 라이브러리 설치 지침에 지정된 JS 및 CSS 파일을 가져옵니다. src/main/webapp/app/app.config.ts 파일을 편집합니다.

 import 'leaflet/dist/leaflet.js';

src/main/webapp/content/scss/vendor.scss 파일을 편집합니다:

 @import 'leaflet/dist/leaflet.css';

참고: Leaflet에 대해 수행해야 할 몇 가지 다른 작업이 아직 남아 있지만 여기에서는 자세히 설명하지 않습니다.

JHipster를 사용하여 개발하는 방법에 대한 자세한 지침은 개발 시 JHipster 사용을 참조하세요.

각도 CLI 사용

Angular CLI를 사용하여 일부 사용자 정의 클라이언트 코드를 생성할 수도 있습니다.

예를 들어 다음 명령은 다음과 같습니다.

 ng generate component my-component

몇 가지 파일을 생성합니다.

 create src/main/webapp/app/my-component/my-component.component.html
create src/main/webapp/app/my-component/my-component.component.ts
update src/main/webapp/app/app.config.ts

생산을 위한 건물

항아리로 포장

최종 jar를 빌드하고 프로덕션을 위해 jhipsterSampleApplication 애플리케이션을 최적화하려면 다음을 실행하세요.

 ./mvnw -Pprod clean verify

이렇게 하면 클라이언트 CSS와 JavaScript 파일이 연결되고 축소됩니다. 또한 index.html 수정하여 이러한 새 파일을 참조하게 됩니다. 모든 것이 제대로 작동하는지 확인하려면 다음을 실행하세요.

 java -jar target/*.jar

그런 다음 브라우저에서 http://localhost:8080으로 이동합니다.

자세한 내용은 프로덕션에서 JHipster 사용을 참조하세요.

전쟁으로 포장

애플리케이션 서버에 배포하기 위해 애플리케이션을 war로 패키징하려면 다음을 실행하세요.

 ./mvnw -Pprod,war clean verify

JHipster 제어 센터

JHipster Control Center는 애플리케이션을 관리하고 제어하는 ​​데 도움을 줄 수 있습니다. 다음을 사용하여 로컬 제어 센터 서버(http://localhost:7419에서 액세스 가능)를 시작할 수 있습니다.

 docker compose -f src/main/docker/jhipster-control-center.yml up

테스트

스프링 부트 테스트

애플리케이션 테스트를 시작하려면 다음을 실행하세요.

 ./mvnw verify

개틀링

성능 테스트는 Gatling으로 실행되고 Scala로 작성됩니다. src/test/java/gatling/simulations에 있습니다.

다음을 사용하여 모든 Gatling 테스트를 실행할 수 있습니다.

 ./mvnw gatling:test

클라이언트 테스트

단위 테스트는 Jest에 의해 실행됩니다. src/test/javascript/에 있으며 다음과 같이 실행할 수 있습니다.

 ./npmw test

UI 엔드투엔드 테스트는 Cypress에서 제공됩니다. 이는 src/test/javascript/cypress에 있으며 한 터미널( ./mvnw spring-boot:run )에서 Spring Boot를 시작하고 두 번째 터미널에서 테스트( ./npmw run e2e )를 실행하여 실행할 수 있습니다.

등대 감사

./npmw run e2e:cypress:audits 실행하여 cypress-audit로 자동화된 Lighthouse 감사를 실행할 수 있습니다. 애플리케이션이 프로덕션 프로필과 함께 패키지된 경우에만 감사를 실행해야 합니다. Lighthouse 보고서는 target/cypress/lhreport.html 에 생성됩니다.

기타

Sonar를 사용한 코드 품질

Sonar는 코드 품질을 분석하는 데 사용됩니다. 다음을 사용하여 로컬 Sonar 서버(http://localhost:9001에서 액세스 가능)를 시작할 수 있습니다.

 docker compose -f src/main/docker/sonar.yml up -d

참고: SonarQube를 시험해 보는 동안 즉시 사용 가능한 경험을 위해 src/main/docker/sonar.yml에서 UI에 대한 강제 인증 리디렉션을 꺼두었습니다. 실제 사용 사례에서는 다시 켭니다.

sonar-scanner 또는 maven 플러그인을 사용하여 Sonar 분석을 실행할 수 있습니다.

그런 다음 Sonar 분석을 실행합니다.

 ./mvnw -Pprod clean verify sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

Sonar 단계를 다시 실행해야 하는 경우 Sonar 속성이 sonar-project.properties 파일에서 로드되므로 최소한 initialize 단계를 지정해야 합니다.

 ./mvnw initialize sonar:sonar -Dsonar.login=admin -Dsonar.password=admin

또한 sonar.password 및 sonar.login CLI 인수로 전달하는 대신 아래와 같이 sonar-project.properties에서 이러한 매개변수를 구성할 수 있습니다.

 sonar.login=admin
sonar.password=admin

자세한 내용은 코드 품질 페이지를 참조하세요.

Docker Compose 지원

JHipster는 src/main/docker/ 폴더에 여러 Docker Compose 구성 파일을 생성하여 필요한 타사 서비스를 시작합니다.

예를 들어 Docker 컨테이너에서 필요한 서비스를 시작하려면 다음을 실행합니다.

 docker compose -f src/main/docker/services.yml up -d

컨테이너를 중지하고 제거하려면 다음을 실행합니다.

 docker compose -f src/main/docker/services.yml down

Spring Docker Compose 통합은 기본적으로 활성화됩니다. application.yml에서 비활성화할 수 있습니다.

 spring :
  ...
  docker :
    compose :
      enabled : false

또한 애플리케이션과 애플리케이션이 의존하는 모든 서비스를 완전히 도킹화할 수도 있습니다. 이를 달성하려면 먼저 다음을 실행하여 앱의 Docker 이미지를 빌드하세요.

npm run java:docker

또는 M1 프로세서 제품군이 실행되는 MacOS와 같은 arm64 프로세서 OS를 사용할 때 arm64 Docker 이미지를 빌드하십시오.

npm run java:docker:arm64

그런 다음 다음을 실행하십시오.

docker compose -f src/main/docker/app.yml up -d

자세한 내용은 Docker 및 Docker-Compose 사용을 참조하세요. 이 페이지에는 하나 이상의 JHipster 애플리케이션에 대한 Docker 구성을 생성할 수 있는 Docker Compose 하위 생성기( jhipster docker-compose )에 대한 정보도 포함되어 있습니다.

지속적인 통합(선택 사항)

프로젝트에 대한 CI를 구성하려면 ci-cd 하위 생성기( jhipster ci-cd )를 실행하세요. 그러면 여러 지속적 통합 시스템에 대한 구성 파일을 생성할 수 있습니다. 자세한 내용은 지속적인 통합 설정 페이지를 참조하세요.