お手軽に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の実装ではそれをポート番号に割り当てるようにしておきます。
ログを確認する
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：ローカルのブランチ名に合わせます。
試しに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: '【LINEチャネルアクセストークン(長期)】',
channelSecret: '【LINEチャネルシークレット】',
};
変更内容をコミットします。
> git add .
> git commit -m "secret added"
必要に応じて、ローカルネットワークの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ビーコンも。
以上
↧