Да, вы можете настроить GitHub Pages для развертывания двух экземпляров Storybook в одном репозитории. Для этого нужно немного изменить конфигурацию Vite и использовать разные рабочие процессы GitHub Actions для развертывания. Давайте подробно разберем ваши вопросы.
### 1) Можно ли добавить постфикс к пути в URL в окружении?
К сожалению, в GitHub Actions вы не можете вручную задать путь к URL в `environment.url`, чтобы он включал подкаталог. Значение `url` извлекается из выхода `build-publish` и приводит к корневому URL для страницы GitHub, что делает невозможным добавление подкаталогов непосредственно в этом месте.
Тем не менее, вы можете решить эту задачу, изменив конфигурацию Vite для каждого из ваших Storybook.
Пример конфигурации для Vue:
```js
// vue/.storybook/main.js
module.exports = {
// другие настройки...
viteFinal: async (config) => {
config.base = '/vue/';
return config;
},
};
```
Пример конфигурации для React:
```js
// react/.storybook/main.js
module.exports = {
// другие настройки...
viteFinal: async (config) => {
config.base = '/react/';
return config;
},
};
```
### 2) С чем может быть связана ошибка при деплое Vue?
Ошибки в процессе деплоя могут возникать по ряду причин. Вот некоторые шаги по отладке, которые вы можете предпринять:
1. **Убедитесь, что зависимости установлены**: Иногда локальные сборки проходят успешно, потому что у вас установлены зависимости, которые отсутствуют в среде GitHub Actions. Проверьте, что все необходимые зависимости указаны в `package.json`.
2. **Логи деплоя**: Проверьте вывод действий GitHub. В логах деплоя должно быть указано, что именно вызвало ошибку. Это может быть проблема с конфигурацией сборки, неправильный импорт или ошибка в коде.
3. **Конфигурация Vite для Vue**: Убедитесь, что Ваша конфигурация Vite для Vue настроена правильно и соответствует той, что используется при локальной сборке.
4. **Структура файлов**: Убедитесь, что ваша папка с Vue Storybook и конфигурационные файлы находятся на правильном уровне, чтобы GitHub Actions мог их найти.
5. **Кросс-оригинальные ошибки (CORS)**: Если вы используете внешние ресурсы или API, убедитесь, что они доступны из вашего деплоя.
6. **Проверка асинхронных задач**: Если в вашем Vue Storybook есть какие-либо асинхронные операции, убедитесь, что они корректно обрабатываются. Иногда такие ошибки могут проявляться только в среде CI/CD.
### Пример конфигурации для GitHub Actions
Вот пример отдельных workflows для ваших приложений:
#### Vue Storybook
```yaml
name: Deploy Vue Storybook
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install dependencies
run: npm install
- name: Build Vue Storybook
run: npm run build:storybook # Убедитесь, что эта команда собирает Storybook
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist/vue # Укажите путь к собранному Vue Storybook
publish_branch: gh-pages
publish_dir: ./dist/vue
```
#### React Storybook
Аналогично, создайте отдельный workflow для React Storybook, изменив пути и команды сборки соответственно.
Таким образом, вы сможете иметь два разных развертывания на одной и той же GitHub странице, используя разные подкаталоги.