使用するパッケージがexpress,pg（とejs）のみで作成したWebアプリを、Herokuにて公開するまでをまとめました。git自体の説明は省いたりしていますが、基本この通りやっていけば公開まではいけると思います。
全体的に情報が古めだったけど、良いサイトないかな。
OS:Windows10
terminal:powershell
テキストエディタ:VScode
1.準備
1-1.ローカル環境でexpress+postgreSQLのアプリ作成
この記事は主にローカル環境で出来上がっているけど公開の手順が分からない人向けなので、ここは省略します。
1-2.Herokuアカウント作成
1-3.HerokuのCLIを使えるようにする
https://devcenter.heroku.com/articles/heroku-cli
でDLしたあとpathを通す。
> heroku -v
heroku/7.42.1 win32-x64 node-v12.16.2
などでバージョン確認ができればok。
2.Herokuアプリに接続する
ここから先はだいたいこのサイトを参考にしてます。追加情報が必要なときのみその時の参考サイトも貼りました。
https://tacamy.hatenablog.com/entry/2013/02/16/235127
2-1.Herokuへログインする
> heroku login
ブラウザへ飛ばされたあと、そこに「成功」的な画面が出ていればok。
2-2.Herokuにアプリ作成
> heroku create
アプリ名にこだわるなら別の手順が必要ですが、僕はどうせheroku.appってurlに入るからどうでもいいかなと思って素のままいきました。
2-3.Procfile作成
app.js（自分のjsファイル名）が置かれている層にPricfile（拡張子なし）というページを作り、以下の内容のみ記述します。
web: node app.js
WSGIという、Webアプリを動かす指示書的なものらしい。詳しくはhttps://creepfablic.site/2019/05/01/heroku-procfile/
2-4.gitignore作成
先程のProcfile,app.jsと同じ層に.gitignoreを作成して、以下の内容を記述。nodeのパッケージ等はHeroku側で用意されているので、gitでアップロードしないように制御する。
node_modules
現在はこのような位置関係になっていると思います。
-app.js
-package.json
-Procfile
-.gitignore
-node_module
-public
...etc
2-5.package.jsonにengineの記述追加
特定のバージョンのみでしか動かないようにするために、package.jsonのdependenciesの後に以下の内容を記述。
...
"dependencies": {
"ejs": "^3.1.3",
"express": "^4.17.1",
"pg": "^8.2.1",
},
"engines": {
"node": "^12.17.0", //自分のバージョン
"npm": "^6.14.4" // 自分のバージョン
}
...
3.HerokuのDBへ接続する
3-1.Heroku上でDBを追加
Herokuのサイトに行き、アプリ名をクリック→Resources→Add-onsからHeroku Postgresを検索し、追加
3-2.各種データの確認
SettingsのReveal config varでURLを確認し、各種必要な値を得て、ローカル環境でのものと置き換える。
URLの構成：postgres:// ユーザー名:パスワード @ホスト名:ポート番号/データベース名
const pool = new Pool({
user: 'ユーザー名',
host: 'ホスト名',
database: 'データベース名',
password: 'パスワード',
port: 5432, //ポート番号
});
3-3.portをHeroku用に変える
ローカル環境だとapp.listen(3000)みたいになってるところを以下の内容に変更。
let port = process.env.PORT || 3000;
app.listen(port, () => {
console.log("Listening on " + port); //ここは要らないけど一応
});
適当な人のgithubからパクった。
https://github.com/FTraian/node-express-postgresql-heroku-tutorial/blob/master/web.js
4.gitでファイルをアップロードする
4-1.git commitまで
> git init
> git add .
> git commit -m "first commit"
4-2.公開鍵を設定
ここは僕自身理解度が低いですが、ひとまず僕が成功した手順を書いておきます。
まず、公開鍵が設定されていないことを確認します。
> heroku keys
! You have no SSH keys.
確認できたら、ssh公開鍵を作成します。"xxx@gmail.com"の部分はherokuに登録したメールアドレスを入力します。
> ssh-keygen -t rsa -C "xxx@gmail.com"
すると以下のようにでてくるので、Enterキーを押したりpassphraseを設定したりします。
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\ユーザー名/.ssh/id_rsa): //そのままEnterキー
Created directory 'C:\Users\ユーザー名/.ssh'.
Enter passphrase (empty for no passphrase): //パスフレーズを入力（忘れないように）
その後、Herokuに登録して完了です。
> heroku keys:add C:\Users\ユーザー名\.ssh\id_rsa.pub //id_rsa.pubがあるファイル名を指定
> heroku keys
=== xxx@gmail.com keys
...(公開鍵) xxx@gmail.com
https://daipresents.com/2012/post-5010/
https://knowledge.sakura.ad.jp/3543/
4-3.git push
初回のみ以下のコマンド。
> git remote add heroku git@アプリ名.git
あとはherokuのmasterブランチへpush。
> git push heroku master
ここまでで、自分のアプリのURLをクリックしたら開けると思います。ありがとうございました。
おまけ
ローカル環境からDBをいじるには
> heroku pg:psql -a アプリ名
アプリ名::DATABASE=>