jhipster sample app

jhipsterサンプルアプリケーション

このアプリケーションは JHipster 8.7.3 を使用して生成されており、ドキュメントとヘルプは https://www.jhipster.tech/documentation-archive/v8.7.3 で見つけることができます。

プロジェクトの構造

ノードは生成に必要であり、開発には推奨されます。 package.json 、よりきれいなコミットフック、スクリプトなどを使用して開発エクスペリエンスを向上させるために常に生成されます。

JHipster は、プロジェクト ルートで、git、prettier、eslint、husky などのよく知られているツールの構成ファイルを生成し、Web でリファレンスを見つけることができます。

/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使用すると、アプリケーションを開発またはテストするためのノードレス環境を構成できます。

• /src/main/docker - アプリケーションとアプリケーションが依存するサービスの Docker 構成

発達

ビルド システムは、推奨バージョンの Node と npm を自動的にインストールします。

npm を起動するためのラッパーを提供します。このコマンドを実行する必要があるのは、package.json の依存関係が変更された場合のみです。

 ./npmw install

私たちは npm スクリプトと Angular CLI をビルド システムとして Webpack とともに使用します。

2 つの別々のターミナルで次のコマンドを実行して、ハード ドライブ上のファイルが変更されるとブラウザが自動更新される至福の開発エクスペリエンスを作成します。

 ./mvnw
./npmw start

Npm は、このアプリケーションで使用される CSS と JavaScript の依存関係を管理するためにも使用されます。 package.json で新しいバージョンを指定することで、依存関係をアップグレードできます。 ./npmw updateおよび./npmw install実行して依存関係を管理することもできます。コマンドの使用方法を確認するには、コマンドにhelpフラグを追加します。たとえば、 ./npmw help update 。

./npmw runコマンドは、このプロジェクトで実行できるすべてのスクリプトをリストします。

PWAのサポート

JHipster には PWA (プログレッシブ Web アプリ) サポートが付属しており、デフォルトではオフになっています。 PWA の主要コンポーネントの 1 つはサービス ワーカーです。

Service Worker の初期化コードはデフォルトでは無効になっています。これを有効にするには、 src/main/webapp/app/app.config.ts内の次のコードのコメントを解除します。

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

依存関係の管理

たとえば、アプリケーションのランタイム依存関係として Leaflet ライブラリを追加するには、次のコマンドを実行します。

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

開発時に DefinitelyTyped リポジトリの TypeScript 型定義を活用するには、次のコマンドを実行します。

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

次に、ライブラリのインストール手順で指定された JS ファイルと CSS ファイルをインポートして、Webpack がそれらのファイルを認識できるようにします。 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 の使用」を参照してください。

Angular 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

Jヒップスター コントロール センター

JHipster Control Center は、アプリケーションの管理と制御に役立ちます。次のコマンドを使用して、ローカル コントロール センター サーバー (http://localhost:7419 でアクセス可能) を起動できます。

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

テスト

Spring Boot テスト

アプリケーションのテストを開始するには、次を実行します。

 ./mvnw verify

ガトリング

パフォーマンス テストは Gatling によって実行され、Scala で記述されます。これらは src/test/java/gatling/simulations にあります。

すべてのガトリング テストは次のコマンドで実行できます。

 ./mvnw gatling:test

クライアントテスト

単体テストは Jest によって実行されます。これらは src/test/javascript/ にあり、次のコマンドで実行できます。

 ./npmw test

UI エンドツーエンド テストは Cypress によって強化されています。これらは src/test/javascript/cypress にあり、1 つのターミナル ( ./mvnw spring-boot:run ) で Spring Boot を開始し、2 番目のターミナルでテスト ( ./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 の強制認証リダイレクトをオフにしました。実際の使用例では、オンに戻します。

ソナースキャナーまたは Maven プラグインを使用して、ソナー分析を実行できます。

次に、ソナー分析を実行します。

 ./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 化することもできます。これを実現するには、まず次のコマンドを実行してアプリの 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 の使用」を参照してください。このページには、1 つまたは複数の JHipster アプリケーションの Docker 構成を生成できる Docker Compose サブジェネレーター ( jhipster docker-compose ) に関する情報も含まれています。

継続的インテグレーション (オプション)

プロジェクトの CI を構成するには、ci-cd サブジェネレーター ( jhipster ci-cd ) を実行します。これにより、多数の継続的インテグレーション システムの構成ファイルを生成できます。詳細については、「継続的インテグレーションのセットアップ」ページを参照してください。