Привет
Сегодня мы создадим небольшое приложение .py и загрузим его в Azure.
Требования: учетная запись Azure + желание узнавать новое и экспериментировать. Также нужен VSCode (бесплатная IDE).
Когда мы закончим, мы получим:
Что мы будем делать?
-
Общие сведения о WebAssembly (WASM)
-
Общие сведения о загрузке сайта в Azure
Итак, начнем
WebAssembly (WASM) — можно прочитать здесь или здесь, но вкратце — это возможность писать на языке программирования (Python, Golang, C# и т. д.) прямо в HTML-страницу.
Простая HTML-страница выглядит так:
<!DOCTYPE html> <html> <head> <title>PyScript Example</title> </head> <body> <p>This is a PyScript example.</p> </body> </html>Простой код Python, отображающий график, выглядит так:
import matplotlib.pyplot as plt import numpy as npx = np.random.randn(n) y = np.random.randn(n) x, y = make_x_and_y(n = 1000) fig, ax = plt.subplots() ax.scatter(x, y) figКто не знаком с этим языком программирования, может прочитать о нем, но хотя бы визуально он выглядит иначе. Я надеюсь 🙂
Итак, давайте объединим: HTML и Python!
Откройте VSCode.
Откройте расширения (или нажмите Ctrl Shift X).
Установите расширения: Live Server, AzureStorage.
Создайте новый текстовый файл (или нажмите Ctrl N).
Вставьте следующий текст:
<!DOCTYPE html> <html lang=”eng”> <head> <title>PyScript Example</title> <link rel=”stylesheet” ref=”https://pyscript.net/alpha/pyscript.css" /> <script defer src=”https://pyscript.net/alpha/pyscript.js"></script> <link ref=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap min.css" rel=”stylesheet” crossorigin=”anonymous”> <py-env> - numpy - matplotlib </py-env> </head> <body> <h5>PyScript Tests</h5> <py-script ouput = “plot”> import matplotlib.pyplot as plt import numpy as np x = np.random.randn(1000) y = np.random.randn(1000) fig, ax = plt.subplots() ax.scatter(x, y) fig </py-script> <h1> Pyscript REPL</h1> <br> <h5>Click ‘Shift Enter’ after line</h5> <div> <py-repl id=”my-repl” auto-generate=”true”></py-repl> </div> </body> </html>Сохраните его как html-файл.
Откройте Command Palette (или нажмите Ctrl Shift P).
Напишите: «Open With Live Server»
В результате вашего кода вы получите страницу браузера, как представленно на верхней картинке
Если до сих пор все в порядке, давайте загрузим эту страницу в Azure. После загрузки вы сможете получить эту страницу из любого браузера, включая мобильный.
Откройте Azure
Перейдите к Azure storage account
Щелкните Создать.
Заполните все поля.
Создать.
После создания нажмите на созданную учетную запись хранения.
Перейдите на статический веб-сайт:
Нажмите enable и save
Вернёмся в VSCode
Нажмем на папку проекта, выберем “Deploy to Static Website via Azure Storage”:
В следующем диалоговом окне выберите Azure storage account, созданную ранее.
Завершить загрузку.
Получить ссылку.
В конце эксперимента рассмотрите возможность удаления учетной записи хранения Azure, чтобы сэкономить деньги.
Ссылка на репо
ссылка на оригинал статьи https://habr.com/ru/post/682050/
Добавить комментарий