反応+ gitlabページ

導入

このチュートリアルでは、GitLabの展開パイプラインをGitLabページに展開する方法を示します.

必要条件

このチュートリアルでは、次のセットアップを行う必要があります

Githubアカウントhttps://github.com/join

GITLABアカウントhttps://gitlab.com/users/sign_up

GIThttps://git-scm.com/downloads

ノードとNPM -https://nodejs.org/en/download/

Git , Node & NPMを正しくインストールします.

git --version

node --version

npm --version

我々の反応アプリを作成する

あなたの選択のディレクトリでは、次のコマンドで反応アプリを作成します

npx create-react-app gitlab-pages-react-example

(あなたが望むどんな名前にでも反応するようにGitlabページを変えてください.)
プロジェクトフォルダを入力

cd gitlab-pages-react-example

使えますnpm start プロジェクトを正しくチェックするには、次のように表示しますhttp://localhost:3000

Githubにあなたの反応アプリをアップロードします

Githubに空のパブリックリポジトリを作成します.その後、ローカルの反応プロジェクトにしてGithubにコードをプッシュするために、これらのコマンドを入力してください

git remote add origin https://github.com/jtorbett23/gitlab-pages-react-example.git

(置換する必要がありますhttps://github.com/jtorbett23/gitlab-pages-react-example.git リポジトリへのリンク

git push -u origin master

GitHubリポジトリにあなたの反応するアプリケーションを見るべきです.

GitlabとGithubのリンク

あなたのGitLabアカウントにログインして、私たちが以前に作成したrepoを選ぶ
一度プロジェクトを開き、設定に移動します.次に、gitlabページが許可されていることを確認します

展開パイプラインの作成

GitLabでコードを展開するパイプラインを作成するには、.gitlab-ci.yml プロジェクトのルートレベルのファイル.
(詳しくはGitlab YAMLをお読みください.https://docs.gitlab.com/ee/ci/yaml/ )
ここでは.gitlab-ci.yml 次のようになります.

image: node

pages:
  stage: deploy
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - rm -rf public
    - cp build/index.html build/404.html
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

イメージ

image: node ノードを定義します.
注意:追加バージョンで指定できる特定のノードバージョンを必要とする場合:image: node:10.16.3

ステージ

pages:
  stage: deploy

これは様々なスクリプトを実行できるパイプラインのステージを設定します.GitLabページのために、我々はこのステージ「名前」を命名する必要があります.

キャッシング

cache:
    paths:
      - node_modules/

我々は我々のパイプラインを実行するたびに依存関係をダウンロードする必要はありませんので、私たちのNodeThangモジュールをキャッシュします.

スクリプト

scripts: 端末を介してスクリプトを実行する

npm install まず、依存関係を更新/更新する

npm run build ビルドフォルダにプロジェクトをビルドします

rm -rf public GITLABページが我々のサイト内容を認識するのを助けるために名前空間Publicを使う必要があるので、パブリックフォルダを取り除きます

cp build/index.html build/404.html 反応は、我々は我々のインデックスのコピーに404ページを設定する単一のページのアプリです.インデックスを介してエラーを処理するHTML.HTML

mv build public ビルドされたプロジェクトをパブリックからビルドして、GitLabページがいったん展開されたことを認識できるようにする

人工品

artifacts:
    paths:
      - public

アーティファクトは、パイプラインステージの出力であり、我々の公共のフォルダを出力し、我々のビルドサイトを保持します.

パイプラインステージの制限

  only:
    - master

only プロジェクトのコードブランチがこのパイプライン段階で実行されるかどうかを設定します.

GitLabページへの配備

一度あなたの.gitlab-ci.yml あなたのgithubレポgitlabにこれらの変更を同期し、それを基にパイプラインを実行するプッシュされています.
ルートフォルダは次のようになります.

-public
-src
-.gitignore
-.gitlab-ci.yml
-package-lock.json
-package.json

GITLABでci/cd >パイプラインに移動し、パイプラインが起動されていることを確認してください.パイプラインが完成すると、次のようになります.

あなたのパイプラインが完了したら、設定ページに移動し、アクセスページの下のURLをクリックしてサイトを表示できるようになります

ページは次のようになります.

注:我々は現在、南京錠を使用している南京錠を持っている
あなたが代わりにちょうどホワイトページを得るならば、あなたはあなたを編集する必要がありますpackage.json と“ホームページ”属性を追加します.私のプロジェクトのためにhttps://jtorbett23.gitlab.io/gitlab-pages-react-example/ , それで、私は「Gitlabページ反応例」として私のホームページをセットする必要があります.

{
  "homepage": "gitlab-pages-react-example",
  "name": "gitlab-pages-react-example",
  "version": "0.1.0",
...

変更を見る前に、新しいパイプラインを正常に実行するのを待つ必要があります.

ローカルマシンからの変更の展開

現在、自動的に我々のサイトを更新するかどうか見るために、ローカルに変更をしましょう.
テキストを変更するsrc/App.js から

<p>
  Edit <code>src/App.js</code> and save to reload.
</p>

閉じるこの動画はお気に入りから削除されています

<p>
  Deployment pipeline is working :)
</p>

これらの変更をプッシュし、展開パイプラインをトリガーします.終了したら、GitLabページで変更を見るべきです

パイプラインの改善

現在、我々のパイプラインは、我々が我々のパイプラインが失敗している理由を知るのが難しいでしょうラインの下でさらに発展しているときを意味する一つのステップから成ります.
それで、私たちはパイプラインを3つのステージに分けます.

ビルド

build:
  stage: build
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build

ここでは、依存関係をインストールしてキャッシュし、他の段階でアクセスできるアーティファクトとして出力されたプロジェクトをビルドします.

テスト

test:
  stage: test
  cache:
    paths:
      - node_modules/
    policy: pull
  script:
    - npm run test

ここでは、policy: pull テストスクリプトを実行するには
この段階では、テストスクリプトを更新する必要がありますpackage.json すべてのテストスクリプトを見つけることを確認します.

...
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --watchAll=false",
    "eject": "react-scripts eject"
  }
...

これはオプション--watchAll=false .

展開

pages:
  stage: deploy
  dependencies: 
    - build
  script:
    - rm -rf public
    - cp build/index.html build/404.html
    - mv build public
  artifacts:
    paths:
      - public

ここでビルドビルドプロジェクトをビルドステージのアーティファクトから取り出し、コードを通常通りに展開します.
こちらがファイナル.gitlab-ci.yml :

image: node

build:
  stage: build
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build

test:
  stage: test
  cache:
    paths:
      - node_modules/
    policy: pull
  script:
    - npm run test

pages:
  stage: deploy
  dependencies: 
    - build
  script:
    - rm -rf public
    - cp build/index.html build/404.html
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - master

包む

GITLAB CI/CDパイプラインを使用してGitTubページからGitlabページへの反応アプリケーションの展開方法を学びました.
以下に参照のための完成プロジェクトのリンクを示します.
ギタブhttps://github.com/jtorbett23/gitlab-pages-react-example
GITLAB -https://gitlab.com/jtorbett23/gitlab-pages-react-example
gitlabページのURLhttps://jtorbett23.gitlab.io/gitlab-pages-react-example/