Рубрики
Без рубрики

Обслуживание статических файлов и создание веб-сайтов с помощью колбы Python

Неважно, кто вы есть – владелец бизнеса или разработчик – наличие веб-сайта неизбежно в … Теги с Python, HTML, Heroku, WebDev.

Неважно, кто вы – это владелец бизнеса или разработчик – наличие веб-сайта неизбежно в вашей карьере. В вашем распоряжении в вашем распоряжении множество вариантов – от NO-CODE, выпадающих застройщиков веб-сайтов к хардкорному веб-разработке, используя JavaScript Frameworks, как ReCv.

В этой статье мы поговорим о другом варианте построить базовый статический веб-сайт, использующий Python Flask и HTML/CSS + JavaScript, который находится где-то между этим спектром вариантов веб-разработки. Это также демонстрация того, насколько универсальный микроразрушение флэки!

Кроме того, мы увидим, как мы можем опубликовать свой веб-сайт онлайн, используя Heroku.

Вы можете обратиться к моей предыдущей статье, чтобы понять, как настроить колбу, чтобы сделать простые вызовы API. Он также будет служить хорошей базой для этого руководства.

Исходный код для этого учебника можно найти на моем Гадость

Предварительные условия

Если вы еще этого не сделали, установите колбу с помощью команды:

pip install Flask

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

Создайте папку в месте на вашем выборе и откройте его, используя свой любимый редактор кода. Это будет наше рабочее пространство папки.

В этой папке рабочей области создайте файл под названием main.py Отказ Этот файл проведет наш код колбы со всеми маршрутами и конфигурациями.

В той же папке создайте еще одну папку под названием статический Отказ Оставьте это пусто на данный момент.

Настройка колба

Откройте созданные main.py Файл и импортируйте модуль Flask в первой строке.

from flask import Flask

Затем мы инициализируем объект колбы как обычно. Тем не менее, мы проходим еще два параметра к конструктору – Static_Folder как статический (который является нашим статическим именем каталога) и Static_url_Path , что мы уйдем как пустым.

app = Flask(__name__, static_folder='static', static_url_path='')

Строительство нашей веб-страницы

Чтобы служить статическую веб-страницу, нам нужно сделать HTML-файл, который будет держать нашу веб-страницу. Создайте файл в пределах статический каталог называется Galaxy.html Отказ

Вы можете поставить любой действительный HTML-код в этом файле. Я включил базовую веб-страницу с некоторым стилем ниже, не стесняйтесь редактировать этот код, сколько подходит вам!


  
    Galaxy
  
  
  
    

NGC 1300

Barred spiral galaxy

Обслуживание нашей веб-страницы

Теперь давайте обслужим эту статическую веб-страницу, которую мы только что создали. В main.py Файл, мы добавим новый Получить запрос с маршрутом /Галактика Отказ

@app.route('/galaxy')
def galaxy():

Затем добавим магический код, который автоматически обслуживает эту статическую веб-страницу в качестве маршрута. Объект колба содержит функцию под названием send_static_file , который принимает имя файла, расположенного в вашем статическом каталоге в качестве параметра, и возвращает его обратно как действительный ответ HTML.

@app.route('/galaxy')
def galaxy():
    return app.send_static_file('galaxy.html')

Наконец, мы добавим код для выполнения нашего сервера Flask в нижней части main.py файл. Мы пройдем в Threaded как Правда Разрешить многопоточенные операции и установить порт к 5000 Отказ

if __name__ == '__main__':
    app.run(threaded=True, port=5000)

В конце концов, весь main.py Файл выглядит так.

from flask import Flask

app = Flask(__name__, static_folder='static', static_url_path='')


@app.route('/galaxy')
def galaxy():
    return app.send_static_file('galaxy.html')


if __name__ == '__main__':
    app.run(threaded=True, port=5000)

Запустите код, выполнив команду Python Main.py и перейдите к http://localhost: 5000/galaxy или http://127.0.0.1:5000/galaxy Чтобы увидеть магию!

Вы также можете добавить больше маршрутов и обслуживать другие статические файлы HTML для создания полного сайта!

Развертывание онлайн

