Vercel как пользоваться

GitHub Actions и Vercel — быстрое развертывание проектов

Vercel — один из лучших хостингов благодаря своей простоте и адаптивности. Он позволяет максимально быстро размещать проекты и практически не требует настройки. Применение Vercel с GitHub для развертывания проектов делает разработку намного более увлекательной. Отправка нового обновления на GitHub позволяет автоматически развертывать код, оптимизируя процесс CI/CD.

Что такое GitHub Actions?

GitHub Actions — это платформа CI/CD для автоматизации рабочих процессов сборки, тестирования и развертывания. С помощью этих процессов вы можете создавать и тестировать пул-реквесты в личном репозитории или развертывать объединенные пул-реквесты в производственном репозитории.

GitHub Actions упрощает автоматизацию всех действий с ПО. В настоящее время эта платформа включает первоклассные технологии CI/CD, позволяющие настраивать ревью кода, управление ветками и сортировку issue.

Как GitHub Actions взаимодействует с Vercel

GitHub Actions автоматически развертывает проекты GitHub с помощью Vercel, предоставляя предварительные URL-адреса развертывания и автоматические обновления пользовательских доменов. Когда вы создаете новый проект Vercel на GitHub и обеспечиваете автоматическое развертывание в каждой ветке, Vercel отслеживает каждую отправку изменений в ветку и развертывает по умолчанию. Если Vercel уже работает с предыдущим коммитом, то текущий процесс отменяется для создания самого последнего коммита. Таким образом, всегда происходит развертывание самых актуальных изменений.

• 1 вариант для тестирования: модель Fork .
• 2 вариант для тестирования: tmate .

GitHub Actions в действии

Посмотрим, как развернуть приложение на Vercel с помощью GitHub Actions. Для этой цели я создал и отправил простой проект React в свой репозиторий GitHub. Клонируйте репозиторий на свой компьютер и следуйте описанным инструкциям.

Настройка Vercel

Для настройки GitHub Actions с Vercel требуются его project ID и org ID . Для этого выполняем следующую команду и действуем согласно указаниям:

vercel

Эта команда создает файл .vercel/package.json , в котором генерируются projectId и orgId .

Вы можете указать Vercel не запускать развертывание проекта при отправке кода на GitHub. Тогда рабочий процесс GitHub Actions начнет выполняться только в случае релиза, отправки изменений в конкретную ветку или ручного запуска рабочего процесса. С этой целью создаем файл vercel.json в корневой директории проекта и добавляем следующие конфигурации:

 "github": "enabled": false, 
"silent": true 
>
>

Теперь необходимо сгенерировать токен на Vercel для использования CLI на GitHub Actions. После этого копируем его и сохраняем в надежном месте для последующего применения.

Отправляем проект на GitHub и по завершении отправки переходим в него. Во вкладке настроек нажимаем Secrets > Actions и добавляем учетные данные Vercel в проект. На странице Actions нажимаем кнопку Create repository secret и добавляем секретные ключи.

• VERCEL_ORG_ID : orgId в файле .vercel/package.json в корневой директории проекта.
• VERCEL_PROJECT_ID : projectId в файле .vercel/package.json в корневой директории проекта.
• VERCEL_TOKEN : сгенерированный токен Vercel.

Создав учетные данные, переходим к настройке рабочего процесса.

Настройка рабочего процесса GitHub

После добавления учетных данных Vercel в проект приступаем к настройке рабочего процесса GitHub для обеспечения непрерывного развертывания. С этой целью создаем файл .github/workflows/deploy.yml в корневой директории проекта и добавляем нижеуказанные конфигурации:

# Данный рабочий процесс выполняет чистую установку зависимостей, кэширует/восстанавливает их, создает исходный код и запускает тесты на разных версиях узла. 
# Дополнительная информация предоставлена по ссылке: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 

name: "Deploy CI" 

