Python과 React로 MicroFrontend 간단하게 구현하기

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

- 결과 :

- 끝 -

짱구의 삽질 블로그