axios と　javascript　を使ってサイトをHerokuで実装

今週はHerokuを使ってサイトの実装をしてみたいと思います。

参考資料

【資料１】【喉頭がんの治療プロトコルをNode.jsでVueに表示しHerokuにデプロイ

環境

Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1

概要

フォルダを作成し、中に＞node_modules：node.jsのデータが入っているフォルダ
　　　　　　　　　　　＞public：htmlデータを入れるフォルダ
　　　　　　　　　　　　　＞index.html:サイトを構成する静的ファイル
　　　　　　　　　　　＞index.js：作成したpublicの静的ファイルをexpressで表示させるコード
　　　　　　　　　　　＞gitignore：herokuで実装する時に不要なデータを送らないよう指定するファイル
　　　　　　　　　　　＞package-lock.json：npm init -yで作成される
　　　　　　　　　　　＞package.json：npm init -yで作成される
　　　　　　　　　　　　　インストールしたライブラリデータ等のパッケージが登録されている
　　　　　　　　　　　＞Procfile：Herokuを起動するのに必要なファイル

上記のファイルを作成し、Herokuで実装。
なんだかフォルダ名が楽天となっているのは本当は別のものを実装しようとしていて心折れた形跡です。

今回のコードを起動必要なライブラリは

npm init -y
npm i body-parser express

をそれぞれターミナルに入力し、インストール。

index.html


 <!DOCTYPE html>
<html>

<head>
    <title>Step 01</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>

    <h1>あなたのBMI</h1>

   
    <script>
        // 体重の数値を得る
        let weight;
        weight = prompt(`BMIを測定します。まずはあなたの体重(kg)を入力して下さい`);
        // 身長の数値を得る
        let height;
        height = prompt(`BMIを測定します。次にあなたの身長(ｍ)を入力して下さい`);
        //体重と身長からBMIを計算して、警告ダイアログに表示する
        let bmi = weight / (height * height);
        let message = `あなたのBMIは「` + bmi + `」です。`;
        alert(message);
        
        console.log(message);

    </script>
</body>

</html>

gitignore


# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next

index.js


var express = require('express');
var app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

// bodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.post('/post', function(req, res) {
  for (key in req.body) {
    console.log(key, '=', req.body[key]);
  }
  res.end();
});
app.listen(process.env.PORT || 8080);

console.log("server start! (heroku)");

Procfile

web: node index.js

こちら、Procfileをindex.jsと同じフォルダに置かなければHerokuをうまく使えないようですので、作成。

Herokuの実行

あとはHerokuを実行して繋げる。

完成

リアルな数字はみっともないので適当な数字を、、、
身長も体重も盛り盛りです。
良ければ一度自分のBMIを試してみてくださいｗ

完成

、、、と見せかけて。

実は先程しれっと飛ばしたherokuの実行、出来ておりません。
既にばれていたかもしれませんが

しっかりローカルで起動しております。
エラーばっかりで諦めて後まわしていたのですがひとつうまく行ったので自白を。。。

まずherokuの起動にあたって次を順番にターミナルに入力。

①

git init

②

git add --a

③

git commit -m "commit"

④

heroku create s191127-sample
//heroku create 自分のアプリ名

⑤

git push heroku master

①～⑤の手順で順番に入力すればうまくURLを取得できるはずが④でエラー。
コミットできず。。。

Creating ⬢ s191127-sample... !
! You've reached the limit of 5 apps for unverified accounts. Delete some apps or add a credit card to verify your account.

英語は読めん、、、が何やらクレジットカード的なサムシング。。。
色々調べると
【heroku create のエラー】
なんと無料herokuでは5つまでしか使えないらしい！！
そもそも５つもアプリ作った覚えない…と思いつつ疑いながらもリンクサイトを参考に下記をターミナルに入れて試してみると

heroku apps
//自分の全アプリが表示される

作った覚えのないアプリがきっちり５つ表示されました(笑)

heroku destroy --app 消したいアプリ名

もう一度しつこく聞いてくるので
消したいアプリ名だけを再入力し削除！

改めて④を再実行！

⑤も再実行！！

やったね！！
本当に完成！！！

https://s191127-sample.herokuapp.com

ありがとうございました！！