diff --git a/pages/lesson-2/_meta.ru.json b/pages/lesson-2/_meta.ru.json index bd998a0..cb35e36 100644 --- a/pages/lesson-2/_meta.ru.json +++ b/pages/lesson-2/_meta.ru.json @@ -1,5 +1,6 @@ { "chapter-1": "Глава 1. React-hook-form", "chapter-2": "Глава 2. Валидация форм", - "chapter-3": "Глава 3. Рефакторинг" + "chapter-3": "Глава 3. Рефакторинг", + "chapter-4": "Глава 4. Деплой на Vercel" } diff --git a/pages/lesson-3/chapter-2.en.mdx b/pages/lesson-2/chapter-4.en.mdx similarity index 100% rename from pages/lesson-3/chapter-2.en.mdx rename to pages/lesson-2/chapter-4.en.mdx diff --git a/pages/lesson-2/chapter-4.ru.mdx b/pages/lesson-2/chapter-4.ru.mdx new file mode 100644 index 0000000..47c545d --- /dev/null +++ b/pages/lesson-2/chapter-4.ru.mdx @@ -0,0 +1,90 @@ +import { Callout } from 'nextra/components' + +# Деплой на Vercel + +Деплой на Vercel происходит автоматически при пуше в ветку `master`. + +## Деплой проекта + +1. Зарегистрируйтесь на [Vercel](https://vercel.com/signup). + Рекомендую использовать GitHub для авторизации. + +2. Перейдите на [страницу dashboard](https://vercel.com/dashboard), нажмите на кнопку `Add New` и выберите `Project`. + ![Add new project](./images/vercel-new-project.png) + +3. Убедитесь что у vercel есть все разрешения для GitHub и выберите репозиторий с проектом. + ![Select repository](./images/vercel-select-repository.png) + +4. Никаких настроек делать не нужно - просто нажмите `Deploy`. + +5. После деплоя, вам будет доступен URL вашего проекта. + +Но, наша задача - задеплоить не только проект, но и **Storybook**. + +## Деплой Storybook + +1. Создайте новую ветку `storybook-deploy` и переключитесь на нее. + +2. В корне проекте создайте файл `vercel.json` со следующим содержимым: + + ```json filename="vercel.json" + { + "$schema": "https://openapi.vercel.sh/vercel.json", + "buildCommand": "pnpm run build-storybook", + "devCommand": "pnpm run storybook", + "installCommand": "pnpm i", + "framework": null, + "outputDirectory": "./storybook-static" + } + ``` + +3. Закоммитьте и запушьте изменения в ветку `storybook-deploy`. + +4. Перейдите в настройки проекта на Vercel и добавьте домен для ветки `storybook-deploy`. + ![Add domain](./images/add-domain.png) + + + Если у вас нет собственного домена - можете использовать саб-домены vercel.app, как на скриншоте + +5. После этого, при каждом пуше в ветку `storybook-deploy`, Vercel будет автоматически деплоить Storybook. + +## Настройка github actions + +Для того что бы не мерджить две ветки вручную при каждом изменении в проекте, можно настроить github actions. + +1. В ветке master/main создайте файл `.github/workflows/deploy-storybook.yml` со следующим содержимым: + + ```yml filename=".github/workflows/deploy-storybook.yml" showLineNumbers {5,17,18} + name: Build and Deploy Storybook + on: + push: + branches: + - 'master' + jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v2.3.1 + + - name: Merge dev -> storybook-deploy 🚀 + uses: devmasx/merge-branch@1.4.0 + with: + type: now + from_branch: master + target_branch: storybook-deploy + github_token: ${{ github.token }} + ``` + +2. В выделенных строках убедитесь что указаны правильные ветки: + + - `master` - основная ветка, иногда называется `main` + - `from_branch: master` - должна совпадать с основной веткой + - `target_branch: storybook-deploy` - ветка для деплоя Storybook, которую мы создали ранее + +3. На GitHub, в **_настройках проекта_** перейдите в `actions/general` и для Workflow Permissions выберите `Read and Write permissions` и нажмите `Save` + ![actions-setup](./images/workflow-permissions.png) + +4. Закоммитьте и запушьте изменения в основную ветку. + +5. После этого, при каждом пуше в основную ветку, GitHub Actions будет автоматически мерджить изменения в ветку `storybook-deploy`, что приведет к автоматическому деплою Storybook на Vercel. diff --git a/pages/lesson-2/images/add-domain.png b/pages/lesson-2/images/add-domain.png new file mode 100644 index 0000000..fca66e3 Binary files /dev/null and b/pages/lesson-2/images/add-domain.png differ diff --git a/pages/lesson-2/images/vercel-new-project.png b/pages/lesson-2/images/vercel-new-project.png new file mode 100644 index 0000000..a0687d7 Binary files /dev/null and b/pages/lesson-2/images/vercel-new-project.png differ diff --git a/pages/lesson-2/images/vercel-select-repository.png b/pages/lesson-2/images/vercel-select-repository.png new file mode 100644 index 0000000..f23be63 Binary files /dev/null and b/pages/lesson-2/images/vercel-select-repository.png differ diff --git a/pages/lesson-2/images/workflow-permissions.png b/pages/lesson-2/images/workflow-permissions.png new file mode 100644 index 0000000..a752bf3 Binary files /dev/null and b/pages/lesson-2/images/workflow-permissions.png differ diff --git a/pages/lesson-3/_meta.ru.json b/pages/lesson-3/_meta.ru.json index dd3f4d7..894d4e8 100644 --- a/pages/lesson-3/_meta.ru.json +++ b/pages/lesson-3/_meta.ru.json @@ -1,4 +1,3 @@ { - "chapter-1": "Глава 1.Таблицы", - "chapter-2": "Глава 1.Deploy и CI" + "chapter-1": "Глава 1.Таблицы" } diff --git a/pages/lesson-3/chapter-2.ru.mdx b/pages/lesson-3/chapter-2.ru.mdx deleted file mode 100644 index 0dcfc74..0000000 --- a/pages/lesson-3/chapter-2.ru.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Deploy - -[Деплоим сторибук и проект на Vercel по туториалу](https://dev.to/chad_r_stewart/setup-a-ci-cd-process-to-automatically-deploy-storybook-in-your-project-to-vercel-2i8d)