on: 
release: 
types: 
- published 
push: 
branches: 
- main 
workflow_dispatch: 

jobs: 
vercel: 
runs-on: ubuntu-latest 
name: "Deploy application" 
 
steps: 
- uses: actions/checkout@v2 
- uses: actions/setup-node@v1 
with: 
node-version: '14' 
registry-url: https://registry.npmjs.org/ 
 
- name: "Deploy application" 
run: | 
prodRun="" 
if [[ $ == "refs/heads/main" ]]; then 
prodRun="--prod" 
fi 
 
npx vercel --token $ $prodRun 
env: 
VERCEL_TOKEN: $>

Теперь фиксируем изменения и отправляем код на GitHub. Как только код отправлен, GitHub Actions запускает автоматическое развертывание.

Заключение

Из статьи вы узнали, как настроить GitHub Actions для развертывания проекта на Vercel. Теперь вы имеете представление о GitHub Actions и взаимодействии этой платформы с Vercel. С дополнительными конфигурациями для проекта можно ознакомиться по этой ссылке.

• 3 верных способа оптимизировать ревью на GitHub
• Новичок! Ты должен был выучить Git ещё вчера
• Основы CI/CD

Команда vercel: опции, ключи и примеры использования

Общие команды – Общие команды, присущие различным операционным системам.

vercel

Deploy and manage your Vercel deployments. More information: https://vercel.com/docs/cli.

• Deploy the current directory:

• Deploy the current directory to production:

• Deploy a directory:

• Initialize an example project:

• Deploy with Environment Variables:

• Build with Environment Variables:

• Set default regions to enable the deployment on:

• Remove a deployment:

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

Трюки Bash

Полезные заметки по работе с командной строкой: bash и прочие *sh. Однострочники, скрипты, позволяющие решать большие и малые задачи администрирования и настройки Юникс систем. Zsh для современного MacOS, Bash для …

Заметки о настройке различных IT-штуковин. Настройка, допиливание, полировка. Конфигурируем приложения и тюнингуем сервера. Полезные параметры и ключи запуска программ. Увеличиваем скорость, уменьшаем отклик, ускоряем работу и улучшаем результаты работы. Объясняем …

Терминал/Консоль

Команды и инструкции терминала (консоли) Linux, MacOS, Windows и прочих операционных систем. Трюки и особенности командных оболочек, скрипты для администрирования Unix. Программирование и скриптование Windows и Linux, тонкая настройка Macos. …

Также может быть вам интересно:

• Как получить дерево директорий на Bash одним однострочником
• Python: Функции
• Python: Встроенные типы данных (list, set, dict, etc)
• Python: типы данных, переменные, логическое ветвление и циклы
• Как сделать свою middleware в Django (с примерами)

Свежее на «Цифре»
MessageId или как дебажить систему с минимумом проблем
Программы, 50 дней назад
Проверочный список для выпуска промышленных приложений с иллюстрациями
Работа и управление, 91 день назад
В Google Pixel и Windows Snipping Tool есть возможность восстановления обрезанных изображений
Новости, 23.03.2023
Два подарка «под ёлочку» от Heroes of Might and Magic
Новости, 25.12.2022
Вышел Pulsar – редактор кода на основе Atom
Новости, 25.12.2022
Ленивый backup PostgreSQL
Программы, 17.12.2022
Google анонсировала OSV-Scanner: сканер уязвимостей в программных проектах
Новости, 16.12.2022

Gitea запускает коммерческую версию, а недовольные – форк Forĝejo

На днях группа бывших разработчиков Gitea решили создать на базе хостинга кода Gitea свою версию проекта – «Forgejo». Причиной тому …

Пользователи и их создание в Django — своя регистрация на сайте

Если вашим сайтом должны активно пользоваться несколько человек, то полезно их различать, а значит — надо уметь создавать пользователей, либо …

Новый синтаксис старой команды with в Python 3.10

