フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント

関連する依存関係のインストール

ドッカー

国内のインストールは遅すぎるので、https://docs.docker.com/desktop/ を使用するとダウンロードが高速化されます。
具体的なダウンロード手順についてはここでは説明しません。
ミラーソース: "http://hub-mirror.c.163.com"

DockerでJenkinsをインストールする

# jenkins イメージをプルする docker pull jenkins/jenkins

# 外部ポート番号 3080、リンクされたデータボリューム ~/docker/jenkins を使用して、jk という名前のサービスをバックグラウンドで実行します。docker run -d --name jk -p 3080:8080 -v ~/docker/jenkins:/var/jenkins_home jenkins/jenkins

コマンドを実行すると、ポート番号 3080 で http サービスを開始し、ブラウザを開くことができます。

• http://localhost:3080/ と入力し、初期化が完了するまで待ちます (時間がかかる場合があります)。このとき、管理者パスワードが必要になります。cat ~/docker/jenkins/secrets/initialAdminPassword を実行すると、管理者パスワードを取得できます。
• 次のステップはプラグインをインストールすることです。最初のオプション、推奨プラグインをお勧めします（このインストールは時間がかかるので、辛抱強く待ってください）
• 最初の管理者アカウントを作成する

Dockerにgitlabをインストールする

docker pull gitlab/gitlab-ce

docker run -d --name gitlab -p 443:443 -p 9001:80 -p 222:22 -v ~/docker/gl/config:/etc/gitlab:Z -v ~/docker/gl/logs:/var/logs/gitlab:Z -v ~/docker/gl/data:/var/opt/gitlab:Z gitlab/gitlab-ce

• 初期化プロセスには長い時間がかかる場合があります。進行状況を表示するには、docker logs -f gitlab を実行してください。
  
• http://localhost:9001 と入力します。初回はパスワードの入力を求められます。その後、ユーザー名とパスワードを入力してログインします (デフォルトのユーザー名は root です)。
• https と ssh を使用してプロジェクトを複製するためのアドレスを設定します。

# http プロトコルで使用されるアクセス アドレスを設定します。ポート番号を追加しない場合、デフォルトは 80 です。
外部URL 'http://192.168.1.2:9001'

# SSHプロトコルで使用されるアクセスアドレスとポートを設定します gitlab_rails['gitlab_ssh_host'] = '192.168.1.2'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # このポートは実行中にポート 22 にマッピングされる 222 ポートです # nginx はポート 80 を listen します。そうでない場合は、external_url のポート番号がデフォルトで使用され、ポート マッピングが失敗します nginx['listen_port'] = 80
:wq #設定ファイルを保存して終了し、コンテナを再起動します

ssh メソッドが失敗した場合は、サーバー上のキー ファイルのアクセス許可が正しくないことが原因と考えられます。 docker exec -it gitlab sh コンテナに入り、/etc/gitlab ディレクトリ内の ssh_host_ecdsa_key、ssh_host_ed25519_key、ssh_host_rsa_key の 3 つのファイルのユーザー名とグループが git (ユーザーを変更するには chown、グループを変更するには chgrp) になっているか、ファイルのパーミッションが 600 (chmod コマンドで変更可能) になっているかを確認します。

Dockerにnginxをインストールする

docker プル nginx
docker run -d --name nginx -p 80:80 -v ~/nginx/html:/usr/share/nginx/html nginx

まとめ

• localhost:3080、jenkinsにアクセスします（ビルドに使用するサーバー上で実行されている必要があります）
• localhost:9001、gitlab にアクセスします (ソースコードが置かれているサーバー上で実行する必要があります)
• localhost、nginx にアクセスします (サーバー上で実行されている必要があります)

構成

1. GitLab関連のプラグインをインストールする

ホーム -> システム管理 -> プラグイン管理

次に、オプションのプラグインに切り替えて、gitlabを検索し、gitlabプラグインを選択します（すでにインストールされているため、ここには表示されません）。次に、左下隅のボタンを選択して、インストールが完了するまで待ちます。

2. ホーム -> システム管理 -> システム構成

資格情報に、GitLab API トークンを追加する必要があります。

GitLabAPI トークンの取得方法は下図の通りです。生成されたトークンはセキュリティ確保のため、更新後に非表示になります。

設定が完了したら、設定が正しいことを確認するためにテスト接続ボタンをクリックすることをお勧めします。

3. 新しいジョブを作成する

4. タスク名を入力し、フリースタイルを選択します

5. 関連するビルドオプションを構成する

1. 一般設定で、前のシステム設定で入力したオプションを選択します。選択しないと、ビルド ステータスが GitLab に送り返されません。

2. ソースコード管理

URL は http 形式のみであるため、以下の認証情報にはユーザー名とパスワードを使用する必要があります。間違ったものを選択すると、コードを取得できなくなります。

以下の構成は、マスターと ci で始まるブランチでのみビルドが実行されることを意味します。具体的なルールについては、右側の疑問符をクリックして詳細をご覧ください。

