Vue プロジェクトの Heroku デプロイメントに失敗する: sh: 1: vue-cli-service: 見つからない

プロット紹介

私は最近、Heroku にデプロイする予定の Express + Vue のフロントエンドとバックエンドのプロジェクトのデモを書きました。

ディレクトリ構造の一部は以下の通りです。

server.js // Express provides the data interface
package.json

client/ // Vue front-end display data
	package.json
	

プロジェクト全体をGithubに保存し、Herokuが自動的にデプロイするようにします。

フロントエンドのプロジェクトはローカルでパッケージ化できません。そうしないと、distディレクトリがgitに移動してしまい、よくありません

そのため、デプロイ時には、オンラインでパッケージングを行う必要があります

package.jsonは以下のような感じです。

"scripts": {
    "postinstall": "npm run client-install && npm run client-build",
    "client": "npm start --prefix client",
    "client-build": "npm run build --prefix client",
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js --ignore client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },

client/package.json

"scripts": {
    "serve": "vue-cli-service-serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"
  },

Herokuが自動的に実行されます。 postinstall -> start

そこで、ポストインストールでクライアントフロントエンドプロジェクトの[依存関係のインストール]と[プロジェクトのパッケージング]を行いました。

上記の2つの設定ファイルをローカルで実行すると、問題なし

Herokuオンラインデプロイメント

Herokuのオンラインデプロイメントにアクセスすると、エラーが報告されます。

sh: 1: vue-cli-service: not found

スクリーンショット

オンライン記事では、一般的に、3つの解決策が書かれています。

1. 再インストール
フォルダの置き換え node_modules フォルダの削除 npm install を再インストールしてください。

2. パスを指定する

. /node_modules/.bin/vue-cli-service build

3. グローバルインストール

npm install @vue/cli-service -g

オフライン環境は本当に問題ないのですが、Herokuのオンラインデプロイメントがダメなんです

問題解決

Baiduでいろいろ調べた結果、似たような記事で環境変数に言及しているものがありました。 NODE_ENV=production

デプロイログを確認すると、確かに同様の設定があり、Herokuが親切にも環境変数を設定してくれていました

環境変数の変更

{
"postinstall": "NODE_ENV=development && npm run client-install && npm run client-build && NODE_ENV= production"
}

ようやくデプロイが成功しました

最終的なpackage.jsonファイル

"scripts": {
    "postinstall": "NODE_ENV=development && npm run client-install && npm run client-build && NODE_ENV= production",
    "client": "npm start --prefix client",
    "client-build": "npm run build --prefix client",
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js --ignore client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

デプロイ後のアドレス
https://web-node-app.herokuapp.com/

参考
linux で jenkins のフロントエンドを自動ビルドすると、sh: vue-cli-service: command not found とプロンプトが出続ける。