Как же долго моё чувство прекрасного страдало… Но в Python 3.10 появился новый парсер синтаксических конструкций Python!

Добавляем постраничную пагинацию на Django сайт

На сайтах часто встречаются многостраничные объекты: список товаров, список заметок и т.д. Поэтому важно уметь добавить навигацию по страницам на …

Новый оператор match-case в Python

В новой версии Python (3.10) появится новый оператор. Новый оператор сопоставления по шаблону (match-case).

Нет слов, одни. однострочники

На днях вышел пост со списком полезных однострочников для JavaScript программистов. Памятуя Perl-овую молодость, заглянул туда.

Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

В Django вы можете передавать данные в шаблоны посредством контекстов. Контекст передаётся из контроллера (view в терминах Django), однако, если …

Пример своей консольной команды в Django проекте

Если вы работали с Django проектом, то, скорее всего, запускали команды из консоли (manage.py). В Django есть простой способ писать …

Разграничение прав доступа на Django сайте

Почти на любом веб-сайте необходимо разделять пользователей на группы и предоставлять им разные возможности. В Django есть довольно серьёзная система …

Как выгружать свой сайт на vercel (бывший now.sh).

В случае статического файла vercel берет все файлы из корневой директории и публикует их на сервере. Когда вы заходите по ссылке, которую вам дал vercel он находит index.html и открывает его для вас.

В случае webpack/react vercel выгружает проект на сервер и запускает build команду из файла package.json .

После этого vercel выгружает все из папки, которую вы указали как Output directory (по умолчанию — public).

Что делать, если я неправильно указал параметры при конфигрурировании vercel ?

Короткий ответ — написать в консоли vercel — help и постараться разобраться самому.

• Шаг 1: Получить список всех ваших проектов/выгрузок: vercel ls .
• Шаг 2: Удалить проект/выгрузку, которую вы неправильно сконфигурировали: vercel rm **projectName** .
• Шаг 3: Удалить папку .vercel из корня проекта (она скрытая).
• Шаг 4: Сконфигурировать заново.

P.S: Самая частая проблема – выбор настроек на этапе Want to override the settings? . После раскрытия списка возможных опций для перезаписывания передвигайтесь с помощью кнопок вверх/вниз и выбирайте пробелом какие опции вы хотите перезаписать. После этого нажимаете enter и пишете значения для этих опций.

Начало работы #

Vite (с французского «быстрый», произносится /вит/ ) — это инструмент сборки, созданный для обеспечения быстрого и бережливого (lean) процесса разработки современных веб-проектов. Он состоит из двух основных частей:

• Dev сервер, который предоставляет более расширенный функционал, чем нативные ES модули, для примера, невероятно быстрый Hot Module Replacement (HMR).
• Команда сборки, которая связывает ваш код с Rollup, предварительно настроенным для вывода высоко оптимизированных статичных ресурсов (assets) для production.

Vite самодостаточный и имеет практичные настройки по умолчанию прямо из коробки, но он также может очень гибко настраиваться и расширять свой функционал через его Plugin API и JavaScript API с полной поддержкой типов.

Вы можете узнать больше о причинах этого в разделе Почему Vite.

Browser Support (Поддержка бразуерами) #

• Сборка по умолчанию нацелена на браузеры, которые поддерживают и нативные ESM через script tag и нативный ESM dynamic import. Для поддержки устаревших браузеров воспользуйтесь официальным плагином @vitejs/plugin-legacy — смотрите раздел Сборка для Production для детального ознакомления.

Быстрое развёртывание вашего Vite проекта (scaffolding) #

примечание о совместимости

Vite требует обязательным Node.js версии >=12.0.0.

$ npm init vite@latest 

$ yarn create vite 

$ pnpm dlx create-vite 

Потом следуйте инструкциям!

Вы можете также прямо указать название проекта и шаблон, который вы хотите использовать через дополнительные опции командной строки. Например, чтобы развернуть Vite + Vue проект, выполните следующую команду:

# npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, дополнительное двойное тире обязательно: npm init vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue 

Поддерживаемые пред установки шаблонов включают:

• vanilla (чистый JS)
• vanilla-ts (TypeScript и ничего больше)
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

Смотрите раздел create-vite для более детального ознакомления с каждым шаблоном.

Community Templates (Шаблоны Сообщества) #

create-vite — это инструмент для быстрого старта проекта из основного шаблона для популярных фреймворков. Смотрите Awesome Vite, чтобы найти шаблон поддерживаемый сообществом, который включает в себя другие нужные вам инструменты или нацелен на использование других фреймворков. Вы можете использовать такой инструмент как degit чтобы развернуть свой проект с одним из шаблонов.

npx degit user/project my-project cd my-project npm install npm run dev 

Если проект использует по умолчанию ветку main , добавьте суффикс #main к репозиторию проекта

npx degit user/project#main my-project 

index.html и корень проекта #

Вы должно быть уже заметили что в проекте Vite, файл index.html является центральным файлом, а не спрятанным внутри папки public . Это сделано намеренно: во время разработки Vite является сервером, а index.html — это точка входа (entry point) в ваше приложение.

Vite рассматривает index.html как исходный код и как часть графа модуля. Vite обрабатывает строчку , которая ссылается на ваш исходный JavaScript код. Даже встроенный и CSS, на который есть ссылка также обладают специфичными для Vite фичами. В дополнение, URL адреса внутри index.html автоматически преобразуются в нужный формат, поэтому нет необходимости использовать специальный заполнитель (placeholder) %PUBLIC_URL% .

Подобно статическим http серверам, Vite имеет концепцию корневого каталога «root directory», из которого сёрвятся ваши файлы (обрабатываются сервером). Далее в документации для этого корневого каталога применяется обозначение . Абсолютные URL адреса в вашем исходном коде будут обработаны (резолвнуты) используя корневой каталог как основу (base), поэтому Вы можете писать код так, как будто вы работаете с обычным статическим файловым сервером (но более мощным!). Vite также способен управлять зависимостями, которые резолвятся вне корневой директории файловой системы, что делает его пригодным для использования даже в монорепах.

Vite также поддерживает multi-page apps с многими .html точками входа (entry points).

Указание альтернативного корневого каталога (рута, root) #

Запуск vite поднимает dev сервер используя текущую рабочую директорию как рутовую (root). Вы можете указать альтернативный рут с помощью команды: vite serve some/sub/dir .

Command Line Interface (Интерфейс Командной Строки) #

В проекте где установлен Vite, вы можете использовать vite бинарник прямо в ваших npm скриптах, или запускать это напрямую с помощью команды npx vite . Дефолтные npm скрипты в развёрнутом Vite проекте:

 "scripts":  "dev": "vite", // запускает dev server "build": "vite build", // (build) сборка для production "serve": "vite preview" // локальная preview production build > > 

Вы можете указать дополнительные CLI опции такие как —port или —https . Чтобы посмотреть полный список CLI опций, выполните команду npx vite —help в вашем проекте.

Использование Невыпущенных Коммитов (Unreleased Commits) #

Если вы не можете дождаться новых релизов последних фич, то вам нужно склонить vite repo на свой локальный компьютер и затем собрать проект и пролинковать его с помощью Yarn (Yarn 1.x обязателен):

git clone https://github.com/vitejs/vite.git cd vite yarn cd packages/vite yarn build yarn link 

Затем нужно перейти в ваше Vite проект и выполнить команду yarn link vite . Теперь перезапустите дев сервер ( yarn dev ) чтобы быть впереди планеты всей!

Сообщество #

Если у Вас есть какие-то вопросы или Вам нужна помощь, обращайтесь к нашему сообществу в Discord и GitHub Discussions.