LoginSignup
14
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-23

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

最近のHerokuって、Heroku Toolbeltインストしなくても、いいんだね。
HerokuからGitHubのリポジトリに接続してDeployできる様になってた。

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

前提知識

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

準備

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

Gmailアカウント等で、GitHubHerokuにサインインしよう。
アカウント持っていなかったらサインアップからやってね。

heroku002-signup.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

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

github002-repository-created.png

リポジトリはここに置いた。
LightSpeedC - lightspeedc-qiita-heroku1 - GitHub

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

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

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

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

github003-new-file-javascript.png

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

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

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

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

github005-files-in-repository.png

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

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

heroku008-dashboard-no-apps.png

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

heroku009-create-first-app.png

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

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

heroku010-first-app-before-deploy.png

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

heroku011-connect-to-github.png

そしてConnect to GitHubだね。

heroku012-search-repository.png

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

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

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

heroku013-repository-connected.png

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

heroku014-auto-deploy.png

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

6. Herokuアプリを開こう

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

heroku015-open-app.png

右上のOpen appだ。

heroku016-app-page.png

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

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

heroku017-view-logs.png

まとめ

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

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

リンク

14
13
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
13