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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/3799cd73-4e86-9c18-e877-d2c78b4e8a0d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0a66a11e-3d2e-280c-519e-ad046b623147.png)

heroku

https://dashboard.heroku.com/

GitHub

https://github.com/

Gitea

https://gitea.io/ja-jp/

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

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

##Giteaに作成する場合

Giteaは、GitHubのようなGUIで管理できるGitクライアントWebサーバです。インストールは以下を参考にしてください。
[GiteaをUbuntuにインストール](https://qiita.com/poruruba/items/a2f284381bb6f93b1b46)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/0902bbe9-37a1-7c53-edad-8e078c71b34c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/174556d7-f711-db0d-65b0-d17370dc48a5.png)

##GitHubに作成する場合

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

https://github.com/

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/d670aa46-9bd8-bcc4-c342-fbc92794c1a1.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/2161b451-96b0-cc8e-6aa9-9401d2a4e9b7.png)

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c6c4ddd5-7203-a2f5-e3e7-d70dacf261be.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c6ce102b-8f0b-c267-db7b-81614a8af6fd.png)

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

```
> 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に具体的な実行方法を明記します。以下の部分です。

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

https://github.com/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
```

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

```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の内容が表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/83f01782-d0b9-dd91-568d-548d33d5f5fa.png)

さて、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ビーコンも。](https://qiita.com/poruruba/items/c71c96ca83c7403c2930)

以上