В этом мире есть два вида веб-разработчиков: те, кто кодируют передние концы, и те, кто код обратно заканчивается … (вдохновлен Мистер Леоне 🤠)
Вы, вы хотите быть полным стеком. Но глубоко в вашем сердце вы знаете, что принадлежите к одному из этих двух видов. Везде, где существуют ваши природные навыки, эта статья поможет вам на пути разработки полного стека JavaScript. Serverless – хороший подход, чтобы избежать управления сервером во время масштабирования практически без ограничений. Давайте посмотрим, как сделать его еще проще с динамикой масштаба, какую частей являются частями HTTP-кодирования с обеих сторон.
С точки зрения сервеса, я думаю, вы уже знаете VERCEL – это предлагает статическое развертывание STATAL и JamStack, функции без сервера, и глобальный CDN, однако я не буду говорить о Vercel, но о более новой неверной платформе – Scaledynameics, которая представляет уникальный подход к коду и развернуть задние завычки на функцию без сервеса (FAAS). Это в основном вид Vercel для предприятий – потому что вы можете развернуть его на любых облаках, даже частных облаках, а также на месте – с новым подходом для разработки и кодирования API.
Так что без каких-либо дальнейших ADO, давайте начнем!
Во-первых, создайте свой главный проект реагирования:
npx create-react-app react-warp-tuto
На этом этапе мы создадим базовый HTTP Proxy в Node.js чтобы:
- Получить данные из Отдых API
- Фильтруйте данные, чтобы не запросить слишком много данных как сторона клиента
- Добавьте случайные аватары в ответ (чтобы сделать оказанную страницу выглядеть красивее;)
Для этого, давайте создадим каталог сервера в корне основного проекта и инициализируйте новый Node.js Проект внутри него:
mkdir react-warp-tuto/server cd react-warp-tuto/server; npm init -y And install the [Axios library](https://www.npmjs.com/package/axios) we need: npm install axios
Теперь, вот веселая часть! В Subproject сервера мы создаем index.js Для создания функции Back-End Serverless:
// server/index.js
const axios = require("axios");
const getUsers = async () => {
// fetch users from API
const { data } = await axios.get("https://jsonplaceholder.typicode.com/users");
// Pick attributes and add photo
return data.map(({ id, name, email, phone, company, address }) => ({
id,
name,
email,
phone,
city: address.city,
work: company.name,
photo: "https://randomuser.me/api/portraits/lego/" + (id % 10) + ".jpg",
}));
};
// getUsers is the function that you will call from the Front-end
module.exports = { getUsers };
Вы заметили эту последнюю строку кода? Эта часть очень важная: это технически скажет масштабированию, чтобы включить эту функцию в функцию без сервеса (FAAS) и для проведения ее функции безвесочной. По сути, вам не нужно иметь дело с HTTPS, аргументами, ошибками, конечными точками … Scaledynameics сделает все это для вас.
Тогда мы создаем warp.config.js Файлы для настройки Scaledynameics следующим образом:
module.exports = {
// project name in the Warp console (demo is created by default)
project: "demo",
output: {
format: "node-module",
// path to the "node_modules" directory of your main project
projectPath: "../",
// module name to import it in your main project
name: "warp-server",
},
};
Что касается имени проекта, консоль масштабирования будет введена дальше.
Благодаря узлу-модулю Формат вывода Scaledynameics будет генерировать модуль по имени Warp-Server Для использования в клиентском проекте. Рассмотрим, что это модуль помощника, заглушка, чтобы позвонить на сервер.
На сервере Scaledynameics поставляется с Интерфейс командной строки Чтобы позволить вам начать локальный эмулятор, построить проект и развернуть его на облаке.
На стороне клиента вам нужен только механизм Warp и генерируемый модуль помощника для вызова API Server (это предотвращает вызов HTTP).
Вернуться к нашему родительскому проекту, давайте установим эти небольшие зависимости:
cd .. npm install @warpjs/engine npm install warp npm-run-all — save-dev
Пока он работает, в package.json Давайте добавим запчасти сервера в командах Start и Build, а также командную строку развертывания.
// package.json
"scripts": {
+ "postinstall": "cd ./server && npm install",
- "start": "react-scripts start",
+ "start:client": "react-scripts start",
+ "start:server": "warp start-emulator -w ./server",
+ "start": "run-p start:*",
- "build": "react-scripts build",
+ "build:client": "react-scripts build",
+ "build:server": "warp build ./server",
+ "build": "run-s build:server build:client",
+ "deploy": "warp deploy — asset-dir build/ ./server",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Наконец, чтобы вызвать функцию без сердца в вашем коде, вы должны импортировать ДИРП ДВИГАТЕЛЬ однажды. Мы рекомендуем инициализировать его в точке входа вашего основного проекта:
// src/index.js import "@warpjs/engine";
Что касается пользовательского интерфейса, давайте заменим содержание App.csss , App.js и добавьте Users.js Компонент я подготовил. Давайте посмотрим на то, как называется бессвесовой задний конец в Users.js. :
// imports the Warp helper module, to back-end wrapper
import WarpServer from "warp-server";
// creates an instance of the helper
const { getUsers } = new WarpServer();
// async call to the serverless function
const users = await getUsers();
Затем, когда обещание возвращается, Пользователи Переменная состояния устанавливается.
getUsers().then((data) => {
this.setState({ users: data })
})
Мы все настроили, давайте тестируем это сейчас 🤞 🙏🏻
Поскольку мы будем развернуть наш проект на облаке, нам сначала нужно аутентифицировать себя с учетной записью платформы масштабированной платформы. Если у вас еще нет, вы можете запросить Бесплатная пробная версия с этой ссылкой Отказ Это бесплатно, без спама и поставляется с бесплатными кредитами. Когда это Сделано, давайте вернемся к нашей консоли войти в систему:
npx warp login
В Директная консоль , есть по умолчанию «демонстрация». Для новых проектов вам просто нужно будет создать новый и использовать то же имя в вашем warp.config.js Атрибут «Проект».
Давайте запустим проект сейчас. Эта командная строка будет запустить эмулятор без сервера для заднего конца, со Scaledynameics и запустит сервер RACT как обычно.
# run a dev server: npm run start
Окно браузера открывается нашим замечательным списком фальшивых пользователей с Avatars Lego. Не стесняйтесь обновлять передний или задний конец, не убивая свои серверы, она оба поддерживает Live-Reled 😎
Теперь давайте убьем этот локальный сервер (Ctrl + C дважды) и разверните его на облаке.
# build and deploy to production npm run build npm run deploy
Scaledynameics разворачивает задний конец на функциях GCP платформы FAA
Итак, на этом шаге вы получаете свой URL-адрес, клиент и сервер, которые размещены. На протяжении всего процесса нам не нужно было иметь дело с любыми HTTP-запросами, маршрутом, безопасностью, конечными точками, ошибками … с сохраняющимися многие головные боли и тонн времени.
Чтобы интегрировать с другими рамками, вы можете найти много Образцы кода Для многих случаев использования в Github я недавно записываю Учебное пособие видео для Vue. JS и вы можете найти пошаговые учебные пособия для Угловой и Vue.js Отказ
Я надеюсь, что вы нашли этот учебник полезным, и если у вас есть какие-либо вопросы, не стесняйтесь оставлять его в разделе «Комментарий» ниже 🙂
Последняя статья в этой серии является угловой, поэтому оставаться настроенными 🤟
Большое благодаря Николас Пеннек Кто разработал приложение, которое мы взяли в качестве примера. Он является экспертом JavaScript в масштабировании. Он сооберегает Rennesjs, французский JavaScript встреча, поэтому, если вы приедете Brittany, вы более чем приглашаете присоединиться к нам!
Оригинал: “https://dev.to/scaledynamics/4-steps-to-add-a-serverless-back-end-to-react-5na”