序文フロントエンド プロジェクトをデプロイする通常のプロセスは、まずテスト環境にデプロイし、次に本番環境にリリースすることです。テスト環境にデプロイするときは、xshell を使用してサーバーに接続し、次に xftp を使用してサーバーに接続し、プロジェクトをローカルでビルドし、ビルドしたファイルを xftp 経由でサーバーにアップロードします。プロセス全体が少し面倒で、繰り返しが多いように感じます。 このチュートリアルでは、Vue-CLI 3.x スキャフォールディングで構築された Vue プロジェクトについて説明し、scp2 を使用して静的ファイルサーバー Nginx に自動的にデプロイします。 1. scp2をインストールするscp2 は、純粋に JavaScript で記述された、ssh2 に基づく拡張実装です。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)
MySQL の文字セットエンコーディングが正しくないデータをインポートすると、エラーが表示されます。...
序文新しい VPS を購入しました。新しい VPS のデータ ディスクはデフォルトではシステムにマウ...
この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...
目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...
目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...
成果を達成する実装コードhtml <div class="コンテナ">...
最近、プロジェクトは環境を切り替え、WebLogic を Tomcat に置き換えました。途中で発生...
(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...
序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...
1 Alibaba Cloud コンソールに入り、ドメイン名コンソールを見つけて、バインドするドメイ...
Web デザインは科学であると同時に芸術でもあります。 Web デザイン作業は、半分は適切なプログラ...
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...
Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...
最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...
1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...