স্প্রিং বুটের সাথে এঙ্গুলার ২ বা এর পরবর্তি ভার্সন ব্যাবহার করা

angulardesignspring-boot

এঙ্গুলার 1.x ছিল খুব সাধারণ জাভাস্ক্রিপ্ট ফ্রেমোয়ার্ক। স্প্রিং বা স্প্রিং বুটের পাবলিক ফোল্ডারে এঙ্গুলার ফাইল রেখেই যেকোন সারভার সাইড স্ক্রিপ্টের সাথে কাজ করা যেত। এঙ্গুলার ২ থেকে সেই সুবিধা আর নেই। কোড টাইপ-স্ক্রিপ্ট থেকে জাভা-স্ক্রিপ্টে কম্পাইল করে তারপর কাজ করতে হয় প্রোডাকশন। তাই ব্যাপারটা আর আগের মত সহজ নেই।



যেহেতু এঙ্গুলার কমপ্লিট ফ্রন্টেড সল্যুশন, তাই সব থেকে ভাল উপায় হচ্ছে আলাদা করে একটা সার্ভারে এঙ্গুলার চালানো আর ব্যাকেন্ড হবে রেস্ট এ পি আই। যদি আধুনিক ডেপ্লয়মেন্ট আকারে করতে চান, তাহলে ফ্রন্টেন্ডের জন্য একটা বা বেশি ডকার ডেপলয় করতে হবে। কিন্তু যদি আমাদের কাজ খুব সাধারণ টাইপের হয়, একটা বা দুটা পেজ থেকে CRUD অপারেশন করা, তাহলে পারসোনাল প্রজেক্টে আলাদা ডেপ্লয়মেনট একটু খরুচে।


খরচ কমানো একটা ভাল উপায় হচ্ছে ফ্রন্টেন্ড কম্পাইল করা ফাইল স্প্রিং বুটের public বা static ফোল্ডারে কপি করে দেয়া। এই বুদ্বি কাজ করে। তারমানে হচ্ছে UI ডেভেলপমেন্ট এর সময় ng serve দিয়ে লোকাল সার্ভার চালিয়ে ডেভেলপ করব এবং ফাইনালি সব কিছু কম্পাইল করে স্প্রিং বুটের static ডিরেক্টরিতে পেস্ট করে দিব।

.
├── Dockerfile
├── Jenkinsfile
├── README.md
├── build-ui.sh
├── pom.xml
├── res
├── src
├── target
└── ui



উপড়ের স্ট্রুাকচার থেকে বুজাই যাচ্ছে ui হচ্ছে আমার এঙ্গুলার ওয়ার্কিং ডিরেক্টরি। যখন লোকালি UI ডেভেলপ করি তখন ui এর ভিতরে প্রবেশ করে ng serve দিয়ে কাজ করি। UI ডেভেলপ কমপ্লিট হয়ে গেলে নিচের কমান্ড চালিয়ে দেই।


build-ui.sh

echo "Building ui ...."
cd ui
ng build --prod
cd ..

echo "Copying ui binary to the server...."
rm -r src/main/resources/static/*
cp -r ui/dist/*  src/main/resources/static/