Herokuへのアップロードでつまづいた時の対処法

自分の経験をここに記述します。

【経緯】先日、EJS, CSS, JavaScript, MongoDB, Nodeを使って作成したWebsiteをHerokuにアップロードしようと試みた時、正常にアップロードできず、丸2日間の時間を犠牲にした上でようやく問題解決までに至りました。ここで記載することによっていつかこれを見たその時困っている方々の手助けになればと思います。

【方法】ステップに分けて説明していきます。MongoDBを使用している場合には、別の記事でその追加で必要な方法を記述します。

１：Command Line(Hyper Terminal)がアップロードしようとしているファイルのパスを正しく選択しているか確認する。

２：Command Line(Hyper Terminal)からHerokuへとログインする。コマンド：$heroku login　

３：GitをInitializeし、add、commitする。コマンド：$git init →　コマンド：$git add . →　コマンド：$git commit -m "sample message"

４：HerokuでURLを作成する。　コマンド(urlが何でもいい場合)：$heroku create 　コマンド(自分のオリジナルを作成する場合)：$heroku create ここに半角英数でタイプする。但し他ユーザーがすでに使用している場合は、そのurlは使えない。

５：Gitにpushをする。　コマンド：$git push heroku master

６：現状では正しくHerokuへとアップロードはされません。ほぼ100%エラーの表示がでます。これからそのエラーを直していきましょう。

７：自分のファイル内にprocfileが作成しているか、確認する。procfileが何か分からない場合はこの方の記事を参考にしてみてください。https://creepfablic.site/2019/06/15/heroku-procfile-matome/

８：procfileの中身を正しく記述しているか確認する。web: node app.js、app.jsはあくまでも私がよく使うファイル名のためindex.jsや他のファイル名の場合はそちらに書き換えてください。

９：app.listen(process.env.PORT || 3000, function( ){

console.log("The server 3000 is now up and runnning")

});

私の場合、app.jsの中にローカルサーバーを立ち上げるためのapp.listenを入力しているので、そこにprocess.env.PORTと追加されているか確認する。

１０：再度、Command Line(Hyper Terminal)の画面に戻る。そして自分のファイルへのパスが選択されている状態で、次のコマンドを入力する。コマンド：$heroku buildpacks

そのコマンドを入力した時にheroku/nodejsと表示されていれば特に何もしなくて良い。しかし、何も表示されない、もしくは別のものが表示された場合には次のコマンドを入力する。コマンド：$heroku buildpacks:set heroku/nodejs

１１：もう一度、コマンド：$heroku buildpacksを入力して正しくheroku/nodejsと表示されるか確認する。

１２：自分のパソコンにインストールされているNodeとNpmが最新版であるか確認する。どこでインストールするか分からない場合は👉https://nodejs.org/ja/　で推奨版をダウンロードする。左のバージョン。

コマンド：$node --version 　

コマンド： $npm --version

１３：自分のファイルの中にpackage-lock.jsonというファイルが作られているか確認する。作成されていない場合は次のコマンドを入力する。コマンド：$npm install

１４：package-lock.jsonの中に以下のプログラムが記載されているか確認する。されていない場合は順番はどこでもいいのでファイル内に付け加える。NodeとNpmのバージョンは2020/04時点のものなので、最新かどうかは　https://nodejs.org/ja/　で確認する。右側の最新版のバージョンをnodeに記述する。最後のxの部分は変更しなくて大丈夫。scriptsのapp.jsはあくまでも私が使用しているファイル名なので、これは各個人のファイル名に直す。

"engines": {
"node": "^14.0.x",
"npm": "6.14.x"
}

"scripts": {
"start": "node app.js"
}

１５：.gitignoreファイルが作成しているか、確認する。まず次のコマンドを入力する。

コマンド：$git ls-files | grep node_modules

もしも、上記のコマンドを入力した際にリストがズラーーーっと表示された場合は以下のコマンドを順々に入力する。表示されなかった場合は多分.gitignoreが作成されていると思う。

コマンド：$echo "node_modules" >> .gitignore
コマンド：$git rm -r --cached node_modules
コマンド：$git commit -am 'untracked node_modules'

１６：再度、.gitignoreが作成されているか、コマンド：$git ls-files | grep node_modules、を入力して確認する。自分のファイル内で.gitignoreというファイルが作成されているのを確認できればおっけい。

１７：.gitignoreの中にnode_modulesと記載されていると思うので、その下に以下のコマンドを入力する。

/lib　　←この4文字を記述する。

１８：これであとは再度Herokuへのアップロードを試みる。以下の順でCommand Line(Hyper Terminal)内でコマンドを実行する。

コマンド：$heroku login

コマンド：$git init

コマンド：$git add .

コマンド：$git commit -m "whatever you want to type"

コマンド：$git push heroku master

これで正しくHerokuへとアップロードが完了するはずです。

１９：最後に、冒頭にも書きましたが、MongoDBを使用している場合はもうワンステップ必要な作業がありますので次回のストーリーを参考にしてみてください。