Content last updated 2026-10-15

GitLab Advanced CI/CD - ハンズオンラボ: レビューアプリ

このハンズオンガイドでは、レビューアプリの作成プロセスについて説明します

このラボの目的は、Node.js アプリケーションからレビューアプリを作成することです。レビューアプリとは、プロジェクト内の各マージリクエストのために自動的に作成される一時的なアプリケーション環境です。これにより、開発者やステークホルダーは、変更をメインブランチにマージする前に、ライブの独立した環境で提案された変更をプレビューしてインタラクションできます。

完了までの推定時間: 15 分

目標

  • Node.js アプリケーションからレビューアプリを作成する

タスク A. Web アプリを作成する

このタスクでは、レビュー環境で実行する Web アプリケーションを作成します。後続のラボで使用する検索コードとテストを main ブランチに保持できるように、別の review-app ブランチで作業します。

  1. プロジェクトのリポジトリに移動します。

  2. Code > Branches を選択します。

  3. New branch を選択します。

  4. ブランチ名を review-app に設定し、Create from は main のままにして、Create branch を選択します。

  5. Build > Pipeline Editor を選択し、ブランチを review-app に設定します。

  6. index.js ファイルに express のコードを追加すると、その実行によって接続を待機する Web サーバーが作成されるため、index.js に対してテストを実行できなくなります。そのため、ファイルから install deps、test binarysearch、test linearsearch のジョブを削除します。.gitlab-ci.yml ファイルからこれらのジョブを削除し、Commit changes を選択します。

  7. プロジェクトのリポジトリに戻り、ブランチを review-app に設定します。

  8. index.js ファイルを選択します。

  9. Edit > Edit single file を選択します。

  10. 二分探索と線形探索のメソッドを削除し、Web アプリケーションを実行する次のコードを追加します。

    const express = require('express')
const app = express()
const port = 4001

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

  11. 変更を review-app ブランチにコミットします。

タスク B. レビューアプリを作成する

  1. 左サイドバーで Operate > Environments を選択します。

  2. Enable Review Apps を選択します。

  3. 次のような提供されたスクリプトをコピーします:

    deploy_review:
  stage: deploy
  script:
    - echo "Add script here that deploys the code to your infrastructure"
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: https://$CI_ENVIRONMENT_SLUG.example.com
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

    Enable Review Apps をクリックしたときに GitLab がこのスクリプトを表示しない場合は、上記の参照スクリプトをコピーして使用してください。

  4. コードリポジトリに戻り、ブランチを review-app ブランチに設定します。

  5. Build > Pipeline Editor を選択します。

  6. コピーした deploy_review ジョブを .gitlab-ci.yml ファイルの末尾に貼り付けます。

  7. この例では、URL として IP アドレスを使用するように URL を少し変更します。この変数 $ip は、招待コードを利用したときに作成されたグループレベルの変数です。この変数を使用するために、サーバーが HTTP のみを使用するため HTTPS も削除します。以下は完成した deploy_review 定義です:

    deploy_review:
  stage: deploy
  script:
    - echo "Add script here that deploys the code to your infrastructure"
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: http://$ip:4001
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

  8. .gitlab-ci.yml ファイルに deploy ステージを追加します。

    stages:
  - deps
  - test
  - deploy

  9. これで、変更をレビューアプリにデプロイできます。deploy_review ジョブに ubuntu:latest の image を追加します。

    deploy_review:
  stage: deploy
  image: ubuntu:latest

  10. deploy_review ジョブの script のすぐ上に、次の before_script を追加します。SSH 秘密鍵は SSH_PRIVATE_KEY という名前の変数に保存されています。この鍵を SSH エージェントに追加して、リモートサーバーへの接続に使用します:

      before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client git -y )'
    - eval $(ssh-agent -s)
    - chmod 400 "$SSH_PRIVATE_KEY"
    - ssh-add "$SSH_PRIVATE_KEY"
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh

  11. 最後に、次のジョブ定義に合わせてジョブスクリプトを更新します:

      script:
    - ssh-keyscan -t rsa,ed25519 $ip >> ~/.ssh/known_hosts
    - ssh root@$ip 'mkdir -p /www'
    - ssh root@$ip 'sudo apt-get update'
    - ssh root@$ip 'sudo apt-get install nodejs npm -y'
    - ssh root@$ip 'cd /www/ && npm init -y'
    - ssh root@$ip 'cd /www/ && npm i express'
    - ssh root@$ip 'cd /www/ && npm i -g pm2'
    - scp index.js root@$ip:/www
    - ssh root@$ip 'pm2 delete index || true'
    - ssh root@$ip 'pm2 start /www/index.js --name index'

  12. 最終的なジョブスクリプトは次のようになります:

    deploy_review:
  stage: deploy
  image: ubuntu:latest
  before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client git -y )'
    - eval $(ssh-agent -s)
    - chmod 400 "$SSH_PRIVATE_KEY"
    - ssh-add "$SSH_PRIVATE_KEY"
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
  script:
    - ssh-keyscan -t rsa,ed25519 $ip >> ~/.ssh/known_hosts
    - ssh root@$ip 'mkdir -p /www'
    - ssh root@$ip 'sudo apt-get update'
    - ssh root@$ip 'sudo apt-get install nodejs npm -y'
    - ssh root@$ip 'cd /www/ && npm init -y'
    - ssh root@$ip 'cd /www/ && npm i express'
    - ssh root@$ip 'cd /www/ && npm i -g pm2'
    - scp index.js root@$ip:/www
    - ssh root@$ip 'pm2 delete index || true'
    - ssh root@$ip 'pm2 start /www/index.js --name index'
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: http://$ip:4001
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

  13. Commit changes を選択します。

タスク C. レビューアプリを確認する

レビューアプリが機能することをテストするために、新しいマージリクエストを作成します。

  1. Code > Branches を選択します。

  2. New branch を選択します。

  3. ブランチ名を test_review に設定し、Create from を review-app に設定して、Create branch を選択します。

  4. このブランチのマージリクエストを作成します。ターゲットブランチを review-app に設定します。

  5. マージリクエストを作成したら、Code > Open in Web IDE を選択してマージリクエストから Web IDE を開きます。

  6. index.js ファイルを選択します。

  7. res.send を好きなメッセージを表示するように更新します。以下は例です:

    const express = require('express')
const app = express()
const port = 4001

app.get('/', (req, res) => {
  res.send('Our app is running!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

  8. source control アイコンを選択します。コミットメッセージを入力し、Commit and push to… ボタンをクリックしてコード変更をコミットします。

  9. パイプラインが完了するまで待ちます。

  10. マージリクエストを開きます。

  11. パイプラインが完了したら View app を選択します。

ラボガイドの完了

このラボ演習が完了しました。このコースの他のラボガイドを参照できます。

ご提案は?

このラボへの変更をご希望の場合は、マージリクエストを通じて変更内容を送信してください。

最終更新 October 28, 2026: Merge pull request #591 from kyama0/translation/batch-2026-10-28-1 (5d840611)
ページのソースコードを見る - ページの編集 - please contribute. Creative Commons License