{"id":84459,"date":"2024-11-19T08:32:50","date_gmt":"2024-11-19T05:02:50","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/end-to-end-system-design-for-a-react-java-cosmos-db-application-3kmj\/"},"modified":"2024-11-19T08:32:50","modified_gmt":"2024-11-19T05:02:50","slug":"end-to-end-system-design-for-a-react-java-cosmos-db-application-3kmj","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/end-to-end-system-design-for-a-react-java-cosmos-db-application-3kmj\/","title":{"rendered":"\u0637\u0631\u0627\u062d\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0627\u0646\u062a\u0647\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React + Java + Cosmos DB"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React + Java \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0628\u0627 Cosmos DB \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0627\u0644\u0627\u060c \u062a\u0623\u062e\u06cc\u0631 \u06a9\u0645 \u0648 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0648\u062f\u0646 \u0686\u0646\u062f \u0645\u0646\u0637\u0642\u0647 \u062f\u0627\u0631\u0646\u062f \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0627\u0633\u062a. \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u0631\u0627\u062d\u0644 \u0639\u0645\u0644\u06cc \u062a\u0642\u0633\u06cc\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

1. \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u0648 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f\u06cc \u0647\u0627<\/p>\n

\u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0627\u0644\u0632\u0627\u0645\u0627\u062a<\/p>\n

Frontend Needs:<\/p>\n

\u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u0648\u06cc\u0627
\n\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc.
\n\u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0635\u0631\u06cc<\/p>\n

\u0646\u06cc\u0627\u0632\u0647\u0627\u06cc Backend:<\/p>\n

API \u0647\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631
\n\u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627
\n\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0648 \u067e\u0631\u062f\u0627\u0632\u0634 \u0627\u0645\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627<\/p>\n

\u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647:<\/p>\n

\u0633\u0627\u062e\u062a\u0627\u0631 NoSQL \u0628\u0631\u0627\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc.
\n\u062a\u0623\u062e\u06cc\u0631 \u06a9\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062c\u0647\u0627\u0646\u06cc.
\n\u0633\u0637\u0648\u062d \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u062a\u0631\u0627\u06a9\u0646\u0634.<\/p>\n

\u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc<\/p>\n

Frontend: React.js \u0628\u0627 TypeScript (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)\u060c Redux \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a.<\/p>\n

Backend: \u062c\u0627\u0648\u0627 \u0628\u0627 Spring Boot.<\/p>\n

\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647: Azure Cosmos DB.<\/p>\n

\u0627\u0631\u062a\u0628\u0627\u0637: API \u0647\u0627\u06cc RESTful.<\/p>\n

\u0627\u0633\u062a\u0642\u0631\u0627\u0631: Docker + Kubernetes.<\/p>\n

2. \u0637\u0631\u0627\u062d\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc<\/p>\n

\u0645\u0639\u0645\u0627\u0631\u06cc \u0633\u0637\u062d \u0628\u0627\u0644\u0627<\/p>\n

Frontend: \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a\u060c \u0645\u0635\u0631\u0641 API \u0648 UI \u067e\u0648\u06cc\u0627.<\/p>\n

Backend: Java Spring Boot \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 API RESTful.<\/p>\n

\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647: Cosmos DB \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0648 \u067e\u0627\u0631\u062a\u06cc\u0634\u0646 \u0628\u0646\u062f\u06cc \u0634\u062f\u0647.<\/p>\n

\u0627\u0631\u062a\u0628\u0627\u0637: API \u0647\u0627\u06cc REST \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 JSON \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0646 \u0638\u0627\u0647\u0631 \u0648 \u0628\u0627\u0637\u0646.<\/p>\n

3. \u062a\u0648\u0633\u0639\u0647 Frontend<\/p>\n

\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0648\u0634\u0647<\/p>\n

\u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u067e\u0631\u0648\u0698\u0647 React \u0628\u0631\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc:<\/p>\n

src\/
\n\u251c\u2500\u2500 components\/ # Reusable UI components
\n\u251c\u2500\u2500 pages\/ # Page-level components
\n\u251c\u2500\u2500 hooks\/ # Custom React hooks
\n\u251c\u2500\u2500 context\/ # Global state management using Context API
\n\u251c\u2500\u2500 services\/ # API calls
\n\u251c\u2500\u2500 styles\/ # CSS\/SCSS files
\n\u251c\u2500\u2500 App.js # Root component
\n\u2514\u2500\u2500 index.js # Entry point<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f react-router-dom \u0628\u0631\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc:<\/p>\n

import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;<\/p>\n

function App() {
\n return (
\n <Router>
\n <Routes>
\n <Route path=”\/” element={<Home \/>} \/>
\n <Route path=”\/users” element={<UserList \/>} \/>
\n <\/Routes>
\n <\/Router>
\n );
\n}<\/p>\n

export default App;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc<\/p>\n

\u0628\u06cc\u0646 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f Redux \u06cc\u0627 Context API:<\/p>\n

\u0627\u0632 Redux \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u0645\u0631\u06a9\u0632 \u062d\u0627\u0644\u062a \u062f\u0627\u0631\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.
\n\u0627\u0632 Context API \u0628\u0631\u0627\u06cc \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u062d\u0627\u0644\u062a \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

4. \u062a\u0648\u0633\u0639\u0647 Backend<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0648\u062a \u0628\u0647\u0627\u0631<\/p>\n

\u0628\u0627 Maven \u06cc\u0627 Gradle \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Spring Boot \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f:<\/p>\n

com.azure.spring
\n spring-cloud-azure-starter-data-cosmos<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/p>\n

\u0628\u0627\u0637\u0646 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

src\/main\/java\/com\/example\/
\n\u251c\u2500\u2500 controller\/ # REST Controllers
\n\u251c\u2500\u2500 service\/ # Business logic
\n\u251c\u2500\u2500 repository\/ # Cosmos DB integration
\n\u251c\u2500\u2500 model\/ # Data models
\n\u2514\u2500\u2500 application\/ # Main application class<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Cosmos DB<\/p>\n

\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f application.properties:<\/p>\n

spring.cloud.azure.cosmos.endpoint=
\nspring.cloud.azure.cosmos.key=
\nspring.cloud.azure.cosmos.database=
\nspring.cloud.azure.cosmos.consistency-level=Session<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u062f\u0644 \u0647\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0634\u06cc\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0628\u0631\u0627\u06cc \u0646\u06af\u0627\u0634\u062a \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0628\u0647 Cosmos DB \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

@Container(containerName = “users”)
\npublic class User {
\n @Id
\n private String id;
\n private String name;
\n private String email;<\/p>\n

\/\/ Getters and setters
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u062e\u0632\u0646<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0645\u062e\u0632\u0646 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647:<\/p>\n

@Repository
\npublic interface UserRepository extends CosmosRepository<User, String> {}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062e\u062f\u0645\u0627\u062a<\/p>\n

\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0646\u0637\u0642 \u06a9\u0633\u0628 \u0648 \u06a9\u0627\u0631 \u062f\u0631 \u06a9\u0644\u0627\u0633 \u062e\u062f\u0645\u0627\u062a:<\/p>\n

@Service
\npublic class UserService {
\n @Autowired
\n private UserRepository userRepository;<\/p>\n

public List<User> getAllUsers() {
\n return userRepository.findAll();
\n }<\/p>\n

public User createUser(User user) {
\n return userRepository.save(user);
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647<\/p>\n

API \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n

@RestController
\n@RequestMapping(“\/api\/users”)
\npublic class UserController {
\n @Autowired
\n private UserService userService;<\/p>\n

@GetMapping
\n public List<User> getUsers() {
\n return userService.getAllUsers();
\n }<\/p>\n

@PostMapping
\n public User createUser(@RequestBody User user) {
\n return userService.createUser(user);
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

5. \u0637\u0631\u0627\u062d\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647<\/p>\n

\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc Cosmos DB<\/p>\n

\u067e\u0627\u0631\u062a\u06cc\u0634\u0646 \u0628\u0646\u062f\u06cc: \u0627\u0632 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f userId \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u06cc<\/p>\n

\u0633\u0637\u0648\u062d \u0633\u0627\u0632\u06af\u0627\u0631\u06cc:<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062c\u0644\u0633\u0647 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0627\u06a9\u062b\u0631 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627
\n\u062a\u063a\u06cc\u06cc\u0631 \u0628\u0647 \u0642\u0648\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a \u062d\u06cc\u0627\u062a\u06cc<\/p>\n

\u0646\u0645\u0627\u06cc\u0647 \u0633\u0627\u0632\u06cc: \u0627\u0632 \u0646\u0645\u0627\u06cc\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 Cosmos DB \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

6. \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc<\/p>\n

\u0627\u062a\u0635\u0627\u0644 Frontend \u0628\u0627 Backend<\/p>\n

\u0627\u0632 Axios \u06cc\u0627 Fetch \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

import axios from “axios”;<\/p>\n

const API_URL = “http:\/\/localhost:8080\/api\/users”;<\/p>\n

export const fetchUsers = async () => {
\n const response = await axios.get(API_URL);
\n return response.data;
\n};<\/p>\n

export const createUser = async (user) => {
\n const response = await axios.post(API_URL, user);
\n return response.data;
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 React<\/p>\n

import React, { useState, useEffect } from “react”;
\nimport { fetchUsers, createUser } from “.\/services\/userService”;<\/p>\n

function UserList() {
\n const [users, setUsers] = useState([]);<\/p>\n

useEffect(() => {
\n fetchUsers().then(setUsers);
\n }, []);<\/p>\n

return (
\n <div>
\n <h1>User List<\/h1>
\n <ul>
\n {users.map((user) => (
\n <li key={user.id}>{user.name}<\/li>
\n ))}
\n <\/ul>
\n <\/div>
\n );
\n}<\/p>\n

export default UserList;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

7. \u0622\u0632\u0645\u0627\u06cc\u0634<\/p>\n

\u062a\u0633\u062a Frontend<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0627\u0633\u062a \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062a\u0633\u062a \u0648\u0627\u06a9\u0646\u0634 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627\u06cc \u0648\u0627\u062d\u062f
\n\u062a\u0633\u062a \u0647\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc API \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n

\u062a\u0633\u062a Backend<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f JUnit \u0648 \u0645\u0648\u06a9\u06cc\u062a\u0648 \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u0647\u0627\u06cc \u0648\u0627\u062d\u062f
\n\u0622\u0632\u0645\u0627\u06cc\u0634 \u0639\u0645\u0644\u06cc\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627 Cosmos DB \u062a\u0639\u0628\u06cc\u0647 \u0634\u062f\u0647:<\/p>\n

com.azure
\n cosmosdb-emulator<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

8. \u0627\u0633\u062a\u0642\u0631\u0627\u0631<\/p>\n

Containerization \u0628\u0627 Docker<\/p>\n

Dockerfiles \u0631\u0627 \u0647\u0645 \u0628\u0631\u0627\u06cc frontend \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc backend \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

FROM node:16
\n WORKDIR \/app
\n COPY . .
\n RUN npm install
\n RUN npm run build
\n EXPOSE 3000
\n CMD [“npm”, “start”]\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

FROM openjdk:17
\n WORKDIR \/app
\n COPY target\/*.jar app.jar
\n EXPOSE 8080
\n ENTRYPOINT [“java”, “-jar”, “app.jar”]\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0631\u06a9\u0633\u062a\u0631\u0627\u0633\u06cc\u0648\u0646 \u0628\u0627 Kubernetes<\/p>\n

\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062e\u062f\u0645\u0627\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc Kubernetes:<\/p>\n

\u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0648 \u062e\u062f\u0645\u0627\u062a \u0628\u0631\u0627\u06cc \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0648 \u0628\u06a9 \u0627\u0646\u062f
\n\u0627\u0632 ConfigMaps \u0648 Secrets \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 Cosmos DB \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

9. \u0642\u0627\u0628\u0644\u06cc\u062a \u0645\u0634\u0627\u0647\u062f\u0647<\/p>\n

\u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/p>\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0628\u0627\u0637\u0646
\n\u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0638\u0627\u0647\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u0638\u0627\u0631\u062a<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u067e\u0631\u0648\u0645\u062a\u0626\u0648\u0633 \u0648 \u06af\u0631\u0627\u0641\u0627\u0646\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0628\u0627\u0637\u0646
\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0645\u0627\u0646\u06cc\u062a\u0648\u0631 \u0644\u0627\u062c\u0648\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u06cc\u0646\u0634 Cosmos DB.<\/p>\n

10. \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627<\/p>\n

\u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062d\u0633\u0627\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.
\n\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc API \u0628\u0627 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0648 \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646.
\n\u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u0635\u062d\u06cc\u062d \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062e\u0637\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0637\u0631\u0627\u062d\u06cc \u0642\u0648\u06cc \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 React + Java + Cosmos DB \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0627\u0635 \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u06cc\u062f \u0648 \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\n

\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React + Java \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631 \u0628\u0627 Cosmos DB \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0637\u0631\u0627\u062d\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0627\u0644\u0627\u060c \u062a\u0623\u062e\u06cc\u0631 \u06a9\u0645 \u0648 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0648\u062f\u0646 \u0686\u0646\u062f \u0645\u0646\u0637\u0642\u0647 \u062f\u0627\u0631\u0646\u062f \u0627\u06cc\u062f\u0647\u200c\u0622\u0644 \u0627\u0633\u062a. \u0645\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0645\u0631\u0627\u062d\u0644 \u0639\u0645\u0644\u06cc \u062a\u0642\u0633\u06cc\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n