色々と理解できていないことは多いですが、とりあえずherokuで立ち上げられたので手順を記載。
エラーでまくったしいろんなサイト見すぎてもはや何を参考にしたのかわからなくなってます。
前提
① Node.js、herokuはインストール済み
② パッケージマネージャーはyarnを仕様
下記の記事を見てyarnにしました
https://qiita.com/qulylean/items/afa2acff6ed963c88798
yarnのインストール
上記の記事を参考にyarnをインストールします。
yarnでhttpモジュールのインストール
コマンドプロンプトを立ち上げて今回作成したいフォルダまでディレクトリの移動をします。
フォルダの移動
$ cd フォルダ名
前に戻る
$ cd ..
フォルダの作成
$ mkdir フォルダ名
フォルダを作成して移動
$ mkdir フォルダ名 && cd フォルダ名
ファイルの作成
$ type nul > ファイル名
ディレクトリの移動が完了したら下記のコマンドを実行します。
$ yarn add http
すると必要なフォルダが用意されて下記の状態になります。
フォルダ
├ node_modules
├ package.json
└ yarn.lock
yarnでexpressモジュールのインストール
次のコマンドを実行してexpressのインストールを行います。
$ yarn add express
実行完了すると下記の表示がでるので、package.jsonに記載するためにバージョンだけ覚えておいてください。
yarn add v1.22.4
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ express@4.17.1
info All dependencies
└─ express@4.17.1
Done in 3.23s.
package.jsonの変更
初期状態だと下記のようになっていると思います。
{
"dependencies": {
"http": "^0.0.1-security"
}
}
それを次のように変更します。
{
"name": "hello_world",
"version": "1.0.0",
"description": "",
"main": "app.js",
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"jade": "*"
},
"engines": {
"node": "12.18.1"
}
}
現在使用しているnodeのバージョンは下記のコマンドで確認が可能です。
$ node --version
JavaScriptファイルの作成
ファイル名は先程、pakage.jsonで指定したapp.jsにして下記を書きます。
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log('listen: ' + port);
});
ここまでできたらまずローカルで動くかを確かめてみましょう。
コマンドプロンプトで下記を実行してください。
$ node app.js
listen: 5000 と表示されたらブラウザで下記を開いてください。
localhost:5000
無事「Hello World!」が表示されていたらOKです。
閉じる場合コマンドプロンプト上でCtrl + C を押すと終了できます。
Procfileの作成
コマンドプロンプトで下記を実行
type nul > Procifle
作成したら開いて下記を入力
web: node app.js
最終的には下記のフォルダ構造になります。
フォルダ
├ node_modules
├ package.json
├ yarn.lock
├ app.js
└ Procfile
herokuにデプロイ
デプロイするのに書きの順番で実行していきます。
$ git init
$ git add .
$ git commit -m 'init'
$ heroku login
$ heroku create
もしくは
$ heroku create ファイル名
$ git heroku push master
次回から更新する際は一度にまとめても記載が可能です
$ git add . && git commit -m 'init' && git heroku push master
完了したらherokuを開きます
$ heroku open
もしくはデプロイ時に出てきた
https://{アプリ名}.herokuapp.com/
をブラウザで開いても大丈夫です。
Hello World!が表示されていたら完了です。
herokuへのデプロイ時にエラーがでたら
下記のエラーが出た場合はyarnのバージョンが古いためのエラーです。
error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.
コマンドプロンプトで下記を実行してyarnをアップデートして再度実行してみてください。
$ yarn install