Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

序文

フロントエンド プロジェクトをデプロイする通常のプロセスは、まずテスト環境にデプロイし、次に本番環境にリリースすることです。テスト環境にデプロイするときは、xshell を使用してサーバーに接続し、次に xftp を使用してサーバーに接続し、プロジェクトをローカルでビルドし、ビルドしたファイルを xftp 経由でサーバーにアップロードします。プロセス全体が少し面倒で、繰り返しが多いように感じます。

このチュートリアルでは、Vue-CLI 3.x スキャフォールディングで構築された Vue プロジェクトについて説明し、scp2 を使用して静的ファイルサーバー Nginx に自動的にデプロイします。

1. scp2をインストールする

scp2 は、純粋に JavaScript で記述された、ssh2 に基づく拡張実装です。
ssh2 は、nodejs を使用した SSH2 のシミュレーション実装です。 scp は secure copy の略です。scp は、Linux システムで SSH ログインに基づいて安全にリモート ファイルをコピーするためのコマンドです。ここではこの機能を使用します。Vue が正常にコンパイルおよびビルドされた後、プロジェクトはテスト/本番環境にプッシュされ、テストを容易にし、効率を向上させます。

scp2をインストールします:

npm インストール scp2 --save-dev

2. テスト/本番環境サーバーのSSHリモートログインアカウント情報を構成する

1. プロジェクトのルートディレクトリに、.env.dev ファイル(テスト環境変数)を作成します。

VUE_APP_SERVER_ID変数は、現在デプロイされるテストサーバーのIDが0であることを示します。

// .env.dev ファイル内の VUE_APP_SERVER_ID=0

2. プロジェクトのルートディレクトリに、.env.prodファイル(本番環境の環境変数)を作成します。

VUE_APP_SERVER_ID変数は、現在デプロイされている本番サーバーIDが1であることを示します。

// .env.prod ファイル内の VUE_APP_SERVER_ID=1

3. プロジェクトのルートディレクトリにdeploy/products.jsファイルを作成します。

/*
 *env環境変数を読み取ります*/
定数 fs = require('fs');
定数パス = require('path');
// envファイルはパッケージ環境に対応するサーバーIDを決定します
const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev';
// env 環境変数パス const envPath = path.resolve(__dirname, envfile);
// env オブジェクト const envObj = parse(fs.readFileSync(envPath, 'utf8'));
定数 SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);

