WebだけでGitHubからHerokuに空っぽのWebサービスを立ち上げてみた(Node.js)
最近のHerokuって、Heroku Toolbeltインストしなくても、いいんだね。
HerokuからGitHubのリポジトリに接続してDeployできる様になってた。
という事で、Webブラウザだけで、GitHubにリポジトリ作って、Node.jsのファイルを置いて、Herokuに空っぽのWebサービスを立ち上げてみた。もちろん無料だ。
前提知識
- Node.jsによるWebアプリケーション作成知識
- npmを使って依存関係を解決する方法
- HerokuやGitHubのサインアップ方法
準備
- GitHubにサインインしよう
- Herokuにサインインしよう
Gmailアカウント等で、GitHubとHerokuにサインインしよう。
アカウント持っていなかったらサインアップからやってね。
手順
- GitHubにリポジトリ作ろう
- Node.jsのファイルを作成しよう
- Herokuでアプリを新規作成しよう
- HerokuのアプリからGitHubリポジトリに接続しよう
- HerokuでAuto Deploy設定してDeployしよう
Herokuアプリを開こう
1. GitHubにリポジトリ作ろう
クライアントのツール(Git関連ツール)でやっても良いけど、Webからできるね。
.gitignore
は言語に合わせてNodeなどを選んでおこう。
node_modules
とかリポジトリに保持して欲しくないもんね。
作成した直後は以下の様になった。良い子はREADME.md
も作ろう。
リポジトリはここに置いた。
LightSpeedC - lightspeedc-qiita-heroku1 - GitHub
2. Node.jsのファイルを作成しよう
とりあえず1行アプリでも作っておこう。
require('http').createServer((req, res) => res.end('hello')).listen(process.env.PORT || 3000);
Herokuでは、環境変数PORTでサービスしないといけないので、process.env.PORT
でlisten()
しよう。
listenの引数はportだけでいいみたい。
listenにhostnameまで追加するとHerokuでサービスできなくなるみたい。
npmのpackage.json
は一応ちゃんと作ろう。
npm init
でテンプレートを作ってからやると簡単だよね。
{
"name": "lightspeedc-qiita-heroku1",
"version": "0.0.0",
"description": "lightspeedc-qiita-heroku1",
"main": "index.js",
"engines": {
"node": "6"
},
"scripts": {
"start": "node index",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "LightSpeedC/lightspeedc-qiita-heroku1"
},
"keywords": [
"heroku"
],
"author": "LightSpeedC",
"license": "MIT"
}
でも、Webから入力してみた。コピペだけどね。
"engines": {"node": "6"}
があるとnode v6で動くみたい。
npm start
で簡単に起動できる様に、"scripts": {"start": "..."}"
に起動用コマンドを書いておくといいよ。
ここまでで.gitignore
, index.js
, package.json
だけ。
Procfile
は無くても良い。
package.json
の"scripts": {"start": "..."}
があれば。
3. Herokuでアプリを新規作成しよう
Create New App
で、新規アプリが作成できるよ。
以下の様にアプリの名前を入れるだけでOKだね。
4. HerokuのアプリからGitHubリポジトリに接続しよう
次はアプリをDeployしよう。
デフォルトだとHeroku Gitになっているので、Heroku Toolbeltが必要になってくるよね。
でも、GitHubとかDropboxのボタンがあるからGitHubをクリックしてみる。
そしてConnect to GitHub
だね。
リポジトリを名前で検索できるね。Search
してConnect
だ。
5. HerokuでAuto Deploy設定してDeployしよう
GitHubのリポジトリに接続できたね。
そうしたら自動でアプリをDeployしたいのでEnable Automatic Deploys
と、今すぐDeployしたいからDeploy Branch
だ。
ちゃんとDeployできたみたい。View
でアプリを開こう。
6. Herokuアプリを開こう
後はアプリを開くだけ。さっきの最後のView
でもいいし...
右上のOpen app
だ。
アプリはここに置いた。
「Hello」と出るだけで何にもしていないのでクリックは無意味だ。
https://lightspeedc-qiita-heroku1.herokuapp.com/
もし、アプリが動いていないなら、ログを見よう。
右上のMore
のView logs
だ。
まとめ
- Webブラウザだけで、
- GitHubにリポジトリ作って、
- Node.jsのファイルを置いて、
- Herokuに空っぽのWebサービスを立ち上げてみた
Webだけでon-the-flyでできるんだから、スマホとかタブレットだけでも、
Webサービスが立ち上げられるよね。
リンク
- GitHubリポジトリ - LightSpeedC - lightspeedc-qiita-heroku1 - GitHub
- Herokuアプリ - https://lightspeedc-qiita-heroku1.herokuapp.com/