Node.jsとExpressをherokuで公開するまでの流れをメモする。

概要

実際にnode.jsとexpressを使った何を公開するにはherokuというクラウド・アプリケーション・プラットフォームを使用する。他にverselとかnetlifyとかあるが、node.jsとか動くのかは分からず。

とりあえずアカウント取得の流れは省くので以下の記事を参考に登録する。
https://tech-camp.in/note/technology/16108/

最終目的

当たり前だが、最終目標は以下になる。

• herokuで公開できるようにする

デプロイの流れ

実際にアプリの公開までの流れ。

1:package.jsonを修正する。

package.jsonのscriptsの部分に以下を追加する。

{
"scripts":{
      "start":"node index.js"  //追加
}
}

2:ポート番号を修正する。

ローカルで作業作業してると大体ポート番号を「3000」「5000」とか使って作業すると思うが、実際にherokuへデプロイした場合には使えないので、修正する必要がある。

ローカルホスト環境と実際のherokuでも動くようにする環境として下記を記述。

const PORT=process.env.PORT || 3000;
app.listen(PORT,()=>{
    console.log("listening server")
})

3:gitignoreで不要ファイルを省く

gitを使うのでgitが入っていないならインストールしておく。
gitにプッシュしないファイル（node_modules）など省くために、.gitignoreファイルをnode_modulesのフォルダと同階層、、というかプロジェクトフォルダの直下に作成し、ファイルにプッシュしない「node_modules」「.DS_Store」を記述しておく。

/node_modules
.DS_Store

https://leading-tech.jp/wiseloan/gitignore/

4:heroku CLIをインストールしておく。

今度はheroku CLIが必要になるので、インストールする。

npm install -g heroku
heroku --version

5:herokuで新規アプリを作成

herokuにログインする。
で「creaate new app」をクリックして新規アプリを作成。
「App name」で好きな名前を入れる。
その際、「Cohose aregion」は「United States」のままでよい。

アプリを作成すると「Deploy」というタブが選択された画面が表示され「Deployment method」として「Heroku Git」と「GitHub」があるが、デフォルトで「Heroku Git」を選択されていると思うので、今回はこのまま。
その後のデプロイまでの流れが丁寧に記載されてるのでわかると思うが画像を添付しておく。

作業環境としてVSCodeを利用してるので、プロジェクトのフォルダにいる事前提で以下のコマンドを打つ。Herokuをプッシュ先に登録する「project-name」はHerokuのApp nameで指定した名前にする

heroku login
git init

heroku git:remore -a project-name

git add .

git commit -am "make it better"

git push heroku master

「heroku login」を打つと、herokuの管理画面に移動してログインボタンが表示されクリックすたらログインするという動作が間にあった。

そのあと、ターミナルでいろいろと勝手に進行され下記の内容が表示されたらデプロイ完了。

remote:Verifying deploy...done

Herokuのサイトを見ると「Open app」というボタンがあり、クリックして表示されれば完了。
エラーの場合はエラーが表示される。

まとめ

今回は、node.jsとexpressを使ったWEBアプリ等を実際に公開する為にherokuで公開するまでの流れをメモ。
実際にgithubを使った流れもyoutubeなどの動画であったので、参考としてリンクを張っておく。

参考サイト

https://inno-tech-life.com/dev/js/heroku_nodejs/#index_id0
https://tech-camp.in/note/technology/16108/

https://www.youtube.com/watch?v=UqLTlCoAhJc