関数parse(src) {
  // KEY=VAL でファイルを解析します。const res = {};
  src.split('\n').forEach(行 => {
    // 'KEY=VAL' の "KEY' と 'VAL' を一致させる
    // eslint は次の行を無効にして、無駄なエスケープを禁止します
    const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
    // 一致しましたか?
    (keyValueArr != null)の場合{
      定数キー = keyValueArr[1];
      値をkeyValueArr[2] || ''とします。

      // 引用符で囲まれた値の改行を展開する
      const len ​​= value ? value.length : 0;
      if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
        値 = value.replace(/\\n/gm, '\n');
      }

      // 周囲の引用符と余分なスペースを削除します
      値 = value.replace(/(^['"]|['"]$)/g, '').trim();

      res[キー] = 値;
    }
  });
  res を返します。
}

/*
 *複数のサーバーアカウントを定義し、SERVER_IDに基づいて現在の環境のサーバーアカウントをエクスポートします*/
定数SERVER_LIST = [
  {
    id: 0,
    名前: 「A-プロダクション環境」
    ドメイン: 'www.prod.com', // ドメイン名 ホスト: '46.106.38.24', // IP
    port: 22, // ポート username: 'root', // サーバーにログインするためのアカウント password: 'root', // サーバーにログインするためのアカウント path: '/mdm/nginx/dist' // 静的サーバーに公開されたプロジェクト パス},
  {
    id: 1,
    名前:「Bテスト環境」
    ドメイン: 'test.xxx.com',
    ホスト: 'XX.XX.XX.XX'、
    ポート: 22、
    ユーザー名: 'root'、
    パスワード: 'xxxxxxx',
    パス: '/usr/local/www/xxx_program_test/'
  }
];

module.exports = SERVER_LIST[SERVER_ID];

3. scp2ライブラリを使用して自動デプロイメントスクリプトを作成する

プロジェクトのルートディレクトリにdeploy/index.jsファイルを作成します。

scpClient は 'scp2' を必要とします。
ora を require('ora') します。
const チョーク = require('チョーク');
const server = require('./products');
const spinner = ora('Publishing to' + (process.env.NODE_ENV === 'prod' ? 'Production' : 'Test') + 'Server...');
スピナーを開始します。
scpClient.scp(
  'dist/',
  {
    ホスト: server.host、
    ポート: サーバー.ポート、
    ユーザー名: server.username,
    パスワード: server.password、
    パス: server.path
  },
  関数 (エラー) {
    スピナーを停止します。
    もし(エラー){
      console.log(chalk.red('公開に失敗しました。\n'));
      エラーをスローします。
    } それ以外 {
      console.log(chalk.green('成功! '+ (process.env.NODE_ENV === 'prod' ? 'Production' : 'Test') + 'Server! に正常に公開されました! \n'));
    }
  }
);

4. package.json に scripts コマンドを追加し、名前を「deploy」にカスタマイズします。

テスト環境に公開するコマンドはnpm run deploy:dev、本番環境に公開するコマンドはnpm run deploy:prodです。

  「スクリプト」: {
    "serve": "vue-cli-service サーブ --mode dev",
    "ビルド": "vue-cli-service ビルド --mode prod",
    "deploy:dev": "npm run build && cross-env NODE_ENV=dev ノード ./deploy",
    "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy",
  },

ps ここで cross_env が使用されているため、npm i --save-dev cross-env をインストールする必要があります。cross-env は、プラットフォーム間で環境変数を設定および使用できます。ここでは、本番環境かテスト環境かを設定するために使用されます。

結論

補充する

熱心な友人によると、パッケージをパックするたびにハッシュ値が異なるため、dist 内のファイルが増えていくとのこと。まず ssh2 を使用して dist ファイルを削除し、削除後に nginx を再起動してからサーバーにアップロードするとよいとのこと。

// deploy/index.js const scpClient = require('scp2');
ora を require('ora') します。
const チョーク = require('チョーク');
const server = require('./products');
定数スピナー = ora(
  「公開先」+
    (process.env.NODE_ENV === 'prod' ? 'production' : 'test') +
    'サーバ...'
);

var Client = require('ssh2').Client;

var conn = 新しいクライアント();
コネ
  .on('準備完了', 関数() {
    //rm は dist ファイルを削除し、\n は restart nginx コマンドを実行するための改行です。ここでは docker を使用して nginx を再起動しています。
    conn.exec('rm -rf /mdm/nginx/dist\ndocker nginxを再起動します', 関数(
      えーっと、
      ストリーム
    ){
      (err) の場合、err をスローします。
      ストリーム
        .on('close', 関数(コード, シグナル) {
          // シェル コマンドを実行した後、プロジェクトのアップロードとデプロイを開始するコードをここに配置します spinner.start();
          scpClient.scp(
            './dist',
            {
              ホスト: server.host、
              ポート: サーバー.ポート、
              ユーザー名: server.username,
              パスワード: server.password,
              パス: server.path
            },
            関数(エラー) {
              スピナーを停止します。
              もし(エラー){
                console.log(chalk.red('公開に失敗しました。\n'));
                エラーをスローします。
              } それ以外 {
                コンソール.log(
                  チョークグリーン(
                    「成功しました!公開に成功しました」+
                      (process.env.NODE_ENV === 'prod'
                        ? '生産'
                        : 'テスト') +
                      'サーバー! \n'
                  )
                );
              }
            }
          );

          conn.end();
        })
        .on('データ', 関数(データ) {
          console.log('STDOUT: ' + データ);
        })
        .stderr.on('データ', 関数(データ) {
          console.log('STDERR: ' + データ);
        });
    });
  })
  。接続する({
    ホスト: server.host、
    ポート: サーバー.ポート、
    ユーザー名: server.username,
    パスワード: server.password
    //秘密キー: require('fs').readFileSync('/home/admin/.ssh/id_dsa')
  });

参考記事 https://www.cnblogs.com/sufaith/p/vue-cli.html

これで、Vue-CLI3.x プロジェクトのサーバーへの自動デプロイの手順に関するこの記事は終了です。Vue-CLI3.x プロジェクトの自動デプロイに関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • パッケージ化後にvue-cli3プロジェクトをサーバーに自動的にデプロイする方法
  • Vue-CLI 3 scp2 プロジェクトのサーバーへの自動デプロイ方法

<<:  HTMLタグの書き方でよくある間違い

>>:  ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

推薦する

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

光沢のある輝くウェブサイトデザインの感動的なデザイン例

このコレクションには、あなたのデザインアイデアにインスピレーションを与える、輝いて光沢のある、優れた...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

ユニークインデックスの S ロックと X ロックによる MySQL デッドロック ルーチンの理解

「初心者向けソースコードからの MySQL デッドロック問題の理解」では、MySQL ソースコードを...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

js が CSS 属性 (値) のサポートを決定して通知する状況の分析

新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...