Я развертываю свое приложение React с помощью GitLab Pages, и оно работает хорошо.
Вот мой gitlab-ci.yml
:
# Using the node alpine image to build the React app
image: node:alpine
# Announce the URL as per CRA docs
# https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration
variables:
PUBLIC_URL: /
# Cache node modules - speeds up future builds
cache:
paths:
- client/node_modules
# Name the stages involved in the pipeline
stages:
- deploy
# Job name for gitlab to recognise this results in assets for Gitlab Pages
# https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements
pages:
stage: deploy
script:
- cd client
- npm install # Install all dependencies
- npm run build --prod # Build for prod
- cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46
- mv public _publiC# CRA and gitlab pages both use the public folder. Only do this in a build pipeline.
- mv build ../publiC# Move build files to public dir for Gitlab Pages
artifacts:
paths:
- publiC# The built files for Gitlab Pages to serve
only:
- master # Only run on master branch
Теперь я только что создал версию для разработчиков на основе своей ветки develop
Я хотел бы иметь 2 версии моего приложения React с 2 разными URL-адресами. Как я могу это сделать?
Например, сейчас у меня есть:
my-react-app.com
ссылка на master
ветку
Как я должен
dev.my-react-app.com
или даже my-react-app.gitlab.io
связан с develop
веткой?
Каждый проект GitLab может иметь не более одного сайта Pages. Я не могу найти явную ссылку на это, но документация для .gitlab-ci.yml
говорит:
Be aware that Pages are by default branch/tag agnostic and their deployment relies solely on what you specify in
.gitlab-ci.yml
. If you don’t limit thepages
job with theonly
parameter, whenever a new commit is pushed to whatever branch or tag, the Pages will be overwritten.
Без параметра only
обновления любой ветки публикуются на сайте такой же Pages, перезаписывая все, что там есть. С параметром only
только указанная ветка будет запускать сборку Pages.
Я успешно использовал для этой цели доступные для просмотра артефакты. В вашем примере вы должны создать задание для своей ветки разработки и установить PUBLIC_URL
путь к gitlab.io
, где публикуются артефакты задания:
develop:
artifacts:
paths:
- public
environment:
name: Develop
url: "https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html"
script: |
# whatever
stage: deploy
variables:
PUBLIC_URL: "/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public"
Установка environment
, как указано, создает ссылку «Проверить приложение» в соответствующих мерж-реквестах, что позволяет вам добраться до артефактов одним щелчком мыши.
Примечание: если ваш репозиторий находится в подгруппа, вам нужно вставить имя подгруппы в двух местах выше между /-/
и $CI_PROJECT_NAME
, чтобы результирующие URL-адреса работали.
Я не уверен, что это работает во всех случаях, особенно когда репо находится в подгруппе, что меняет шаблон $CI_ENVIRONMENT_URL
. См. этот вопрос для более подробной информации.
можете ли вы поделиться общедоступным репо, содержащим это?
@KarlAnthonyBaluyot, этот минимальное репо предыдущего комментатора использует эту технику, хотя и слегка измененную для проекта в подгруппе. Вам это помогает?
Да, спасибо @joki. Вы пытались использовать собственный домен для страницы gitlab ветки разработки?
@KarlAnthonyBaluyot Я не пробовал, но это должно быть довольно просто, заменив gitlab.io
вашим личным доменом в environment.url
и настроив генератор страниц для своего личного домена.
Документация по этой функции находится по адресу docs.gitlab.com/ee/ci/yaml/#environmenturl.
@joki, это было отличное предложение - репозиторий отличный - спасибо!
Можно оставить несколько опубликованных страниц для разных пайплайнов/веток.
Для этого вам нужно скопировать содержимое ваших страниц (в основном тестовый отчет или что-то еще, что нужно опубликовать) в конкретный уникальный каталог в общей папке. Например, имя каталога может быть идентификатором конвейера (CI_PIPELINE_ID). Таким образом, путь к источникам страниц будет выглядеть как общедоступный/$CI_PIPELINE_ID/.
Затем вся общая папка должна быть определена как артефакты с конкретное уникальное имя (здесь снова можно использовать "$CI_PIPELINE_ID").
Уникальное имя для артефактов необходимо, чтобы не переопределять артефакты при следующем выполнении конвейера (если имя не указано, будет принято имя по умолчанию https://docs.gitlab.com/ee/ci/yaml/#artifactsимя).
Затем вы можете получить доступ к опубликованному отчету по ссылке:
https://yourGitlab/yourNamespace/yourProjectName/{CI_PIPELINE_ID}/index.html
, это означает, что вы можете получить доступ ко всем своим сохраненным отчетам, изменив идентификатор конвейера.
Мой пример:
stages:
- publish
cache:
# Required to keep artifacts from old builds, e.g. from master
paths:
- public
pages:
stage: publish
script:
- mkdir -p public/$CI_PIPELINE_ID
- cp target/site/allure-maven-plugin/* public/$CI_PIPELINE_ID/ -R
artifacts:
name: "$CI_PIPELINE_ID"
paths:
- public
expire_in: 5 days
when: always
Можете ли вы опубликовать ссылку на репозиторий GitLab, где это действительно работает? У меня не работает: gitlab.com/ostrokach/deleteme
Привет, я не могу опубликовать ссылку на репозиторий, потому что он частный. Можете ли вы попробовать точно так же, как я предложил (имею в виду копирование структуры папок в общий доступ)? Потому что я вижу, что ты делаешь это по-другому
Привет Владислав Пирожок, спасибо за ваш вклад! Я попробовал ваш пример, основанный на коде @ostrokach, но не дал ожидаемого результата. Каждый раз, когда я запускаю конвейер, мой ранее развернутый файл больше не будет присутствовать. Посмотрите : gitlab.com/alvaro.costa/deleteme/blob/master/.gitlab-ci.yml
Извините, ребята, я просто пропустил один небольшой фрагмент кода в файле конвейера: cache: paths: - public
Так что, пожалуйста, добавьте его, и я надеюсь, что он будет работать. Я тестировал в своем репозитории здесь https://gitlab.com/pyrozhok.vladyslav/pages-test, так что вы можете проверить. Результаты: отчет_1, отчет_2. Я обновил ответ.
Также убедитесь, что вы запускаете несколько конвейеров с одним и тем же файлом gitlab-ci.
У вас была возможность проверить? @альваро-коста
Извини, Владислав, я не видел твоего ответа, пока ты не отметил меня. :-(
Что касается вашего решения, оно действительно работает, разумно используя кеш GitLab... но это грязное решение, поскольку оно не основано на том, что уже доступно на странице GitLab. Если ваш кеш очищен или истекает (предприятия обычно устанавливают время истечения), вы теряете все. Вместо этого я бы предложил посмотреть на решение Джоки. :)
@alvaro-costa Если ваш проект общедоступен и вы можете опубликовать свои результаты в мире, тогда он будет работать. В противном случае, если вы не можете открыть свою веб-страницу в Интернете (как в моем случае), это не очень удобное решение. В любом случае, выбирайте то, что вам больше подходит :)
Вы достигли пользовательского домена, такого как
dev.my-react-app.com
, в ветке разработки?