Теперь, когда вы закончили строить свои страницы и добавили соответствующий код колбы, пришло время публиковать свой веб-сайт в Интернете для всех, чтобы увидеть. Чтобы развернуть ваш сайт онлайн, мы будем использовать комбинацию Github и Heroku.

Загрузите свой код в Github.

Войдите в свой аккаунт GitHUB (или создайте новый) и создайте новый репозиторий. Назовите это, как вы хотите. После выполнения, с рабочим каталогом, установленным в качестве папки Workspace, выполните следующие команды один за другим.

Примечание. Убедитесь, что вы замените С вашего имени пользователя GitHub и С именем репозитория вы только что создали.

git init
git remote add origin https://github.com//.git
git branch -M main
git add .
git commit -m "Initial commit"
git push

Настройка Heroku

Heroku – облачная платформа, которая позволяет нам управлять приложениями в облаке. Мы будем использовать Heroku, чтобы развернуть и публиковать свой веб-сайт в Интернете.

Издательство в Heroku бесплатно для простых сайтов с низким трафиком.

Создайте учетную запись Heroku на heroku.com и подтвердите свой адрес электронной почты. Когда-то сделали, продолжайте и создайте новую команду и назовите это все, что вы хотите.

В этой новой команде вы найдете Новый кнопка. Нажмите на него и выберите Создать новое приложение

На следующей странице вас попросят назвать ваше новое приложение и выбрать регион. Назовите свой веб-сайт соответствующим образом и выберите любой регион. Нажмите Создать приложение продолжить.

Впоследствии вам будет показана страница, в которой вы найдете возможность выбрать метод развертывания. Выберите Github Отказ Это покажет возможность подключения вашей учетной записи Heroku с вашей учетной записью GitHUB. Следуйте инструкциям по указанию.

После подключения появится панель поиска. Введите имя вашего репозитория и нажмите «Поиск» и выберите свой репозиторий, когда он появится в результатах поиска.

После связывания вашего репозитория вам будет показан раздел под названием Автоматическое развертывание Отказ Выберите ветвь ( Главная По умолчанию), где находится код вашего сайта, и нажмите Включить автоматическое развертывание Отказ

Это завершает нашу настройку Heroku. Двигаться вперед.

Развертывание вашего сайта

Перед развертыванием вашего сайта Heroku должен знать, какие команды должны быть выполнены приложением при запуске, для которых он требует файла под названием Procfile Отказ

Создайте файл под названием Procfile (Нет расширения) в корне каталога Workspace. Включите следующую строку в файле.

web: gunicorn main:app

Gunicorn – это веб-сервер HTTP для Python.

Мы также должны создать файл под названием требования .txt , что рассказывает Heroku какие зависимости устанавливать перед запуском нашего сервера Flask. Создайте этот файл в корне в каталоге Workspace и добавьте в него следующий контент.

Flask
gunicorn

После выполнения нажимайте эти изменения в GitHUB, используя следующие команды.

git add .
git commit -m "Added Procfile and Requirements"
git push

Поскольку мы включили автоматические развертывания, Heroku автоматически развернут ваш сайт для https:// .herokuapp.com/ через пару минут. После этого вы можете посетить эту ссылку и увидеть ваш сайт в Интернете.

Отныне всякий раз, когда вы вносите какие-либо изменения, например, добавление новых веб-страниц, все, что вам нужно сделать, это толкать код в GitHub, а Heroku автоматически создаст ваш сайт и развернут его для вас.

Завершение нот

Мы только что увидели простой способ служить статические веб-страницы, используя колбу. Мы также увидели, как легко развернуть один и тот же онлайн, используя Heroku. Этот метод не только ограничен HTML веб-страницы, но и любой тип файла, если он существует в статический папка.

В предстоящих статьях серии мы рассмотрим расширенные функции, которые мы можем построить с помощью колбы, включая аутентификацию (логин/регистрацию) и хранение данных.

Дайте мне знать в разделе комментариев, если у вас есть какие-либо отзывы или запросы, а как всегда, продолжайте кодирование!

Оригинал: “https://dev.to/rtficial/serving-static-files-and-creating-websites-using-python-flask-41c3”