MacでHerokuにdeploy ~ GitHubも添えて

やっとMacを買ったのでherokuの勉強をメモ。
先人のQiita記事を参考にざくざく進めます。
アカウント名、アプリ名などは適宜自分の環境のものに読み替えてください。

アカウントの用意

herokuとgithubのアカウントを用意します。
作成方法は割愛。昔も何かやろうとしてもう作ってたし。

gitリポジトリの用意

githubで以下のリポジトリをForkする。
コピーが自分のリポジトリに作られる。

https://github.com/heroku/node-js-getting-started

herokuアプリの作成

herokuでCreate New Appする。
App nameはテキトーなものを、Choose a regionはUnited Statesを選んだ。

herokuからgithubへの連携

アプリページのDeployタブへ移動する。
Deployment methodでGitHubを選択し画面の指示に従う。
GitHubがConnectedになれば良し。

デプロイ

DeployタブのManual deployのChoose a branch to deployでmainブランチを選択し、Deploy Branchボタンを押す。
しばらくするとデプロイが完了し、Viewボタンが表示されるのでそれを押す。
デプロイしたアプリが表示される。

ここまで

herokuが公開しているリポジトリをコピーしてデプロイしました。
node.jsとかのことはさておきとりあえずデプロイ方法を理解できたので良し。
ここから先はRestAPIの作成になります。

ローカル環境での編集

ターミナルで適宜作業用フォルダに移動する。
以下のコマンドを実行し、gitのリポジトリをローカルにコピーする。

git clone https://github.com/[アカウント名]/node-js-getting-started.git

index.jsを編集

index.jsを以下のように書き換えました。
参考記事の原文ママ

const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .get('/g/', (req, res) => res.json({method: "こんにちは、getさん"})) // 追加
  .post('/p/', (req, res) => res.json({method: "こんにちは、postさん"})) // 追加
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

.git/configの修正

以下のコマンドを実行し、.git/confifgへherokuの情報を追記する。

git remote add heroku https://git.heroku.com/[アプリ名].git

ローカルからherokuへデプロイ

ターミナルで以下のコマンドを実行しherokuにデプロイする。

git add .
git commit -m "add api"
git push heroku master

確認

Postman等を使いindex.jsに追記した内容が返ってくることを確認する。

終わりに

最終的な変更をgithubにpushしてないとか説明不足な部分があるけどまぁ個人用のメモなので…。
詳しくは参考記事を見てください。

参考

https://qiita.com/sho7650/items/ebd87c5dc2c4c7abb8f0
https://qiita.com/TakuTaku04/items/6ecc533385559f4660bd