【Vue.js】vue-cli-plugin-ftp-deployでビルド後のファイルを自動でアップロードする | Wood-Roots:blog

2019
03/11

vue-cli-plugin-ftp-deployでビルド後のファイルを自動でアップロードする

Vue CLIプラグインのvue-cli-plugin-ftp-deployを使えば、Vue CLIでビルドしたファイルをFTPでアップロードすることができます。

vue-cli-plugin-ftp-deploy

ビルドからアップロードまでをシームレスで簡単に行えるため、非常に便利なプラグインでした。
以下の手順で利用できますので、参考にしてみてください。

ADs

vue-cli-plugin-ftp-deployのインストール

コマンドプロンプトで以下を入力します。
グローバルにインストールされるのでどこのフォルダで実行してもかまいません。

1
vue add ftp-deploy

もしくはVue UIからもインストールできます。
以下のコマンドでVue UIを起動し、

1
vue ui

以下の順に操作をします。

今まで気付いてませんでしたが、Vue CLIのプラグインはたくさんあるようです。
苦労して実装していた処理もプラグインを使えば簡単に…ということもあるかもしれません。

サーバー情報の設定

カレントフォルダに.env.localというファイルを作成し、以下の内容を記述します。

1
2
3
4
ftpHost = FTPアドレス
ftpPort = FTPのポート（大体21です）
ftpUsr  = ユーザー名
ftpPwd  = パスワード

転送ディレクトリの設定

カレントフォルダにftpdeployというフォルダを作成し、その中にconfig.jsというファイルを作成します。このファイルにどのファイルをどこに転送するかを記載します。

1
2
3
4
5
module.exports = {
  localBasePath: "/", //ローカルの基本となるフォルダ
  remoteBasePath: "/", //サーバ上のディレクトリ
  sync: [{ src: "/dist", dest: "/" }] //どこからどこへ転送するか
};

たとえば、ビルド後のファイルを丸ごと/public_html/に転送したい場合は以下のようになります。

1
2
3
4
5
module.exports = {
  localBasePath: "/",
  remoteBasePath: "/public_html/",
  sync: [{ src: "/dist", dest: "/" }]
};

さらに細かく除外するファイルを設置したり転送時にパーミッションを設定することもできます。
Usageを見てみてください。

コマンドの追加

カレントフォルダのpackage.jsonのscripts欄に下記を追加します。

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/"
  },

これでnpm run deployと入力するとftpdeploy/config.jsの内容に基づいてアップロードが行われます。
ビルド後にアップロードまで行いたい場合は以下のようにするとnpm run buildでビルド完了後アップロードが行われるようになります。

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && vue-cli-service deploy",
    "deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/"
  },

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social