WebだけでGitHubからHerokuに空っぽのWebサービスを立ち上げてみた(Node.js)

WebだけでGitHubからHerokuに空っぽのWebサービスを立ち上げてみた(Node.js)
----

最近の[**Heroku**](https://heroku.com)って、[**Heroku Toolbelt**](https://toolbelt.heroku.com/)インストしなくても、いいんだね。
HerokuからGitHubのリポジトリに接続してDeployできる様になってた。

という事で、Webブラウザだけで、GitHubにリポジトリ作って、Node.jsのファイルを置いて、Herokuに空っぽのWebサービスを立ち上げてみた。もちろん無料だ。

前提知識
----

1. Node.jsによるWebアプリケーション作成知識
2. npmを使って依存関係を解決する方法
3. HerokuやGitHubのサインアップ方法


準備
----

1. GitHubにサインインしよう
2. Herokuにサインインしよう

Gmailアカウント等で、[**GitHub**](https://github.com)と[**Heroku**](https://heroku.com)にサインインしよう。
アカウント持っていなかったらサインアップからやってね。

![heroku002-signup.png](https://qiita-image-store.s3.amazonaws.com/0/16128/6695cba3-e23d-d232-fc3b-d019bc1ea174.png)


手順
----

1. GitHubにリポジトリ作ろう
2. Node.jsのファイルを作成しよう
3. Herokuでアプリを新規作成しよう
4. HerokuのアプリからGitHubリポジトリに接続しよう
5. HerokuでAuto Deploy設定してDeployしよう
6. Herokuアプリを開こう


1. GitHubにリポジトリ作ろう
----

クライアントのツール(Git関連ツール)でやっても良いけど、Webからできるね。

`.gitignore`は言語に合わせてNodeなどを選んでおこう。
`node_modules`とかリポジトリに保持して欲しくないもんね。

![github001-create-new-repository.png](https://qiita-image-store.s3.amazonaws.com/0/16128/138e6176-ff8a-de5b-babe-e1b0a73ede60.png)

作成した直後は以下の様になった。良い子は`README.md`も作ろう。

![github002-repository-created.png](https://qiita-image-store.s3.amazonaws.com/0/16128/5018610d-378a-1d64-2511-2c2425c812fe.png)

リポジトリはここに置いた。
[LightSpeedC - lightspeedc-qiita-heroku1 - GitHub](https://github.com/LightSpeedC/lightspeedc-qiita-heroku1)

2. Node.jsのファイルを作成しよう
----

とりあえず1行アプリでも作っておこう。

```js:index.js
require('http').createServer((req, res) => res.end('hello')).listen(process.env.PORT || 3000);
```

**Heroku**では、環境変数PORTでサービスしないといけないので、`process.env.PORT`で`listen()`しよう。
listenの引数はportだけでいいみたい。
listenにhostnameまで追加するとHerokuでサービスできなくなるみたい。

![github003-new-file-javascript.png](https://qiita-image-store.s3.amazonaws.com/0/16128/e3585065-c383-82ce-38fa-f085c2f04284.png)


npmの`package.json`は一応ちゃんと作ろう。
`npm init`でテンプレートを作ってからやると簡単だよね。

```json:package.json
{
  "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": "..."}"`に起動用コマンドを書いておくといいよ。

![github004-new-file-package-json.png](https://qiita-image-store.s3.amazonaws.com/0/16128/02367e77-7e28-9465-7518-ae2af88ab6de.png)

ここまでで`.gitignore`, `index.js`, `package.json`だけ。

`Procfile`は無くても良い。
`package.json`の`"scripts": {"start": "..."}`があれば。

![github005-files-in-repository.png](https://qiita-image-store.s3.amazonaws.com/0/16128/b826c123-c9ad-e9e2-c467-abde1883972a.png)



3. Herokuでアプリを新規作成しよう
----

`Create New App`で、新規アプリが作成できるよ。

![heroku008-dashboard-no-apps.png](https://qiita-image-store.s3.amazonaws.com/0/16128/1b23a115-3d15-d774-765c-51fa2c0ec0aa.png)

以下の様にアプリの名前を入れるだけでOKだね。

![heroku009-create-first-app.png](https://qiita-image-store.s3.amazonaws.com/0/16128/2eaa505c-4c53-5318-9dda-99c7ccde860a.png)


4. HerokuのアプリからGitHubリポジトリに接続しよう
----

次はアプリをDeployしよう。
デフォルトだとHeroku Gitになっているので、Heroku Toolbeltが必要になってくるよね。

![heroku010-first-app-before-deploy.png](https://qiita-image-store.s3.amazonaws.com/0/16128/5a239cbe-5363-6784-d7a6-8dee9c6e155e.png)

でも、GitHubとかDropboxのボタンがあるからGitHubをクリックしてみる。

![heroku011-connect-to-github.png](https://qiita-image-store.s3.amazonaws.com/0/16128/7a68a631-1d7c-3bf6-cbd5-2827ab6684fd.png)

そして`Connect to GitHub`だね。

![heroku012-search-repository.png](https://qiita-image-store.s3.amazonaws.com/0/16128/b5fd0964-6f4c-9b3f-9cf1-828d54717582.png)

リポジトリを名前で検索できるね。`Search`して`Connect`だ。


5. HerokuでAuto Deploy設定してDeployしよう
----

GitHubのリポジトリに接続できたね。

![heroku013-repository-connected.png](https://qiita-image-store.s3.amazonaws.com/0/16128/9b8799ec-76a6-3045-50f2-962cfaca1d03.png)

そうしたら自動でアプリをDeployしたいので`Enable Automatic Deploys`と、今すぐDeployしたいから`Deploy Branch`だ。

![heroku014-auto-deploy.png](https://qiita-image-store.s3.amazonaws.com/0/16128/1ac3517a-81fa-7a07-18aa-63c1c6949a99.png)

ちゃんとDeployできたみたい。`View`でアプリを開こう。

6. Herokuアプリを開こう
----

後はアプリを開くだけ。さっきの最後の`View`でもいいし...

![heroku015-open-app.png](https://qiita-image-store.s3.amazonaws.com/0/16128/54432cca-b5ff-4d76-83f6-1b2b4552631d.png)

右上の`Open app`だ。

![heroku016-app-page.png](https://qiita-image-store.s3.amazonaws.com/0/16128/553c7842-82ba-edb1-2b9b-ae16d8d630c5.png)

アプリはここに置いた。
「Hello」と出るだけで何にもしていないのでクリックは無意味だ。
https://lightspeedc-qiita-heroku1.herokuapp.com/

もし、アプリが動いていないなら、ログを見よう。
右上の`More`の`View logs`だ。

![heroku017-view-logs.png](https://qiita-image-store.s3.amazonaws.com/0/16128/2135a1d3-6ed1-0009-787b-184de832ef0a.png)

まとめ
----

+ Webブラウザだけで、
+ GitHubにリポジトリ作って、
+ Node.jsのファイルを置いて、
+ Herokuに空っぽのWebサービスを立ち上げてみた

Webだけでon-the-flyでできるんだから、スマホとかタブレットだけでも、
Webサービスが立ち上げられるよね。


リンク
----

+ GitHubリポジトリ - [LightSpeedC - lightspeedc-qiita-heroku1 - GitHub](https://github.com/LightSpeedC/lightspeedc-qiita-heroku1)
+ Herokuアプリ - https://lightspeedc-qiita-heroku1.herokuapp.com/