Docker、Nginx、Jenkins をベースにした自動フロントエンド デプロイメント

事前準備

• CentOS 7 システムをベースとしたクラウド サーバー。
• Vue-CLI ベースのプロジェクトは GitLab にデプロイされます。

展開ターゲット

フロントエンドの自動デプロイメント プロセスを実装するために、Docker + Nginx + Jenkins 環境を構築します。具体的な実装効果としては、開発者がローカルで開発し、指定されたブランチにコードをプッシュして送信し、継続的インテグレーションと自動デプロイメントのために Jenkins を自動的にトリガーできることが挙げられます。デプロイメントが完了した後に、デプロイメントが成功したかどうかを示す電子メール通知を設定できます。成功した場合、パッケージ化されたファイルがサーバーにアップロードされ、ページが nginx リバース プロキシを介して表示されます。失敗した場合は、関連するエラー ログが出力されます。

注意: Alibaba Cloud または Tencent Cloud サーバーを選択してください。他のサーバーにデプロイすると、Jenkins が正常に起動しない可能性があります。

Docker環境構築

クラウドサーバーに接続

Alibaba Cloud または Tencent Cloud が提供するオンライン端末を選択することもできますが (場合によってはスタックする可能性があります)、ローカル コンピューターを使用して接続することをお勧めします。ターミナルに接続コマンドを入力します。

ssh root@サーバーのパブリックネットワークアドレス

その後、クラウド サーバーのパスワードを入力すると、コマンドによって次の結果が表示されます。

Docker には、Docker CE と Docker EE、つまりコミュニティ エディションとエンタープライズ エディションの 2 つのブランチ バージョンがあります。このチュートリアルは、CentOS 7 に Docker CE をインストールすることを前提としています。

Docker環境をインストールする

1. Docker の依存ライブラリをインストールします。

yum インストール -y yum-utils デバイスマッパー永続データ lvm2

2. Docker CE のソフトウェア ソース情報を追加します。

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3. Docker CE をインストールします。

sudo yum で docker-ce をインストールします

4. Docker サービスを開始します。

sudo systemctl enable docker // 起動時に自動的に起動するように設定する sudo systemctl start docker // docker を起動する

Docker Docker Compose をインストールする

Docker Compose は、マルチコンテナ Docker アプリケーションを定義および実行するためのツールです。 Compose では、YML ファイルを使用して、アプリケーションに必要なすべてのサービスを構成します。その後、1 つのコマンドを使用して、YML ファイル構成からすべてのサービスを作成して起動できます。 docker-compose をダウンロードします:

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

インストールが完了したら、権限を昇格します。

sudo chmod +x /usr/local/bin/docker-compose

docker-compose -v と入力して次のページを表示します。

DockerはNginxとJenkinsサービスをインストールします

NginxとJenkinsをインストールする

Docker イメージは、次のように Nginx および Jenkins 環境コマンドをプルします。

docker プル nginx
docker pull jenkins/jenkins:lts

インストールが完了したら、docker images を実行して、現在 Docker の下にあるイメージを明確に確認します。

Docker イメージ

Nginx と Jenkins のディレクトリ書き込み

管理を容易にするために、Nginx と Jenkins を Docker の下の 1 つのファイル ディレクトリに集約します。ディレクトリ構造は次のとおりです。

+ 作曲する
- docker-compose.yml // docker-compose 実行ファイル + nginx 
+ conf.d
- nginx.conf // Nginx 設定 + jenkins
- jenkins_home // Jenkins マウントボリューム + Web サーバー 
-static //フロントエンドのパッケージ化後にdistファイルを保存する

Web サーバー ディレクトリは後で生成されるため、ここでは説明しません。手動で作成する必要があるのは、Compose、Nginx、Jenkins ディレクトリとその従属ファイルであり、最も重要なのは docker-compose.yml ファイルと nginx.conf ファイルの構成です。上記のフォルダはルートディレクトリの下に置くことをお勧めします。ホームフォルダの下に置くことも、別途新しいフォルダを作成することもできます。

docker-compose.yml ファイルの設定

バージョン: '3'
services: # コレクション docker_jenkins:
ユーザー: root # 権限の問題を回避するため、ここではrootを使用します
restart: always # 再起動モード image: jenkins/jenkins:lts # サービスが使用するイメージを指定します。ここでは LTS (Long Term Support) を選択しました
container_name: jenkins #コンテナ名 ports: #公開ポート定義 - 8080:8080
  - 50000:50000
