Деплой приложения Flask и Vue.js 3 на сервер Ubuntu 18

В прошлой статье мы рассмотрели создание API на Flask и фронтенд на VueJS 3.

В этой статье мы рассмотрим, как развернуть веб-приложение, использующее Flask в качестве бэкенда и Vue.js 3 в качестве фронтенда, на удаленном сервере Ubuntu 18. Мы будем использовать Nginx и Gunicorn для обеспечения безопасного соединения и обработки запросов к Flask. Мы также настроим базу данных и импортируем данные из локальной базы данных.

Шаг 1: Установка и настройка сервера

Перед началом работы нам нужно настроить сервер и установить необходимое программное обеспечение. В первую очередь мы установим Python, Node.js и Nginx.

sudo apt-get update
sudo apt-get install python3-pip python3-dev python3-venv
sudo apt-get install nodejs npm
sudo apt-get install nginx

Затем мы установим Gunicorn и создадим виртуальное окружение для Flask.

sudo apt-get install gunicorn
python3 -m venv myprojectenv
source myprojectenv/bin/activate

Шаг 2: Настройка базы данных и импорт данных

Для хранения данных нашего приложения мы будем использовать SQLite. Мы можем установить его следующим образом:

sudo apt-get install sqlite3

Затем мы можем создать базу данных и импортировать данные из локальной базы данных.

sqlite3 mydatabase.db
sqlite> .open mydatabase.db
sqlite> .mode csv
sqlite> .import /path/to/local/database.csv mytable

Шаг 3: Установка зависимостей и настройка виртуальной среды

Теперь мы можем установить необходимые зависимости для нашего приложения. Для этого мы создадим requirements.txt файл со следующим содержимым:

Flask==2.0.2
flask-cors==3.0.10
gunicorn==20.1.0
pymongo==3.12.0
redis==3.5.3

Затем мы можем установить зависимости и создать виртуальную среду.

pip install -r requirements.txt
deactivate

Шаг 4: Создание конфигурационных файлов

Далее мы создадим конфигурационные файлы для Nginx и Gunicorn.

Создадим файл для Gunicorn:

nano gunicorn_config.py

bind = '127.0.0.1:5000'
workers = 3
timeout = 60

Создадим файл для Nginx:

server {
    listen 80;
    server_name myproject.com;

    location / {
        proxy_pass http://127.0.0.1:8000;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
    }

    location /static {
        alias /path/to/static/files;
    }

    location /uploads {
        alias /path/to/upload/files;
    }
}

В этом файле мы указали следующие настройки:

• listen 80 — прослушиваемый порт, на котором будет работать веб-сервер.
• server_name myproject.com — имя хоста, по которому будет доступно приложение.
• location / — настройки для корневого пути. Мы указали proxy_pass http://127.0.0.1:8000, чтобы проксировать запросы к приложению на Flask, запущенному на порту 8000.
• location /static и location /uploads — настройки для доступа к статическим и загруженным файлам приложения.

После создания конфигурационного файла, нужно создать символическую ссылку на него в директории /etc/nginx/sites-enabled командой sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled. Затем нужно перезапустить веб-сервер командой sudo systemctl restart nginx, чтобы настройки вступили в силу.

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled

И перезапустим Nginx:

sudo systemctl restart nginx

Шаг 5: Сборка и настройка фронтенда

Теперь мы можем перейти к фронтенду нашего приложения. Мы должны установить зависимости и настроить запросы к API. Для этого мы можем использовать следующий код:

cd /path/to/vuejs3/project
npm install
npm run build

Мы также можем настроить Axios для общения с API, используя следующий код:

import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://myproject.com/api/',
    timeout: 10000,
    headers: {'Content-Type': 'application/json'}
});

export default instance;

Шаг 6: Тестирование и запуск приложения

Теперь мы можем запустить наше приложение и протестировать его.

Сначала мы запустим Gunicorn:

source myprojectenv/bin/activate
gunicorn --config gunicorn_config.py run:app

Затем мы запустим фронтенд:

cd /path/to/vuejs3/project
npm run serve

После тестирования мы можем перейти к деплою на удаленный сервер.

Шаг 7: Деплой приложения на удаленный сервер

Перенесем все файлы на удаленный сервер с помощью команды scp:

scp -r /path/to/flask/project [email protected]:/path/to/remote/directory
scp -r /path/to/vuejs3/project [email protected]:/path/to/remote/directory

Затем мы можем запустить Gunicorn и Nginx на удаленном сервере:

ssh [email protected]
cd /path/to/remote/directory
source myprojectenv/bin/activate
gunicorn --config gunicorn_config.py run:app
sudo systemctl restart nginx

Теперь мы можем открыть браузер и перейти по адресу http://myproject.com, чтобы убедиться, что наше приложение работает.

В заключение, мы рассмотрели, как развернуть веб-приложение, использующее Flask и Vue.js 3 на удаленном сервере Ubuntu 18. Мы настроили базу данных, создали конфигурационные файлы для Nginx и Gunicorn, установили зависимости и запустили фронтенд. Мы также протестировали приложение и деплоили его на удаленный сервер.