Vue CLIでの作成プロジェクト→Herokuへのデプロイ

Question

現象

https://zenn.dev/ryuu/articles/vueapp-deployto-heroku
上記を参考にHeroku CLIへのログイン・Vueプロジェクトとの連携までできている状態ですが、git push heroku mainコマンドを実行したところ下記エラーが出ています。

 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/***********.git'

めぼしいサイトを参照に検証してみても解消できず、解決法教示いただけると幸いです。
よろしくお願いします。

現在試していること

ルート直下に下記ファイルを追加しています。（参照元付記）

• static.json

https://zenn.dev/ryuu/articles/vueapp-deployto-heroku

• server.js

https://qiita.com/akirakudo/items/f63322f6851feef3d9e4

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js"
  },

(05/11追記)
デプロイ時のエラー文を掲載します。

Enumerating objects: 426, done.
Counting objects: 100% (426/426), done.
Delta compression using up to 8 threads
Compressing objects: 100% (390/390), done.
Writing objects: 100% (426/426), 322.81 KiB | 4.75 MiB/s, done.
Total 426 (delta 255), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpacks:
remote:        1. heroku/nodejs
remote:        2. https://github.com/heroku/heroku-buildpack-static
remote: -----> Node.js app detected
remote: 
remote: -----> Build failed
remote:  !     Two different lockfiles found: package-lock.json and yarn.lock
remote: 
remote:        Both npm and yarn have created lockfiles for this application,
remote:        but only one can be used to install dependencies. Installing
remote:        dependencies using the wrong package manager can result in missing
remote:        packages or subtle bugs in production.
remote: 
remote:        - To use npm to install your application's dependencies please delete
remote:          the yarn.lock file.
remote: 
remote:          $ git rm yarn.lock
remote: 
remote:        - To use yarn to install your application's dependencies please delete
remote:          the package-lock.json file.
remote: 
remote:          $ git rm package-lock.json
remote:     
remote:        https://help.heroku.com/0KU2EM53
remote: 
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: b88f01142fea6495c2deb38e4d77afd41bd9088c
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version b88f01142fea6495c2deb38e4d77afd41bd9088c
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote: 
remote: Verifying deploy...
remote: 
remote: !    Push rejected to prj-portfolio-manager.
remote: 
To https://git.heroku.com/prj-portfolio-manager.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/prj-portfolio-manager.git'

package-lock.jsonにより制御されていると判断し、ローカルのmainブランチで同ファイルを仮実装でリネームしたあと下記を実行したところ、エラー内容が変わっているのを確認しています。

git push heroku main:main -f

Enumerating objects: 428, done.
Counting objects: 100% (428/428), done.
Delta compression using up to 8 threads
Compressing objects: 100% (392/392), done.
Writing objects: 100% (428/428), 323.33 KiB | 4.43 MiB/s, done.
Total 428 (delta 255), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpacks:
remote:        1. heroku/nodejs
remote:        2. https://github.com/heroku/heroku-buildpack-static
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        USE_YARN_CACHE=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 16.x...
remote:        Downloading and installing node 16.15.0...
remote:        Using default npm version: 8.5.5
remote:        Resolving yarn version 1.22.x...
remote:        Downloading and installing yarn (1.22.18)
remote:        Installed yarn 1.22.18
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.22.18
remote:        [1/4] Resolving packages...
remote:        error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.
remote:        info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
remote: 
remote: -----> Build failed
remote: 
remote:  !     Outdated Yarn lockfile
remote: 
remote:        Your application contains a Yarn lockfile (yarn.lock) which does not
remote:        match the dependencies in package.json. This can happen if you use npm
remote:        to install or update a dependency instead of Yarn.
remote: 
remote:        Please run the following command in your application directory and check
remote:        in the new yarn.lock file:
remote: 
remote:        $ yarn install
remote:        $ git add yarn.lock
remote:        $ git commit -m "Updated Yarn lockfile"
remote:        $ git push heroku main
remote:     
remote:        https://help.heroku.com/TXYS53YJ
remote: 
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !	Push rejected to prj-portfolio-manager.
remote: 
To https://git.heroku.com/prj-portfolio-manager.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/prj-portfolio-manager.git'

プロジェクト自体は一般的なVueCLIを使って実装したもので、パッケージ管理もnpmを使っています。
新しいエラーでyarn関連の記載があるのですが、yarnは本プロジェクトでは使っていないので違和感がある状態です。

Answer 1

本件自己解決しましたので、検証方法を追記します。

remote:        - To use npm to install your application's dependencies please delete
remote:          the yarn.lock file.
remote: 
remote:          $ git rm yarn.lock
remote: 
remote:        - To use yarn to install your application's dependencies please delete
remote:          the package-lock.json file.
remote: 
remote:          $ git rm package-lock.json

初回エラーのこの部分で、

• npmを使う場合： yarn.lock を削除
• yarnを使う場合： package-lock.json を削除

ということだったので、今回使っているnpmに準じて対応したところ正しくデプロイが確認できました。

Answer 2

Enumerating objects: 426, done.
Counting objects: 100% (426/426), done.
Delta compression using up to 8 threads
Compressing objects: 100% (390/390), done.
Writing objects: 100% (426/426), 322.81 KiB | 6.21 MiB/s, done.
Total 426 (delta 255), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpacks:
remote:        1. heroku/nodejs
remote:        2. https://github.com/heroku/heroku-buildpack-static
remote: -----> Node.js app detected
remote: 
remote: -----> Build failed
remote:  !     Two different lockfiles found: package-lock.json and yarn.lock
remote: 
remote:        Both npm and yarn have created lockfiles for this application,
remote:        but only one can be used to install dependencies. Installing
remote:        dependencies using the wrong package manager can result in missing
remote:        packages or subtle bugs in production.
remote: 
remote:        - To use npm to install your application's dependencies please delete
remote:          the yarn.lock file.
remote: 
remote:          $ git rm yarn.lock
remote: 
remote:        - To use yarn to install your application's dependencies please delete
remote:          the package-lock.json file.
remote: 
remote:          $ git rm package-lock.json
remote:     
remote:        https://help.heroku.com/0KU2EM53
remote: 
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: b88f01142fea6495c2deb38e4d77afd41bd9088c
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version b88f01142fea6495c2deb38e4d77afd41bd9088c
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote: 
remote: Verifying deploy...
remote: 
remote: !	Push rejected to prj-portfolio-manager.
remote: 
To https://git.heroku.com/prj-portfolio-manager.git