Лучший подход для обработки одностраничных приложений и API-интерфейсов на сервере - PullRequest
Новая
       50

Лучший подход для обработки одностраничных приложений и API-интерфейсов на сервере

0 голосов
/ 08 октября 2018

Я создал API с использованием фляги и одностраничного приложения в качестве внешнего интерфейса.Бэкэнд работал на порту 5000, и я использовал parcelJS для создания внешнего интерфейса, и у него есть собственный веб-сервер, который работал на порту 1234.Файлы css, js и static находятся внутри папки dist, доступ к которой возможен из 127.0.0.1:1234 с помощью веб-сервера parcels.

Все запросы, поступающие с внешнего интерфейса, отправляются на 127.0.0.1:5000.

Вопрос

Я хочу развернуть проект на сервере, должен ли я интегрировать оба и иметь интерфейсную и внутреннюю работу на одном веб-сервере и включить CORS, и каков наилучший подход для обработки реализаций одностраничных приложений на основе API?

Сервер API

Сервер API запускается на порту 5000 со следующими настройками. 

self.app = Flask(__name__, static_folder="../../front/dist",
                         template_folder="../../front/dist")
self.api = Api(self.app)
CORS(self.app)
if __name__ == '__main__':
    app_instance.app.run(debug=True, host='127.0.0.1', port=5000)

Конечная точка API

Конечная точка, такая как /api/snippets делает запрос к базе данных и возвращает ответ json. 

app_instance.api.add_resource(Snippets, '/api/snippets')

Frontend

Javascript во внешнем интерфейсе делает запрос к 127.0.0.1:5000/api/snippets.

Когда япопробуйте использовать веб-сервер pythons для обслуживания index.html, я получаю содержимое HTML, но не могу получить доступ к файлам js, css в папке dist. 

@app_instance.app.route('/')
def index():
    return render_template("index.html")

Когда я настраиваю NGINX для обработки маршрутовМне нужно сделатьзапросы к домену и CORS отключены.

Структура папок 

├── back
│   └── app
│       
└── front
    ├── assets
    ├── css
    ├── dist
    └── js
        ├── components
        └── lib

1 Ответ

0 голосов
/ 09 октября 2018

Мне нужно было запустить оба с одного веб-сервера.Я использовал сервер разработки python / flasks для тестирования, но основная идея та же и должна работать с другими сценариями.

Я добавил маршруты и обработал их с помощью рендерера шаблонов склянок 

from flask import render_template
@app_instance.app.route('/')
@app_instance.app.route('/create')
@app_instance.app.route('/snippet/<path:path>') #dynamic route
def index(path=None):
    return render_template("index.html")

И настроил Nginx для обработки запросов. 

server {
        listen 80;
        listen [::]:80;

        server_name somedomain;

        root some/path/to_the/front/dist;
        index index.html;

        location / {
                try_files $uri /index.html;
                gzip_static on;
        }

}

Результат

Теперь я могу отправлять запросы от внешнего интерфейса к http://127.0.0.1:5000/api/snippets/api, так как на этом порту работает колба, и у меня также есть доступ кmy index.html без использования порта 5000.

...