1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/zxiaosi-vue3-fastapi

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Демо Vue3 + FastAPI

1. Структура проекта

-- backend										# серверная часть
	-- api									    # папка с API
  -- common                   # общая папка
  -- core                     # ядро
    -- config.py              # конфигурационный файл
  -- crud                     # папка с CRUD-операциями
  -- models                   
    -- database               # модели таблиц MySQL
    -- redis                  # модели таблиц Redis
  -- register                 # папка с регистрацией
  -- schemas                  # папка с моделями (Java-сущности или VO-классы)
  -- static                   # папка со статическими файлами
  -- utils                    # папка с утилитами
  -- Dockerfile               # файл для развертывания серверной части
  -- main.py                  # файл запуска проекта
  -- requirements.txt         # файл с зависимостями
-- frontend
  -- src
    -- apis                   # папка с API
    -- assets                 # папка со статическими ресурсами
      -- js
        -- global.js          # файл глобальной конфигурации
    -- components             # папка с компонентами
    -- request                # пакет с axios
    -- router                 # пакет с маршрутизацией
    -- stores                 # пакет с состоянием
    -- utils                  # пакет с утилитами
    -- views                  # папка с представлениями
      -- pages                # страницы в шаблоне
      -- Login.vue            # страница входа
    -- App.vue
    -- main.ts                
  -- index.html               # точка входа
-- demo.sql                   # файл с базой данных (backend/config.py)
-- docker-compose.yml         # файл с конфигурацией развертывания (nginx, mysql, redis, backend)
```### 2. Запуск проекта

+ Серверная часть

  ```sh
  # Установка зависимостей (перейти в папку backend)
  pip install -r ./requirements.txt
  
  # Найти основную функцию в main.py и запустить
  • Клиентская часть

    # Установка зависимостей (перейти в папку frontend)
    npm install
    
    # Запуск проекта
    npm run start

Развертывание

1. Структура проекта

-- сервер
	-- ...
	-- root
	-- opt
		-- containerd 
		-- docker 								# содержит конфигурацию контейнеров Docker
			-- mysql							# конфигурация MySQL
			-- nginx							# конфигурация Nginx
				-- conf.d						
					-- default.conf				 # конфигурация Nginx [важно]
				-- html							# содержит собранные файлы [важно]
				-- ...
			-- redis							# Redis
			-- demo								# конфигурация проекта
				-- frontend						# фронтенд
				-- backend						# бэкенд
					-- Dockerfile				# сборка образа [важно] 
				-- docker-compose.yml			 # docker-compose [важно]
				-- ...
			-- ...

2. Начальные шаги с Docker

3. Развертывание фронтенда

  • Измените поле API_URL_PRODUCTION в файле frontend/src/assets/js/global.ts на IP-адрес сервера

  • Измените поле isDev в файле frontend/src/request/https.ts на false

    // const isDev: boolean = true;
    const isDev: boolean = false;
  • Выполните команду npm run build для сборки файлов

  • Загрузите файлы из папки frontend/dist в папку /opt/docker/nginx/html на сервере

4. Развертывание бэкенда

  • Измените поле IS_DEV в файле backend/core/config.py на false ```sh

    IS_DEV = True # Development

    IS_DEV = False # Development

  • Измените некоторые поля в файле backend/core/config.py

  • Создайте мост Docker

    # docker network ls  # View bridges
    # docker network create  # Create bridge
    
    # app  - bridge name defined in docker-compose.yml
    docker network create app
  • Запустите docker-compose.yml в папке /opt/docker/demo

    docker-compose -f /opt/docker/demo/docker-compose.yml up -d
  • Создайте базу данных с именем demo и импортируйте demo.sql

5. Конфигурация Nginx ( /nginx/conf.d/default.conf )

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

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # Prevent 404 on page refresh
    }
    
    location /static/avatar/ {
        proxy_pass http://fastapi:8000/static/avatar/;
    }

    location /api {
        client_max_body_size 5m;
        proxy_pass http://fastapi:8000; # Replace localhost with container name
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    
    # Optional
    location /api/docs { # Documentation address
        proxy_pass http://fastapi:8000/docs;
    }

    location /api/redoc { # Redoc address
        proxy_pass http://fastapi:8000/redoc;
    }

    location /openapi.json { # OpenAPI address (if aggregating the specified document, add aggregation for openapi)
        proxy_pass http://fastapi:8000/openapi.json;
    }

    ...
}

Комментарии ( 0 )

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

Введение

Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/zxiaosi-vue3-fastapi.git
git@api.gitlife.ru:oschina-mirror/zxiaosi-vue3-fastapi.git
oschina-mirror
zxiaosi-vue3-fastapi
zxiaosi-vue3-fastapi
master