[Firebase] HTML + Vue.js + Firebase + Firebase Hosting + Firebase Functions + pyt…
관리자
2024-10-11 09:42
41
0
본문
HTML + Vue.js + Firebase + Firebase Hosting + Firebase Functions를 사용하여 Python 코드를 실행
아래는 HTML + Vue.js + Firebase + Firebase Hosting + Firebase Functions를 사용하여 Python 코드를 실행하는 웹 애플리케이션을 처음 설치부터 도메인이 활성화되는 순간까지 구성하는 단계별 가이드입니다. 각 단계마다 필요한 샘플 코드와 디렉토리 구조를 포함하여 설명하겠습니다.
목표
- Vue.js로 프론트엔드를 개발하고 Firebase Hosting에 배포합니다.
- Firebase Functions를 사용하여 백엔드에서 Python 코드를 실행합니다.
- Vue.js 애플리케이션에서 Firebase Functions로 요청을 보내 Python 코드를 실행하고 결과를 받아옵니다.
사전 준비사항
- Node.js 및 npm 설치
- Vue CLI 설치 : npm install -g @vue/cli
- Firebase CLI 설치 : npm install -g firebase-tools
- Python 3 설치
- Firebase 계정 및 프로젝트 생성
단계별 가이드
1. Vue.js 프로젝트 생성
프로젝트 디렉토리 생성 및 이동:
- mkdir my-firebase-app
- cd my-firebase-app
Vue.js 애플리케이션 생성:
npm install -g @vue/cli
- vue create frontend
frontend는 Vue.js 프로젝트 디렉토리 이름입니다.- 프롬프트에 따라 기본 설정을 선택합니다.
디렉토리 구조:
my-firebase-app/
└── frontend/
├── node_modules/
├── public/
├── src/
├── babel.config.js
├── package.json
└── vue.config.js
Firebase 초기화
프로젝트 루트 디렉토리에서 Firebase 초기화
firebase init
- Hosting과 Functions를 선택합니다.
- 기존 프로젝트를 사용하거나 새로운 프로젝트를 만듭니다.
- Public 디렉토리는
frontend/dist로 설정합니다. - Single Page Application인가에 대한 질문에는 Yes를 선택합니다.
- Functions는 JavaScript로 설정합니다.
디렉토리 구조 업데이트
my-firebase-app/
├── frontend/
│ ├── ...
├── functions/
│ ├── node_modules/
│ ├── index.js
│ └── package.json
├── .firebaserc
└── firebase.json
3. Firebase Functions에서 Python 실행 설정
functions 디렉토리로 이동:
cd functions
필요한 모듈 설치:
npm install --save child-process
Python 스크립트 생성:
functions/script.py
# functions/script.py
print("Hello from Python!")
Firebase Function 수정:
functions/index.js
// functions/index.js
const functions = require('firebase-functions');
const { exec } = require('child_process');
const path = require('path');
exports.runPython = functions.https.onRequest((req, res) => {
const scriptPath = path.join(__dirname, 'script.py');
exec(`python ${scriptPath}`, (error, stdout, stderr) => {
if (error) {
console.error(`Error: ${error.message}`);
return res.status(500).send('Server Error');
}
if (stderr) {
console.error(`Stderr: ${stderr}`);
return res.status(500).send('Server Error');
}
res.send({ message: stdout });
});
});
참고사항:
- Firebase Functions 환경은 기본적으로 Python이 설치되어 있지 않습니다.
- 이 방법은 로컬 테스트용이며, 실제 Firebase Functions에서는 Python을 실행할 수 없습니다.
- 대안으로 Cloud Functions를 Docker 이미지로 배포하거나, Cloud Run을 사용하는 것을 고려해야 합니다.
4. Vue.js에서 Firebase Functions 호출 설정
frontend 디렉토리로 이동:
cd ../frontend
Axios 설치:
npm install axios
Vue.js 컴포넌트 수정:
frontend/src/components/HelloWorld.vue
<template>
<div>
<h1>{{ message }}</h1>
<button @click="runPython">Run Python Code</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data() {
return {
message: 'Python 실행 결과:',
};
},
methods: {
runPython() {
axios
.get('/runPython')
.then((response) => {
this.message = response.data.message;
})
.catch((error) => {
console.error('Error:', error);
});
},
},
};
</script>
<style scoped>
/* 스타일 설정 */
</style>
Vue CLI 설정 수정 (프록시 설정):
frontend/vue.config.js
module.exports = {
devServer: {
proxy: {
'/runPython': {
changeOrigin: true,
},
},
},
};
5. Firebase 에뮬레이터로 로컬 테스트
Firebase 에뮬레이터 실행:
firebase emulators:start
새 터미널에서 Vue.js 애플리케이션 실행:
cd frontend
npm run serve
- 로컬에서
http://localhost:8080으로 접속하여 애플리케이션을 테스트합니다. - "Run Python Code" 버튼을 클릭하여 Python 코드 실행 결과를 확인합니다.
6. Firebase Functions 및 Hosting 배포
프로젝트 루트 디렉토리로 이동:
cd ..
Vue.js 애플리케이션 빌드:
cd frontend
npm run build
cd ..
Firebase Functions 및 Hosting 배포:
firebase deploy
- Firebase 프로젝트에 Functions와 Hosting이 배포됩니다.
- 배포 완료 후 제공된 Hosting URL로 접속하여 애플리케이션을 확인합니다.
7. 도메인 활성화
Firebase 콘솔에서 커스텀 도메인 추가:
- Firebase 콘솔에서 Hosting 섹션으로 이동합니다.
- 커스텀 도메인 추가 버튼을 클릭합니다.
- 도메인 이름을 입력하고 지시에 따라 도메인 소유권을 확인합니다.
- DNS 설정을 업데이트하여 Firebase Hosting과 도메인을 연결합니다.
- SSL 인증서가 자동으로 설정되며, 도메인이 활성화됩니다.
최종 디렉토리 구조
my-firebase-app/
├── frontend/
│ ├── dist/
│ ├── node_modules/
│ ├── public/
│ ├── src/
│ │ ├── components/
│ │ │ └── HelloWorld.vue
│ │ ├── App.vue
│ │ └── main.js
│ ├── babel.config.js
│ ├── package.json
│ └── vue.config.js
├── functions/
│ ├── node_modules/
│ ├── script.py
│ ├── index.js
│ └── package.json
├── .firebaserc
└── firebase.json
중요 참고사항
Firebase Functions에서 Python 실행 제한: Firebase Functions 환경은 Node.js 기반이며, 기본적으로 Python을 실행할 수 없습니다. 위의 방법은 로컬 개발 환경에서만 작동하며, 실제 배포된 Firebase Functions에서는 작동하지 않습니다.대안: Python 코드를 실행하기 위해서는 다음과 같은 대안을 고려해야 합니다.
- Cloud Functions를 Docker 컨테이너로 배포: 커스텀 런타임 환경을 사용하여 Python을 실행할 수 있습니다.
- Google Cloud Run 사용: Docker 컨테이너로 애플리케이션을 배포하고 Firebase Hosting에서 이를 호출합니다.
- 서버 설정: 별도의 서버 (예: Google Compute Engine)에서 Python 백엔드를 구성하고 API를 통해 통신합니다.
결론
위의 단계는 Vue.js 애플리케이션에서 Firebase Functions를 통해 Python 코드를 실행하는 방법을 보여줍니다. 하지만 Firebase Functions 환경의 제한으로 인해 실제 배포 환경에서는 Python 실행이 불가능합니다. 따라서 실제 프로젝트에서는 Google Cloud Run이나 별도의 백엔드 서버를 사용하여 Python 코드를 실행하는 것을 권장합니다.
추가: Cloud Run을 사용한 Python 실행 방법
1. Cloud Run에 Python 애플리케이션 배포
- Python Flask 앱을 Docker 컨테이너로 패키징하여 Cloud Run에 배포합니다.
2. Firebase Hosting에서 리버스 프록시 설정
firebase.json에서 리라이트 설정을 통해 특정 경로의 요청을 Cloud Run 서비스로 라우팅합니다.
예시:
firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"site": "y-think",
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
이 방법을 사용하면 Firebase Hosting에서 제공하는 Vue.js 애플리케이션이 /api/로 시작하는 요청을 Cloud Run에 배포된 Python 백엔드로 전달할 수 있습니다.
참고 문서:
요약
- Firebase Functions에서는 Python 실행이 제한적이므로, Cloud Run을 사용하여 Python 백엔드를 구성하는 것이 좋습니다.
- Vue.js 애플리케이션은 Firebase Hosting에 배포하고, 백엔드는 Cloud Run에 배포하여 두 서비스를 연동합니다.
- Firebase Hosting의 리라이트 설정을 통해 특정 경로의 요청을 Cloud Run으로 라우팅합니다.
이 가이드를 따라 HTML + Vue.js + Firebase + Firebase Hosting + Firebase Functions 아키텍처를 구성할 수 있으며, Python 코드를 실행하는 웹 애플리케이션을 구축할 수 있습니다.
댓글목록0
댓글 포인트 안내