Gihak111 Navbar

Expo 앱과 로컬 서버

Expo로 만든 앱을 APk로 빌드 하고, 핸드폰에 다운 받아도 실행함녀 백엔드 서버가 연동되지 않는다.
이는 컴퓨터에서 실행중인 백엔드 서버가 로컬에서 실행중이기 때문이다.
로컬 환경에서는 동일한 네트워크 내에서만 접근할 수 있기 때문에, 서버를 별도로 호스팅하거나 동일한 로컬 네트워크를 사용하는 환경에서 테스트해야 한다.
외부 네트워크에서 접근하려면 서버를 외부에 노출시켜야 한다.

1. Flask 서버와 Express 서버의 배포 옵션

서버를 로컬에서만 실행하는 대신, 다음 두 가지 방법으로 서버를 외부에 노출시켜 접근할 수 있습니다:

1.1. 클라우드 서버 또는 VPS 사용

1.2. Ngrok 사용 (개발 및 테스트 용도)

2. Flask와 Express 서버를 함께 실행하는 방법

한 가지 방법은 Flask 서버와 Express 서버를 함께 실행할 수 있는 설정을 마련하는 것이다.

2.1. Flask 서버 실행

from flask import Flask, request, jsonify
import tensorflow as tf
from tensorflow.keras.models import load_model
from PIL import Image
import numpy as np
import io

app = Flask(__name__)

model = load_model('path_to_your_model.keras')

def preprocess_image(image):
    image = image.resize((152, 152))
    image = np.array(image) / 255.0
    image = np.expand_dims(image, axis=0)
    return image

@app.route('/upload', methods=['POST'])
def upload_image():
    file = request.files['image'].read()
    image = Image.open(io.BytesIO(file))
    processed_image = preprocess_image(image)
    prediction = model.predict(processed_image)
    
    similarity = np.mean(prediction)
    
    if similarity > 0.9:
        return jsonify({'message': 'The image is likely a genital image.'})
    else:
        return jsonify({'message': 'The image is not a genital image.'})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

2.2. Express 서버 실행

const express = require('express');
const multer = require('multer');
const axios = require('axios');
const FormData = require('form-data');
const app = express();

const upload = multer();

app.post('/upload', upload.single('image'), async (req, res) => {
    const formData = new FormData();
    formData.append('image', req.file.buffer, req.file.originalname);

    try {
        const response = await axios.post('http://localhost:5000/upload', formData, {
            headers: formData.getHeaders(),
        });
        res.json(response.data);
    } catch (error) {
        console.error(error);
        res.status(500).send('Error processing the image');
    }
});

app.listen(3000, () => {
    console.log('Express server running on port 3000');
});

3. Ngrok으로 로컬 서버 노출

Ngrok을 사용하여 로컬 Flask 서버를 외부에 노출하는 방법이다.

3.1. Ngrok 설치 및 실행

ngrok http 5000

이렇게 하면 Ngrok이 생성한 URL을 사용하여 Express 서버가 Flask 서버와 통신할 수 있다.

4. Android APK 빌드 후 서버에 연결

이제 앱에서 서버 URL을 Ngrok으로 생성된 URL이나 클라우드 서버의 URL로 설정하고, APK를 빌드하여 설치할 수 있다.

이렇게 하면 모바일 앱이 백그라운드에서 실행되면서 서버와 원활히 통신할 수 있다.
Express와 Flask 서버를 호스팅하거나 Ngrok을 통해 터널링하여 앱이 네트워크를 통해 서버에 접근할 수 있도록 한다.