Help us understand the problem. What is going on with this article?

express+postgreSQL+HerokuでWebアプリを公開した手順

使用するパッケージがexpress,pg(とejs)のみで作成したWebアプリを、Herokuにて公開するまでをまとめました。git自体の説明は省いたりしていますが、基本この通りやっていけば公開まではいけると思います。
全体的に情報が古めだったけど、良いサイトないかな。

OS:Windows10
terminal:powershell
テキストエディタ:VScode

1.準備

1-1.ローカル環境でexpress+postgreSQLのアプリ作成

この記事は主にローカル環境で出来上がっているけど公開の手順が分からない人向けなので、ここは省略します。

1-2.Herokuアカウント作成

https://www.heroku.com/

1-3.HerokuのCLIを使えるようにする

https://devcenter.heroku.com/articles/heroku-cli
でDLしたあとpathを通す。

terminal
> 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へログインする
terminal
> heroku login

ブラウザへ飛ばされたあと、そこに「成功」的な画面が出ていればok。

2-2.Herokuにアプリ作成
terminal
> heroku create

アプリ名にこだわるなら別の手順が必要ですが、僕はどうせheroku.appってurlに入るからどうでもいいかなと思って素のままいきました。

2-3.Procfile作成

app.js(自分のjsファイル名)が置かれている層にPricfile(拡張子なし)というページを作り、以下の内容のみ記述します。

Procfile
web: node app.js

WSGIという、Webアプリを動かす指示書的なものらしい。詳しくはhttps://creepfablic.site/2019/05/01/heroku-procfile/

2-4.gitignore作成

先程のProcfile,app.jsと同じ層に.gitignoreを作成して、以下の内容を記述。nodeのパッケージ等はHeroku側で用意されているので、gitでアップロードしないように制御する。

.gitignore
node_modules

現在はこのような位置関係になっていると思います。

-app.js
-package.json
-Procfile
-.gitignore
-node_module
-public
...etc

2-5.package.jsonにengineの記述追加

特定のバージョンのみでしか動かないようにするために、package.jsonのdependenciesの後に以下の内容を記述。

package.json
...
  "dependencies": {
    "ejs": "^3.1.3",
    "express": "^4.17.1",
    "pg": "^8.2.1",
  },
  "engines": {
    "node": "^12.17.0", //自分のバージョン
    "npm":  "^6.14.4" // 自分のバージョン
  }
...

https://qiita.com/suin/items/994458418c737cc9c3e8

3.HerokuのDBへ接続する

3-1.Heroku上でDBを追加

Herokuのサイトに行き、アプリ名をクリック→Resources→Add-onsからHeroku Postgresを検索し、追加

3-2.各種データの確認

SettingsのReveal config varでURLを確認し、各種必要な値を得て、ローカル環境でのものと置き換える。

URLの構成:postgres:// ユーザー名:パスワード @ホスト名:ポート番号/データベース名
app.js
const pool = new Pool({
  user: 'ユーザー名',
  host: 'ホスト名',
  database: 'データベース名',
  password: 'パスワード',
  port: 5432, //ポート番号
});

https://qiita.com/shosho/items/5ebabf11efb1f3b604f7#url%E3%81%AE%E6%A7%8B%E6%88%90

3-3.portをHeroku用に変える

ローカル環境だとapp.listen(3000)みたいになってるところを以下の内容に変更。

app.js
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まで
terminal
> git init
> git add .
> git commit -m "first commit"
4-2.公開鍵を設定

ここは僕自身理解度が低いですが、ひとまず僕が成功した手順を書いておきます。
まず、公開鍵が設定されていないことを確認します。

terminal
> heroku keys
!  You have no SSH keys.

確認できたら、ssh公開鍵を作成します。"xxx@gmail.com"の部分はherokuに登録したメールアドレスを入力します。

terminal
> ssh-keygen -t rsa -C "xxx@gmail.com"

すると以下のようにでてくるので、Enterキーを押したりpassphraseを設定したりします。

terminal
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に登録して完了です。

terminal
> 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

初回のみ以下のコマンド。

terminal
> git remote add heroku git@アプリ名.git

あとはいつもどおり。

terminal
> git push origin master

ここまでで、自分のアプリのURLをクリックしたら開けると思います。ありがとうございました。

おまけ

ローカル環境からDBをいじるには
terminal
> heroku pg:psql -a  アプリ名
アプリ名::DATABASE=>

 
https://sysrigar.com/2019/01/20/heroku-postgres%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%8B%E3%82%89%E6%89%8B%E5%8B%95%E3%81%A7%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした