質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

xinome
xinome

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

201閲覧

投稿2022/05/01 05:13

編集2022/05/12 16:49

現象

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は本プロジェクトでは使っていないので違和感がある状態です。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。