volumes: # ボリュームマウントパス - /home/jenkins/jenkins_home/:/var/jenkins_home # これは、コンテナ内の jenkins_home ディレクトリにマウントされた、最初に作成したディレクトリです - /var/run/docker.sock:/var/run/docker.sock
  - /usr/bin/docker:/usr/bin/docker # コンテナ内で docker コマンドを使用できるようにするためです - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
nginx の最新バージョンをダウンロード
再起動: 常に
画像: nginx
コンテナ名: nginx
ポート:
  -8090:80
  - 80:80
  - 433:433
ボリューム:
  - /home/nginx/conf.d/:/etc/nginx/conf.d - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html

nginx.conf ファイルの設定

サーバ{
聞く 80;
ルート /usr/share/nginx/html;インデックス index.html index.htm;
}

上記の 2 つのファイルが設定されたら、/home/compose ディレクトリに移動し、次のコマンドを入力して環境を起動する必要があります。

docker-compose を起動 -d

コンテナのステータスを表示するには、docker ps -a と入力します。

ステータスはupと表示され、その後ろのポート番号も上記のように表示され、正常な状態です。ブラウザにクラウド サーバーのパブリック IP アドレスとポート番号 8080 を入力すると、次のページが表示されます。

注記：

• この手順の前に、クラウド サーバーのポート 80 セキュリティ グループを開くことを忘れないでください (提供されているワンクリック アクティベーション機能を参照できます)。ただし、これに加えて、ポート 8080 のセキュリティ グループを手動で追加することをお勧めします。
• ポート 80: HTTP (HyperText Transport Protocol) 用に開かれたポートです。
• ポート 8080: Web ブラウジングを可能にする WWW プロキシ サービスに使用されます。
  

上図で必要なパスワードは、docker-compose.yml のボリューム内の /home/jenkins/jenkins_home/secrets/initAdminPassword にあります。次のコマンドで取得できます。

cat /home/jenkins/jenkins_home/secrets/initialAdminPassword

Jenkinsプラグインをインストールする

ページに入ったら、「推奨インストール」を選択します。

インストールが完了したら、左側の「Jenkins の管理」オプションを選択します。次の図に示すように:

Jenkins で、プラグインの管理で GitLab、Publish Over SSH、Nodejs などのプラグインを検索し、インストールします。

インストールが完了したら、Nodejs 環境と SSH パラメータを設定します。ホームページで、グローバル ツールの [構成] > [NodeJS] を選択し、自動インストールと対応する Nodejs バージョン番号を選択します。選択が成功したら、[保存] をクリックします。

SSH 情報を設定し、Jenkins の管理 > システムの構成でサーバーの関連情報を入力します。

JenkinsとGitLabを接続する

キーを生成する

ルートディレクトリで次のコマンドを実行します。

ssh-keygen -t rsa

通常、デフォルトでは次の図に示すように 2 回入力します。

生成されたファイルを表示するには、cd ~/.ssh を使用します。生成されたキー id_rsa をコピーし、Jenkins の資格情報に貼り付けます。図に示すように:

GitLab にログインし、GitLab で id_rsa.pub 公開キーを設定します。

新しいプロジェクト

準備が完了したら、新しいタスクを開始し、[新しい項目] > [フリースタイル プロジェクト] を選択してフリースタイル プロジェクトを構築します。

ソースコード管理

作成が完了したら、ソースコード管理で Git 情報を設定し、資格情報で先ほど追加した資格情報を選択します。

ビルドトリガー

ビルド トリガーで、ビルドをトリガーするタイミングを選択します。コードをプッシュするときやリクエストをマージするときなど、チームメイトのフックを選択できます。

[詳細オプション] をクリックしてシークレット トークンを見つけ、[生成] をクリックしてトークン値を生成します。

設定が成功したら、GitLab に対応するフックも追加する必要があります。上記の画像の webhookURL (赤で囲まれている) とシークレット トークンの値をメモし、GitLab で設定します。

ビルド環境とビルド構成

上記の設定が完了すると、Jenkins は GitLab に関連付けられます。ローカルにファイルをプッシュすると、自動的にビルドされます。クラウド サーバーのパブリック IP アドレスにアクセスすると、変更したプロジェクトにアクセスできます。図に示すように、Jenkins 上で手動でビルドすることもできます。

結論

最後に、簡単なオンライン展開プロジェクトは終了です。ドメイン名を持っている学生は、クラウド解決を使用してパブリック IP アドレスをマッピングできるため、プロジェクトの開発と起動に、より認識しやすいドメイン名を使用できます。

Docker、Nginx、Jenkins をベースとしたフロントエンドの自動デプロイメントに関する記事はこれで終わりです。Docker、Nginx、Jenkins の自動デプロイメントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。