3. ビルド トリガーの [変更が GitLab にプッシュされたときにビルドする] をオンにします。右側には GitLab の Webhook URL があり、その下にはビルドをトリガーするタイミングのオプションがいくつかあります (GitLab の設定と調整する必要があります)。

jenkins プラグインによって提供される webhooj URL は、jenkins がログインを必要とし、外部 API もログインを必要とするため、直接使用することはできません。そうでない場合は、HTTP 401 が返されます。幸いなことに、この種のログインは HTTP 基本認証で処理できます。
「ユーザー名」->「設定」->「API トークン」->「新しいトークンの追加」->「名前を入力」->「生成」をクリックし、トークンをコピーして、前の Webhook URL と連結します。スプライシング ルールは <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag> です。最後に、http://ma1:[email protected]:3080/project/gl を取得できます。

まずは保存してみましょう。次に、gitlab に移動して設定します。

4. GitlabがWebhook URLを設定する
デフォルトでは、gitlab はローカル URL の使用を許可していないため、パブリック ドメイン名を使用するか、gitlab のプライバシー設定を変更する必要があります (以下を参照)。

次に、デプロイするプロジェクトを開き、[設定] -> [Webhook] の順に進み、前の手順で連結した URL を入力し、対応するイベントを選択して、[追加] をクリックします。正常に追加されたら、「テスト」をクリックして、フックがスムーズに動作しているかどうかをテストできます ()。

5. ビルド環境 フロントエンドビルドでは必然的にノードの使用が必要になるため、ここでは Node と npm bin/ フォルダーを PATH に指定するチェックボックスをオンにする必要があります (チェックされていない場合は、プラグインセンターに移動してインストールしてください)。

6. 構築する

プラグイン センターにアクセスし、Publish Over SSH というプラグインをインストールします。このプラグインは主に、生成されたファイルをリモート サーバーに送信するために使用されます。

-> システム管理 -> システム構成でプラグインを構成する必要があります。

2. ビルドタブでビルドステップを追加し、シェルの実行を選択します。
glを対応するプロジェクト名に置き換えます

# 前のファイルを削除します rm -rf /tmp/html.tar.gz

# テストを実行する npm run test
# npm ビルド、パッケージ スクリプト npm run b

# プロジェクトディレクトリに切り替えます cd /var/jenkins_home/workspace/gl
# ターゲット フォルダーを圧縮ファイルにパッケージ化します tar -zcvf /tmp/html.tar.gz --exclude .git -C ./dist .
# 圧縮ファイルをプロジェクトディレクトリに置いて、SSH 経由で公開できないようにしてください。mv /tmp/html.tar.gz ./

ビルドタブ、ビルドステップを追加、ファイルの送信またはSSH経由でのcommonadsの実行を選択

# 最初に /tmp/html を削除してから、新しいものを作成します。エラーを防ぐ rm -rf /tmp/html
mkdir /tmp/html

# 圧縮ファイルを /tmp/html に解凍し、圧縮ファイルを削除します tar -xvf ~/html/html.tar.gz -C /tmp/html
rm -rf ~/html/html.tar.gz

#解凍したファイルを~/nginx/html（以前にdocker nginxによってマップされたローカルパス）にコピーします。
cd /tmp/html
cp -R /tmp/html/* ~/nginx/html

7. ビルド後の手順 「ビルド後の操作手順を追加」をクリックし、「ビルド ステータスを Gitlab に公開」を選択します。Jenkins ビルドが完了すると、ビルドのステータスは Gitlab の CI/CD でも確認できます。

6. コードをプッシュしてビルドをトリガーします。コードをプッシュした後、すべてがうまくいけば、ここにビルド履歴が表示されます。うまくいかなかった場合は、構成を確認してください。

7. ウェブサイトの閲覧

コードをプッシュした後は静的ファイルのみがデプロイされるため、新しいコンテンツを表示するために nginx を再起動する必要はありません。

要約する

• コードをプッシュすると、gitlabはwebhook URLを通じてjenkinsに通知します。
• Jenkins は POST リクエストを受信すると、テストのパッケージ化などを含むビルドをトリガーします。完了すると、ファイルをリモート サーバーに送信し、ファイルの解凍や nginx 関連ディレクトリへのコピーなどの対応するコマンドを実行します。 Node.js アプリケーションの場合は、Node スクリプトも実行する必要があります。
• リモート サーバーには、事前に docker および nginx コンテナーがインストールされており、バックグラウンドで nginx サービスが実行されている必要があります。
• nodejs + nginxが必要な場合は、docker-compose を使用してコマンドの実行を簡素化し、対応するコマンドを ssh 経由の publish の exec コマンドに追加できます。
  

jenkins+gitlab+nginx デプロイメントのフロントエンドアプリケーション実装に関するこの記事はこれで終わりです。jenkins gitlab nginx デプロイメントの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。