Vue cliで作ったホームページをHerokuでデプロイする / Application error

# 宣伝
今までHerokuでデプロイすること３回目。

１回目のアプリは無事にデプロイできましたが、２回目は今もApplication errorのままです。
誰かご教授ください〜〜！

１回目：[Node.jsのアプリケーションをHerokuで公開したい。](https://teratail.com/questions/298404#reply-421672)
２回目：[Node.jsのアプリケーションをHerokuで公開したい。part2](https://teratail.com/questions/299850)


そして、１度Application errorが発生したものの、Herokuを使って３回目のデプロイすることができましたので、備忘録として残しておきます。

**作成したホームページ：[My Portfolio  Site](https://jnnnatsumi-23.herokuapp.com/#/)**

↑是非、閲覧ください↑

## 参考にした記事

Kentaro Kogaさんの[Vue Cli 3のプロジェクトをHerokuにデプロイする](https://taroken.org/deploying-vue-cli-3-project-to-heroku/)を元に、デプロイ作業をしました。

図もついていて、非常にわかりやすかったです！ありがとうございます😭
ですが、最後にコマンドを実行したところ、

```ruby:ターミナル
$ git push heroku master
 〜略〜
remote:        done
remote:        
remote:        removed 1308 packages and audited 63 packages in 16.558s
remote:        
remote:        3 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 37.4M
remote: -----> Launching...
remote:        Released v3
remote:        https://jnnnatsumi-23.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/jnnnatsumi-23.git
```

![heroku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/f6d70308-c974-302f-c7e2-eaf04484b44a.png)

いつものエラーが出ました・・。
詳細をみてみると、、


```ruby:ターミナル
$ heroku  logs --tail
〜略〜
2020-10-30T09:12:05.276378+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2020-10-30T09:12:05.276915+00:00 app[web.1]: npm ERR! errno 1
2020-10-30T09:12:05.286103+00:00 app[web.1]: npm ERR! home-page@0.1.0 start: `node server.js`
2020-10-30T09:12:05.286105+00:00 app[web.1]: npm ERR! Exit status 1
2020-10-30T09:12:05.286106+00:00 app[web.1]: npm ERR!
2020-10-30T09:12:05.286107+00:00 app[web.1]: npm ERR! Failed at the home-page@0.1.0 start script.
2020-10-30T09:12:05.286108+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-10-30T09:12:05.298114+00:00 app[web.1]: 
2020-10-30T09:12:05.298870+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-10-30T09:12:05.299124+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-10-30T09_12_05_287Z-debug.log
2020-10-30T09:12:05.448280+00:00 heroku[web.1]: Process exited with status 1
2020-10-30T09:12:05.500168+00:00 heroku[web.1]: State changed from starting to crashed
2020-10-30T09:12:24.669126+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/%20deployed%20to%20Heroku" host=jnnnatsumi-23.herokuapp.com request_id=bbd79e2e-76ed-419c-969e-44cb7a23996d fwd="60.117.133.203" dyno= connect= service= status=503 bytes= protocol=https
〜略〜
```

npm で何かエラーが起きているようです。
「[Vue.jsのWebアプリをHerokuでデプロイしようとすると、npmエラーが発生する](https://teratail.com/questions/211245?link=qa_related_pc)」の方と似たようなエラーで、コメントにあった記事（「[Vue.jsのアプリケーションを手早くHerokuで公開する](https://qiita.com/akirakudo/items/f63322f6851feef3d9e4)」）を参照します。

server.jsの部分が、一番最初に参考にした人と異なっていたので、
下記のコードに合わせてみました。


```ruby:server.js
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + "/dist/"));
app.listen(port);
```

その後、変更点を保存してpushする。

```ruby:ターミナル
$ git add -A && git commit -m  "コメント"
$ git push heroku master
$ heroku open
```

無事にデプロイできました😭
なんとなくやってみて、なんでかできたって状態なので、どうなっているのかこれから調べていきます。
ご教授していただけると助かります🙏

### ホームページについて

ホームページはBlog部分にQiita APIを使って記事取得しようとしてます！
プログラミング歴が浅い私には、できそうだけどできないもどかしい感じです。
なんとか頑張ります！アドバイスなどありましたら、どんどん募集中です！