728x90
반응형
# Python과 React로 MicroFrontend 간단하게 구현 정리
Module Federation을 적용한 케이스는 아니다. 추후에 적용해서 정리해보자.
여기서는 iframe을 사용함.
1. 결과물
아래의 캡처 내용처럼 위 배경이 하얀 부분을 Python 코드로 작성을 할것이고, 아래의 검정색 바탕의 내용을 React로 작성을 할 예정이다.
2. Python 작업
- Flask 설치
pip install Flask
- app.py
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/user', methods=['GET'])
def get_user():
user_info = {
'name': 'John Doe',
'email': 'john.doe@example.com'
}
return jsonify(user_info)
if __name__ == '__main__':
app.run(debug=True)
- templates 폴더를 생성 후 index.html 파일을 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro Frontends</title>
</head>
<body>
<h1>Micro Frontend - Python</h1>
<p>Info: {{ info.Running_port }}</p>
<p>AddressName: {{ info.Address_name }}</p>
<p>RunURL: {{ info.Run_Script }}</p>
<p>Position: {{ info.Position }}</p>
<h1>React Service Call</h1>
<iframe src="http://localhost:3000" style="width:100%; height:500px; border:none;"></iframe>
</body>
</html>
- app.py 실행
python app.py
- 결과
3, React 작업
- react-app 설치
npx create-react-app department-frontend
- App.js 파일 수정
import React from 'react';
import './App.css';
function App() {
const React_Info = {
Port_number: '3000',
Address: 'localhost',
Run_URL: 'http://localhost:3000'
};
return (
<div className="App">
<header className="App-header">
<h1>Micro Frontend - React</h1>
<p>Name: {React_Info.Port_number}</p>
<p>Head: {React_Info.Address}</p>
<p>Head: {React_Info.Run_URL}</p>
</header>
</div>
);
}
export default App;
- 실행
cd department-frontend
npm start
- 결과
4. 결과
- Python과 React 모두 실행
- 접속 : localhost:5000
- 결과 :
- 끝 -
관련 코드는 아래에 있음.
728x90
반응형