GitHubまたはGiteaからHerokuにデプロイする手順

お手軽にWebサーバを立ち上げられるHerokuですが、いつもアップロードしているGitHubから立ち上げる手順や、ローカルネットワークに立ち上げているGiteaから立ち上げる手順をまとめておきます。
というより、備忘録です。すぐ忘れるので。

ローカルネットワークに立ち上げたGit（Gitea）で日ごろは構成管理をして、Qiitaに投稿するときにGitHubに複製してソースを公開し、必要に応じてサンプル動作のためにherokuにデプロイしてアプリ公開する、といった活動を想定して説明していきます。

あるいは、有志の方のGitHubをカスタマイズする場合は以下の順番になります。

heroku

GitHub

Gitea

アップロード先リポジトリを作成する

アップロード先のリポジトリを作成します。作成により、HTTPSのURLが割当たります。

Giteaに作成する場合

Giteaは、GitHubのようなGUIで管理できるGitクライアントWebサーバです。インストールは以下を参考にしてください。
GiteaをUbuntuにインストール

インストールしたGiteaサーバのWebページを開き、右上の＋ボタンから、「新しいリポジトリ」を選択して作成します。

次の画面で、適当なリポジトリ名を入力します。
リポジトリの初期設定にチェックを入れると、README.mdファイルを作ってくれます。
デフォルトブランチは、デフォルトでは「master」になっていますが、最近では「main」とするようです。

GitHubに作成する場合

直接GitHubに作成する場合も同様です。

右上の＋で表示されるポップアップから、「New repository」を選択します。

適当なRepository nameを指定して、Add a README fileにチェックを入れるとREADME.mdファイルも作られます。

アップロードしたいフォルダを作成する

ローカルPCに、アップロードしたいフォルダを作成します。以下のシーンがあるでしょう。

・既存のアップロード先リポジトリをCloneする
・新規にフォルダを作成する
・既存のフォルダにアップロード先リポジトリを追加する

既存のアップロード先リポジトリをCloneする場合

GitHubやGiteaであれば、リポジトリのページでCloneしたいHTTPSのURLがわかります。

適当なフォルダで、以下を実行します。実行完了すると、カレントフォルダにリモートリポジトリ名のフォルダが作成されてリモートリポジトリの内容がコピーされてきます。

> git clone https://*********/***/***.git

新規にフォルダを作成する場合

新規にフォルダを作成してローカルで作業した後にリモートリポジトリにアップロードしたい場合、まずはgit利用するための初期化を行います。

> git init

そして、以下を実行することで、アップロード先リポジトリの識別名が追加されます。この時点では、まだローカルのフォルダの内容はリモートリポジトリにアップロードされていません。

> git remote add origin https://**********/***/***.git

origin：リモートリポジトリの識別名

既存のフォルダにアップロード先リポジトリを追加する場合

すでに別のリポジトリをCloneしてあるフォルダでも、新たにアップロード先リポジトリを追加することができます。その場合は、すでにoriginという名前でリモートリポジトリの識別名が設定されている場合が多いので、別の名前で追加します。
例えば、GitHubをCloneしたものにGiteaを追加する場合origin_giteaとしたり、GiteaをCloneしたものをGitHubに追加する場合はorigin_githubとするとか。

> git remote add origin_github https://**********/***/***.git

設定したリモートリポジトリの識別名は以下のgitコマンドで確認できます。

> git remote -v
origin  http://YYYYYYYY/xxxx/TestRepository.git (fetch)
origin  http://XXXXXXXX/xxxx/TestRepository.git (push)
origin_github   https://github.com/poruruba/TestRepository.git (fetch)
origin_github   https://github.com/poruruba/TestRepository.git (push)

アップロードするファイルを制限する

秘匿の情報が含まれる場合など、アップロードしたくないファイルは、.gitignoreファイルに記載します。
以下、例です。

.gitignore

# Node build artifacts
node_modules
npm-debug.log
package-lock.json

# Local development
*.env
*.dev
.DS_Store

# Docker
Dockerfile
docker-compose.yml

GiteaまたはGitHubにアップロードする

編集ファイルや追加ファイルを選択する

ソースコードを変更した場合など、変更内容をプッシュします。
ここらへんは、Gitの要領です。

> git add .

選択したファイルを確定する。

ローカルリポジトリにコミットします。

> git commit -m "modified!"

-mに続く文字列で、コミット時のコメントを残します。
指定しなかった場合は、エディタが立ち上がりますので、変更保存します。

確定したファイルをアップロードする

> git push origin master

origin：リモートリポジトリの識別名で、アップロードしたいリモートリポジトリ先を指定します。
master：ローカルのブランチ名で、名前を変えていた場合は、mainとするなどそれに合わせます。

現在のローカルのブランチ名は以下のコマンドでわかります。以下の場合、masterであることがわかります。

> git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
  remotes/origin_github/master

herokuにデプロイする

登録準備をする

まずは、アップロード先のherokuのリポジトリ名を登録する必要があります。

> heroku create

上記を実行することで、以下のようにherokuというリモートリポジトリの識別名が2つ追加されているのがわかります。
.gitのファイルのファイル名YYYYの部分は、任意の値が自動的に割当たります。もし、自動割り当てが好まない場合は、heroku createの後に名前を指定します。

