Я пытаюсь использовать Gitlab CI для создания и размещения страницы сборника рассказов, когда я отправляю обновление в любую ветку. Вот текущий сценарий CI:
image: node:16
stages:
- setup
- build-and-test
- deployment
- pages
# stage: setup
setup:
stage: setup
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- node_modules/
artifacts:
paths:
- node_modules/
script:
- yarn
# stage: build-and-test (here I run linter, unit tests, and everything I want to build or test)
build:
stage: build-and-test
artifacts:
paths:
- dist/
script:
- yarn build
storybook:
stage: build-and-test
artifacts:
expire_in: 2 weeks
when: always
paths:
- storybook/
script:
- yarn build-storybook --output-dir storybook
# stage: deployment (here I deploy my app to specific stages or other artefacts like storybook)
deploy-storybook:
stage: deployment
script:
- echo "Enjoy the day. 🥳 Every job needs a script, but this job was just created to configure an environment."
environment:
name: storybook/$CI_COMMIT_REF_SLUG
url: https://<my_username>.gitlab.io/<my_project>/$CI_COMMIT_REF_SLUG/storybook/
on_stop: remove-storybook
only:
- branches
remove-storybook:
stage: deployment
cache:
key: 'my-storybook'
paths:
- public
script:
- rm -rf "public/$CI_COMMIT_REF_SLUG/storybook"
when: manual
variables:
GIT_STRATEGY: none # needed to prevent "Couldn't find remote ref" error
environment:
name: storybook/$CI_COMMIT_REF_SLUG
action: stop
# stage: pages (the stage name is custom, but the job NEEDS to be named pages)
pages:
stage: pages
cache:
key: 'my-storybook'
paths:
- public
script:
- if [ "$CI_COMMIT_REF_NAME" = "main" ]; then
mkdir -p public;
touch public/index.html;
echo "<!DOCTYPE HTML><script>window.location.href = 'https://<my_username>.gitlab.io/<my_project>/main/storybook'</script>" > public/index.html;
fi;
- rm -rf "public/$CI_COMMIT_REF_SLUG"
- mkdir -p "public/$CI_COMMIT_REF_SLUG";
- mv storybook "public/$CI_COMMIT_REF_SLUG"
artifacts:
paths:
- public
Это компилируется по назначению, но при просмотре в консоли появляются ошибки:
iframe.html:1 Access to script at 'https://gitlab.com/oauth/authorize?client_id=<my_client_id>&redirect_uri=https://projects.gitlab.io/auth&response_type=code&state=AFyDa1QTpsd9qXqSzdoy4w==&scope=api' (redirected from 'https://<my_username>.gitlab.io/assets/iframe.8696a5de.js') from origin 'https://<my_username>.gitlab.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
iframe.html:374 GET https://gitlab.com/oauth/authorize?client_id=<my_client_id>&redirect_uri=https://projects.gitlab.io/auth&response_type=code&state=AFyDa1QTpsd9qXqSzdoy4w==&scope=api net::ERR_FAILED 302
Соответствующий раздел https://<my_username>.gitlab.io/<project_name>/<branch>/storybook/assets/iframe.html
:
<head>
...
<script defer src = "/node_modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
<!-- iframe.html:374 -->
<script type = "module" crossorigin src = "/assets/iframe.8696a5de.js"></script>
<link rel = "stylesheet" href = "/assets/iframe.0f83afa4.css">
...
</head>
.storybook/main.cjs
const { resolve } = require("path");
const { typescript: preprocessTS } = require("svelte-preprocess");
const { loadConfigFromFile, mergeConfig } = require("vite");
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-svelte-csf"
],
"framework": "@storybook/svelte",
"core": {
"builder": "@storybook/builder-vite"
},
"svelteOptions": {
"preprocess": import("../svelte.config.js").preprocess
},
svelteOptions: {
preprocess: [
preprocessTS(),
],
},
async viteFinal(config, { configType }) {
const { config: userConfig } = await loadConfigFromFile(
resolve(__dirname, "../vite.config.ts")
);
return mergeConfig(config, {
...userConfig,
// manually specify plugins to avoid conflict
plugins: []
});
}
}
Что я могу сделать, чтобы исправить эту ошибку импорта скрипта? Я думаю, что сгенерированный URL-адрес в теге сценария неверен и вместо этого должен быть чем-то похожим на https://<my_username>.gitlab.io/<project_name>/<branch>/storybook/assets/iframe.8696a5de.js
(вместо текущего https://<my_username>.gitlab.io/assets/iframe.8696a5de.js
). Можно ли каким-либо образом отредактировать CI, чтобы отредактировать корневой URL-адрес?
Если это не сработает, то почему и что сработает вместо этого?
Я нашел обходной путь, но я бы не считал его правильным решением. Если вы застряли с этой проблемой, работает следующее:
Я использовал замену регулярных выражений в GitLab CI, чтобы исправить пути src
и href
всех ссылок во встроенных файлах index.html
и iframe.html
. Точный код, который я использовал, выглядит следующим образом:
- sed -i -E "s/((src|href)=\")/?/\1.//g" public/$CI_COMMIT_REF_SLUG/storybook/index.html
- sed -i -E "s/((src|href)=\")/?/\1.//g" public/$CI_COMMIT_REF_SLUG/storybook/iframe.html
Это изменение необходимо по 2 причинам:
<user>.gitlab.io/<repo>/
). Любые ссылки с этой страницы, начинающиеся с косой черты, будут искать свои ресурсы по адресу <user>.gitlab.io/
, и ресурса там не будет, но система никогда не зайдет так далеко (см. ниже).Замена регулярного выражения устраняет эти проблемы, заменяя любой ресурс, написанный как path/name.ext
или /path/name.ext
, на ./path/name.ext
, что в моем случае работает и, надеюсь, будет работать для всех, кому это нужно.