Herokuとは
条件付きですが無料でWebアプリケーションを公開できるプラットフォームと理解しております。
今回は、以前つくった こちらのソース をherokuにデプロイしてみましょう。
まず、ソースを若干修正します。
ソース
package.json
{ "name": "app", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "start": "node app.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.14.0", "http": "0.0.0", "socket.io": "^1.4.8" } }
scripts の start を追加しました。
app.js
var express = require("express"), app = require("express")(), http = require("http").Server(app), io = require("socket.io")(http); app.set("port", (process.env.PORT || 3000)); app.use("/", express.static(__dirname + "/public")); io.on("connection", (evt) => { evt.on("handleClickSwitch", function (){ io.sockets.emit("toggleBodyClass"); }); }); http.listen(app.get("port"), "0.0.0.0");
ポート番号をlocalでは3000、herokuでは80に設定します。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>socket.io</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="format-detection" content="telephone=no"> <style> body { background: #ececec; transition: background .2s ease-in-out; } body.on { background: #3c3c3c; } .adjust { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .btn { border-radius: 50%; width: 80px; height: 80px; cursor: pointer; user-select: none; } .btn .hole { position: relative; border-radius: 50%; width: 80px; height: 80px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } .btn .inner { position: relative; border-radius: 50%; width: 80px; height: 80px; color: rgba(255, 255, 255, 0.9); font: 20px AvenirNext-Heavy; line-height: 80px; text-align: center; cursor: pointer; transition: opacity .6s ease; pointer-events: none; overflow: hidden; } .btn .inner:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "OFF"; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); } .on .btn .inner:after { content: "ON"; } .btn:hover .hole { box-shadow: none; } .btn:hover .inner { top: 4px; box-shadow: none !important; } .btn:hover .inner:after { background: rgba(255, 255, 255, 0); } .btn .inner { background: #D500F9; box-shadow: 0 2px 0 #880E4F; transition: background .2s ease-in-out; } .on .btn .inner { background: #F50057; } </style> </head> <body> <div id="btn" class="btn red adjust"> <div class="hole"> <div class="inner"></div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.socket.io/socket.io-1.4.5.js"></script> <script> (function(win, doc) { "use strict"; var socket = io.connect(); socket.on("toggleBodyClass", function() { $(doc.body).toggleClass("on"); }) $("#btn").on("click", function() { socket.emit("handleClickSwitch"); }); })(window, document); </script> </body> </html>
変更なしです。
Procfile
web: npm start
Procfileを新規で作成しました。
デプロイ方法
3. ログイン
heroku toolbelt のインストールが終わるとherokuコマンドがつかえるようになります。
ターミナルからログインしましょう。
heroku login
4. gitにコミット
git init
git add .
$ git commit -m ":)"
5. gitにプッシュ
git push heroku master
6. 確認
heroku open
ブラウザが開きます。
以上です。とても手軽ですね。