LoginSignup
0

More than 3 years have passed since last update.

herokuでNode.jsを立ち上げるまでの手順

Last updated at Posted at 2020-07-30

色々と理解できていないことは多いですが、とりあえず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のインストールを行います。

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の変更

初期状態だと下記のようになっていると思います。

pakage.jsonデフォルト
{
  "dependencies": {
    "http": "^0.0.1-security"
  }
}

それを次のように変更します。

pakage.json変更後
{
  "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のバージョン確認
$ node --version

JavaScriptファイルの作成

ファイル名は先程、pakage.jsonで指定したapp.jsにして下記を書きます。

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の作成

コマンドプロンプトで下記を実行

Procifleの作成
type nul > Procifle

作成したら開いて下記を入力

web: node app.js

最終的には下記のフォルダ構造になります。

フォルダ
フォルダ
 ├ node_modules
 ├ package.json
 ├ yarn.lock
 ├ app.js
 └ Procfile

herokuにデプロイ

デプロイするのに書きの順番で実行していきます。

herokuへのデプロイ
$ git init
$ git add .
$ git commit -m 'init'
$ heroku login
$ heroku create
もしくは
$ heroku create ファイル名
$ git heroku push master

次回から更新する際は一度にまとめても記載が可能です

heroku
$ git add . && git commit -m 'init' && git heroku push master

完了したらherokuを開きます

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

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
0