> git remote -v
heroku  https://git.heroku.com/YYYYYYYY.git (fetch)
heroku  https://git.heroku.com/YYYYYYYY.git (push)
origin  http://XXXXXXXX/xxxx/TestRepository.git (fetch)
origin  http://XXXXXXXX/xxxx/TestRepository.git (push)
origin_github   https://github.com/poruruba/TestRepository.git (fetch)
origin_github   https://github.com/poruruba/TestRepository.git (push)

デプロイする

herokuのリポジトリ名を追加したので、さっそくアップロードします。

> git push heroku master

先ほどの通り、herokuのリモートリポジトリの識別名は、herokuです。ブランチ名はmasterとしていますが、ローカルのブランチ名に合わせる必要があり、例えばmainの場合もあります。

起動を確認する

psコマンドに相当するコマンドがherokuに用意されています。

> heroku ps

以下が実行結果の例です。

> heroku ps
Free dyno hours quota remaining this month: 550h 0m (100%)
Free dyno usage for this app: 0h 0m (0%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping

=== web (Free): npm start (1)
web.1: idle 2021/12/26 10:34:02 +0900 (~ 5h ago)

Webサイトをブラウザで開く

Node.jsのExpressを入れている場合は、Webサーバが立ち上がりますので、ブラウザで開く場合は以下を実行します。

> heroku open

Webサーバのポート番号は、環境変数PORTが参照されている前提ですので、Node.jsの実装ではそれをポート番号に割り当てるようにしておきます。ちなみに、外部にはHTTPSプロキシサーバが仲介してくれるため、公開するポートはHTTPSの443番であって、環境変数PORTのポート番号はHTTPSプロキシサーバと内部で接続するためのポート番号です。

ログを確認する

console.logなどで出力したログは、以下で参照できます。

> heroku logs –tail

起動方法を変更する

起動はデフォルトで、npm startが実行されますが、変更したい場合は、Procfileという名前のファイルを作成して、起動方法を記載します。
以下、ファイルの中身の例です。

Procfile

web: npm start

npmを使って呼び出している場合には、package.jsonに具体的な実行方法を明記します。以下の部分です。

package.json

・・・
  "scripts": {
    "start": "node app.js",
  },
・・・

コンソールを起動する

リモートリポジトリの環境で、コンソールを起動したい場合は以下のように実行します。

> heroku run bash

変更内容をプッシュする

herokuに変更内容をプッシュする

ローカルリポジトリにコミットしてから、再度以下を実行します。

> git push heroku master

master：ローカルのブランチ名に合わせます。

GiteaまたはGitHubに変更内容をプッシュする

> git push origin master

origin：アップロード先リポジトリの識別名に合わせます。
master：ローカルのブランチ名に合わせます。

ブランチ名を変更する

ブランチ名が、masterだったりmainだったりして、ブランチ名を変更したい時があります。

〇ローカルブランチ名の変更
以下で、現在のブランチ名が変わります。

git branch -m 新ブランチ名

〇リモートブランチ名の変更
以下の手順の通りです。GiteaやGitHub上で行うのがよいです。
・ローカルブランチ名を新ブランチ名に変更
・リモートブランチに新ブランチ名でpush
・リモートのデフォルトブランチを新ブランチに変更
・リモートの旧ブランチを削除

試しにLINEボットをherokuで公開してみる

単純にEchobackするだけのLINEボットをGitHubに置いておきましたので、herokuを使って公開してみましょう。

poruruba/Linebot_Echoback

> git clone https://github.com/poruruba/Linebot_Echoback.git
> cd Linebot_Echoback
> heroku create

LINE developer consoleで、Messaging APIのチャネルを作成して、LINEチャネルアクセストークン（長期）とチャネルシークレットをメモります。

> vi api\controllers\linebot-echoback\index.js

以下の部分にメモった文字列に置き換えます。

api/controllers/linebot-echoback/index.js

const config = {
  channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN || '【LINEチャネルアクセストークン(長期)】',
  channelSecret: process.env.LINE_CHANNEL_SECRET || '【LINEチャネルシークレット】',
};

ソースコードに直接埋め込みたくない場合は、環境変数に設定して取り込むこともできます。

> heroku config:set LINE_CHANNEL_ACCESS_TOKEN="【LINEチャネルアクセストークン(長期)】" LINE_CHANNEL_SECRET="【LINEチャネルシークレット】"

設定した環境変数は以下で確認できます。

> heroku config

もしソースコードを変更していた場合は、変更内容をコミットします。

> git add .
> git commit -m "modified"

必要に応じて、ローカルネットワークのGiteaにリモートリポジトリを複製しましょう。

最後に、herokuにデプロイします。

> git push heroku main
> heroku open

こんな感じのURLでブラウザが立ち上がったかと思います。

https://XXXX-XXXX-12345.herokuapp.com/

ブラウザの内容は味気ない以下のようなページです。public/index.htmlの内容が表示されています。

さて、LINEボット向けのエンドポイント名は、/linebot-echoback としています。（api\controllers\linebot-echoback\swagger.yamlを参照）
ですので、それをくっつけたURLをLINE developer consoleのWebhook URLに指定します。

https:// XXXX-XXXX-12345.herokuapp.com/linebot-echoback

Webhookの利用のチェックをOnにしておきます。
検証ボタンを押下して、OKと出れば成功です。

あとは、QRコードから友達登録して、適当にチャットするとエコーバックされてきます。

LINEボットの詳細は、以下を参考にしてください。
　LINEボットを立ち上げるまで。LINEビーコンも。

以上