私は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
Reactアプリの2つのバージョンに2つの異なるURLが必要です。どうすればよいですか?
たとえば、今、私は持っています:
my-react-app.com
はmaster
ブランチにリンクされています
どうすればいいですか
dev.my-react-app.com
あるいは my-react-app.gitlab.io
はdevelop
ブランチにリンクされていますか?
さまざまなパイプライン/ブランチに対して公開された複数のページを保持することが可能です。
そのためには、ページのコンテンツ(基本的にはテストレポート、または公開する必要のあるもの)をパブリックフォルダ内の特定の一意のディレクトリにコピーする必要があります。たとえば、ディレクトリの名前はパイプラインのID(CI_PIPELINE_ID)にすることができます。したがって、ページのソースへのパスはpublic/$ CI_PIPELINE_ID /のようになります。
次に、パブリックフォルダー全体を特定の一意の名前のアーティファクトとして定義する必要があります(ここでも「$ CI_PIPELINE_ID」を使用できます)。
アーティファクトをオーバーライドしないようにするには、アーティファクトの一意の名前が必要です次のパイプラインの実行でアーティファクトを指定します(名前が指定されていない場合、デフォルト名が使用されます https:// docs .gitlab.com/ee/ci/yaml /#artifactsname )。
次に、公開されたレポートにリンクからアクセスできます。
https://yourGitlab/yourNamespace/yourProjectName/{CI_PIPELINE_ID}/index.html
つまり、パイプラインIDを変更することで、保存されているすべてのレポートにアクセスできます。
私の例:
stages:
- publish
cache:
# Required to keep artifacts from old builds, e.g. from master
paths:
- public
pages:
stage: publish
script:
- mkdir -p public
- 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
私はこの目的のためにブラウズ可能なアーティファクトを使用して成功しました。この例では、開発ブランチのジョブを作成し、_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が機能するために必要です。
すべてのGitLabプロジェクトは最大で1つのページサイトを持つことができます。これに対する明示的な参照は見つかりませんが、 .gitlab-ci.yml
のドキュメント は次のように述べています。
ページはデフォルトではブランチ/タグに依存せず、その展開は
.gitlab-ci.yml
で指定したものにのみ依存することに注意してください。pages
パラメーター でonly
ジョブを制限しない場合、新しいコミットがブランチまたはタグにプッシュされると、ページは上書きされます。
only
パラメータがない場合、ブランチの更新はsamePagesサイトに発行され、そこにあるものはすべて上書きされます。 only
パラメーターを使用すると、指定されたブランチのみがPagesビルドをトリガーします。