jhipster sample app
1.0.0
แอปพลิเคชันนี้สร้างขึ้นโดยใช้ JHipster 8.7.3 คุณสามารถค้นหาเอกสารและความช่วยเหลือได้ที่ https://www.jhipster.tech/documentation-archive/v8.7.3
จำเป็นต้องมีโหนดสำหรับการสร้างและแนะนำสำหรับการพัฒนา package.json ถูกสร้างขึ้นเสมอเพื่อประสบการณ์การพัฒนาที่ดีขึ้นด้วย Pretier, Commit Hooks, สคริปต์ และอื่นๆ
ในรูทโปรเจ็กต์ JHipster จะสร้างไฟล์การกำหนดค่าสำหรับเครื่องมือต่างๆ เช่น git, prettier, eslint, husky และอื่นๆ ที่รู้จักกันดี และคุณสามารถค้นหาข้อมูลอ้างอิงบนเว็บได้
/src/* โครงสร้างเป็นไปตามโครงสร้าง Java เริ่มต้น
.yo-rc.json - ไฟล์การกำหนดค่า Yeoman การกำหนดค่า JHipster ถูกเก็บไว้ในไฟล์นี้ที่คีย์ generator-jhipster คุณอาจพบ generator-jhipster-* สำหรับการกำหนดค่าพิมพ์เขียวเฉพาะ
.yo-resolve (ไม่บังคับ) - ตัวแก้ไขข้อขัดแย้งของ Yeoman อนุญาตให้ใช้การดำเนินการเฉพาะเมื่อพบข้อขัดแย้ง โดยข้ามพร้อมท์สำหรับไฟล์ที่ตรงกับรูปแบบ แต่ละบรรทัดควรจับคู่ [pattern] [action] โดยมีรูปแบบเป็นรูปแบบการจับคู่ขั้นต่ำ และการกระทำเป็นแบบข้าม (ค่าเริ่มต้น หากละไว้) หรือแรง บรรทัดที่ขึ้นต้นด้วย # ถือเป็นความคิดเห็นและจะถูกละเว้น
.jhipster/*.json - ไฟล์การกำหนดค่าเอนทิตี JHipster
npmw - wrapper เพื่อใช้ npm ที่ติดตั้งในเครื่อง JHipster ติดตั้ง Node และ npm ในเครื่องโดยใช้เครื่องมือสร้างตามค่าเริ่มต้น Wrapper นี้ทำให้แน่ใจว่ามีการติดตั้ง npm ในเครื่อง และใช้งานเพื่อหลีกเลี่ยงความแตกต่างบางประการที่อาจทำให้เกิดเวอร์ชันต่างๆ ด้วยการใช้ ./npmw แทน npm แบบเดิม คุณสามารถกำหนดค่าสภาพแวดล้อมแบบไม่มีโหนดเพื่อพัฒนาหรือทดสอบแอปพลิเคชันของคุณได้
/src/main/docker - การกำหนดค่านักเทียบท่าสำหรับแอปพลิเคชันและบริการที่แอปพลิเคชันนั้นขึ้นอยู่กับ
ระบบบิลด์จะติดตั้ง Node และ npm เวอร์ชันที่แนะนำโดยอัตโนมัติ
เราจัดเตรียม wrapper เพื่อเปิดใช้งาน npm คุณจะต้องเรียกใช้คำสั่งนี้เมื่อการขึ้นต่อกันเปลี่ยนแปลงใน package.json เท่านั้น
./npmw install
เราใช้สคริปต์ npm และ Angular CLI กับ Webpack เป็นระบบบิลด์ของเรา
เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลสองแห่งที่แยกจากกันเพื่อสร้างประสบการณ์การพัฒนาที่น่าพึงพอใจ โดยที่เบราว์เซอร์ของคุณจะรีเฟรชอัตโนมัติเมื่อไฟล์มีการเปลี่ยนแปลงในฮาร์ดไดรฟ์ของคุณ
./mvnw
./npmw start
Npm ยังใช้เพื่อจัดการการพึ่งพา CSS และ JavaScript ที่ใช้ในแอปพลิเคชันนี้ คุณสามารถอัปเกรดการพึ่งพาได้โดยการระบุเวอร์ชันที่ใหม่กว่าใน package.json คุณยังสามารถเรียกใช้ ./npmw update และ ./npmw install เพื่อจัดการการขึ้นต่อกัน เพิ่ม help ในคำสั่งใดๆ เพื่อดูว่าคุณสามารถใช้งานได้อย่างไร ตัวอย่างเช่น . ./npmw help update
คำสั่ง ./npmw run จะแสดงรายการสคริปต์ทั้งหมดที่พร้อมให้รันสำหรับโปรเจ็กต์นี้
JHipster มาพร้อมกับการรองรับ PWA (Progressive Web App) และจะถูกปิดใช้งานตามค่าเริ่มต้น องค์ประกอบหลักอย่างหนึ่งของการประปาส่วนภูมิภาคคือพนักงานบริการ
รหัสการเริ่มต้นของพนักงานบริการถูกปิดใช้งานตามค่าเริ่มต้น หากต้องการเปิดใช้งาน ให้ยกเลิกหมายเหตุโค้ดต่อไปนี้ใน src/main/webapp/app/app.config.ts :
ServiceWorkerModule . register ( 'ngsw-worker.js' , { enabled : false } ) ,ตัวอย่างเช่น หากต้องการเพิ่มไลบรารี Leaflet เป็นการพึ่งพารันไทม์ของแอปพลิเคชันของคุณ คุณจะต้องเรียกใช้คำสั่งต่อไปนี้:
./npmw install --save --save-exact leaflet
เพื่อให้ได้รับประโยชน์จากคำจำกัดความประเภท TypeScript จากพื้นที่เก็บข้อมูล SureTyped ในการพัฒนา คุณจะต้องเรียกใช้คำสั่งต่อไปนี้:
./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 เพื่อสร้างโค้ดไคลเอ็นต์ที่กำหนดเองได้
ตัวอย่างเช่น คำสั่งต่อไปนี้:
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 ในการผลิตสำหรับรายละเอียดเพิ่มเติม
หากต้องการจัดแพ็กเกจแอปพลิเคชันของคุณให้เป็นสงครามเพื่อปรับใช้กับแอปพลิเคชันเซิร์ฟเวอร์ ให้รัน:
./mvnw -Pprod,war clean verify
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 แบบ end-to-end ขับเคลื่อนโดย Cypress ตั้งอยู่ใน src/test/javascript/cypress และสามารถเรียกใช้โดยเริ่ม Spring Boot ในเทอร์มินัลหนึ่ง ( ./mvnw spring-boot:run ) และรันการทดสอบ ( ./npmw run e2e ) ในอันที่สอง
คุณสามารถดำเนินการตรวจสอบ Lighthouse อัตโนมัติด้วย cypress-audit ได้โดยการรัน ./npmw run e2e:cypress:audits คุณควรดำเนินการตรวจสอบเฉพาะเมื่อแอปพลิเคชันของคุณถูกรวมเข้ากับโปรไฟล์การใช้งานจริงเท่านั้น รายงานประภาคารถูกสร้างขึ้นใน target/cypress/lhreport.html
Sonar ใช้เพื่อวิเคราะห์คุณภาพโค้ด คุณสามารถเริ่มต้นเซิร์ฟเวอร์ Sonar ในเครื่องได้ (เข้าถึงได้จาก http://localhost:9001) ด้วย:
docker compose -f src/main/docker/sonar.yml up -d
หมายเหตุ: เราได้ปิดการเปลี่ยนเส้นทางการรับรองความถูกต้องแบบบังคับสำหรับ UI ใน src/main/docker/sonar.yml สำหรับประสบการณ์นอกกรอบขณะทดลองใช้ SonarQube สำหรับกรณีการใช้งานจริง ให้เปิดใช้งานอีกครั้ง
คุณสามารถเรียกใช้การวิเคราะห์โซนาร์ได้โดยใช้เครื่องสแกนโซนาร์หรือโดยใช้ปลั๊กอิน Maven
จากนั้น เรียกใช้การวิเคราะห์โซนาร์:
./mvnw -Pprod clean verify sonar:sonar -Dsonar.login=admin -Dsonar.password=admin
หากคุณต้องการรันเฟสโซนาร์อีกครั้ง โปรดแน่ใจว่าได้ระบุเฟส initialize เป็นอย่างน้อย เนื่องจากคุณสมบัติของโซนาร์ถูกโหลดจากไฟล์ sonar-project.properties
./mvnw initialize sonar:sonar -Dsonar.login=admin -Dsonar.password=admin
นอกจากนี้ แทนที่จะส่ง sonar.password และ sonar.login เป็นอาร์กิวเมนต์ CLI พารามิเตอร์เหล่านี้สามารถกำหนดค่าได้จาก sonar-project.properties ดังที่แสดงด้านล่าง:
sonar.login=admin
sonar.password=admin
สำหรับข้อมูลเพิ่มเติม โปรดดูที่หน้าคุณภาพโค้ด
JHipster สร้างไฟล์การกำหนดค่า Docker Compose จำนวนหนึ่งในโฟลเดอร์ src/main/docker/ เพื่อเปิดใช้งานบริการของบุคคลที่สามที่จำเป็น
ตัวอย่างเช่น หากต้องการเริ่มบริการที่จำเป็นในคอนเทนเนอร์ Docker ให้รัน:
docker compose -f src/main/docker/services.yml up -d
หากต้องการหยุดและนำคอนเทนเนอร์ออก ให้รัน:
docker compose -f src/main/docker/services.yml down
Spring Docker Compose Integration ถูกเปิดใช้งานตามค่าเริ่มต้น คุณสามารถปิดการใช้งานได้ใน application.yml:
spring :
...
docker :
compose :
enabled : falseคุณยังสามารถเชื่อมต่อแอปพลิเคชันของคุณและบริการทั้งหมดที่ต้องพึ่งพาได้อย่างสมบูรณ์ เพื่อให้บรรลุเป้าหมายนี้ ขั้นแรกให้สร้างอิมเมจ Docker ของแอปของคุณโดยเรียกใช้:
npm run java:dockerหรือสร้างอิมเมจ arm64 Docker เมื่อใช้ระบบปฏิบัติการโปรเซสเซอร์ arm64 เช่น MacOS ที่ใช้ตระกูลโปรเซสเซอร์ M1:
npm run java:docker:arm64จากนั้นเรียกใช้:
docker compose -f src/main/docker/app.yml up -d สำหรับข้อมูลเพิ่มเติม โปรดดูที่การใช้ Docker และ Docker-Compose หน้านี้ยังมีข้อมูลเกี่ยวกับตัวสร้างย่อย Docker Compose ( jhipster docker-compose ) ซึ่งสามารถสร้างการกำหนดค่า Docker สำหรับแอปพลิเคชัน JHipster หนึ่งรายการหรือหลายรายการได้
หากต้องการกำหนดค่า CI สำหรับโปรเจ็กต์ของคุณ ให้เรียกใช้ตัวสร้างย่อย ci-cd ( jhipster ci-cd ) ซึ่งจะช่วยให้คุณสร้างไฟล์การกำหนดค่าสำหรับระบบการรวมอย่างต่อเนื่องจำนวนหนึ่ง ดูหน้าการตั้งค่าการรวมอย่างต่อเนื่องสำหรับข้อมูลเพิ่มเติม
