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のインストール

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

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

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

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

サーバー情報の設定

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

転送ディレクトリの設定

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

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

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

コマンドの追加

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

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

ADs

Post Comments

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

Comments

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