jenkins は vue を docker にデプロイします

Jenkins は、ソフトウェア開発プロセスで重要な役割を果たす継続的インテグレーション (CI) および継続的デリバリー (CD) ツールです。 Docker は、アプリケーションを簡単にデプロイできる人気のあるコンテナ化テクノロジです。

この記事では、Jenkins を使用して Vue アプリケーションを Docker コンテナーにデプロイする方法を紹介します。このプロセスを段階的に説明します。

1. Jenkins の構成

まず、Jenkins インターフェイスを通じて必要なプラグインをいくつかインストールする必要があります。 「Jenkins の管理」に移動し、「プラグイン管理」を選択し、「オプションのプラグイン」タブを選択します。ここで次のプラグインをインストールします:

• Docker プラグイン
• NodeJS プラグイン
• HTML Publisher プラグイン

# #インストール後に Jenkins を再起動します。

Jenkins ワークフローの作成

次に、Vue アプリケーションを構築してデプロイするための Jenkins ワークフローを作成します。以下の手順に従ってください:

Jenkins ホームページに移動し、[新しいタスク] を選択します。
• タスク名を入力し、「パイプライン」タイプを選択します。
• [詳細プロジェクト オプション] セクションで、[Groovy DSL を使用する] 構文を選択し、[DSL スクリプト] フィールドに次のコードを入力します。

• def app
  
  pipeline {
    agent {
      docker {
        image 'node'
      }
    }
    stages {
      stage('Build') {
        steps {
          sh 'npm install'
          sh 'npm run build'
        }
      }
      stage('Dockerize') {
        steps {
          sh 'docker build -t my-vue-app .'
          script {
            app = docker.build("my-vue-app:${env.BUILD_ID}")
          }
        }
      }
      stage('Publish') {
        steps {
          script {
            app.push()
          }
        }
      }
    }
    post {
      always {
        htmlpublisher target : [
          allowMissing : false,
          alwaysLinkToLastBuild : true,
          keepAll : true,
          reportDir : 'dist',
          reportFiles : 'index.html',
          reportName : 'HTML Report'
        ]
      }
    }
  }

This Jenkins スクリプトには、ビルド、Dockerize、リリースという 3 つのワークフロー ステップが含まれています。ここでは、まず「node」イメージを使用してビルドステップを実行し、そのステップで「npm install」コマンドと「npm run build」コマンドを実行します。このコマンドは、Vue アプリケーションを構築し、それを静的な HTML、CSS、および JS ファイルに変換します。
• Dockerize ステージでは、前のステップで生成された静的ファイルを使用する Docker イメージを構築します。また、「BUILD_ID」環境変数を使用してイメージにバージョンのラベルを付けます。
  
最後に、「公開」ステップで、Docker イメージを Docker Hub にプッシュします。この例では、Docker 認証情報を設定しませんでした。運用環境では、Docker ホスティング サービスに接続するために Docker 資格情報を設定する必要があります。

Docker の構成

Vue アプリケーションを Docker コンテナーにデプロイする前に、サーバーに Docker と docker-compose をインストールする必要があります。次の手順に従ってください:

Docker をダウンロードしてインストールします。
docker-compose をダウンロードしてインストールします。

Docker と docker-compose をインストールした後、Jenkins に構築されたばかりの Docker イメージをシステムにデプロイする必要があります。次の docker-compose ファイルを使用して、上記の Jenkins タスクから Docker Hub にプッシュされたイメージを使用するサービスを定義できます。

version: '3'
services:
  web:
    image: my-vue-app
    ports:
      - "80:80"
    restart: always

このファイルを docker-compose.yml として保存し、サーバーにアップロードします。 Docker Compose を使用してサービスを開始します。

docker-compose up -d

これにより、Vue アプリケーションのデプロイが開始されます。これで、Web ブラウザからアプリケーションにアクセスできるようになります (デフォルトではポート 80 上にあります)。このようにして、Jenkins を介して Vue アプリケーションを Docker コンテナにデプロイしました。

結論

この記事では、Vue アプリケーションを Docker コンテナにデプロイする方法について説明しました。 Jenkins の継続的統合およびデプロイメント ツールを使用すると、Vue アプリケーションを簡単に構築およびデプロイできます。また、Docker Compose を使用してサーバー上で実行中のコンテナをホストする方法についても説明しました。 Jenkins と Docker を使用して Vue アプリケーションの構築とデプロイを開始しましょう。

以上がjenkins は vue を docker にデプロイしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。