1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-30

使用するパッケージが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, //ポート番号
});

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

あとはherokuのmasterブランチへpush。

terminal
> git push heroku 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/

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?