質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

expressを用いたNode.jsのデプロイ方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,057
退会済みユーザー

退会済みユーザー

現在
https://sbfl.net/blog/2018/08/25/nodejs-express-webapi/
こちらのサイトを参考にNode.jsでexpressを使い、簡単なAPI作成を勉強中の初心者です。
やりたいことは、アプリをデプロイして、コマンドプロントでnode index.jsと起動するのと同じように起動したいです。
コードはサイトからのコピペです。

// expressモジュールを読み込む
const express = require('express');

// expressアプリを生成する
const app = express();

// webフォルダの中身を公開する
app.use(express.static('web'));

// http://localhost:3000/api/v1/list にアクセスしてきたときに
// TODOリストを返す
app.get('/api/v1/list', (req, res) => {
    // クライアントに送るJSONデータ
    const todoList = [
        { title: 'JavaScriptを勉強する', done: true },
        { title: 'Node.jsを勉強する', done: false },
        { title: 'Web APIを作る', done: false }
    ];

    // JSONを送信する
    res.json(todoList);
});

// ポート3000でサーバを立てる
app.listen(3000, () => console.log('Listening on port 3000'));
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TODOリスト</title>
    <style>
        html {
            background-color: rgb(240, 240, 240);
        }
    </style>
</head>
<body>
    <h1>TODO List</h1>
    <div>
        <ul id="todo-container"></ul>
    </div>

    <script>
        // APIからJSONを取得する
        fetch('./api/v1/list')
            .then((response) => response.json())
            .then((todoList) => {
                // id="todo-container"要素を取得する
                const todoContainer = document.querySelector('#todo-container');

                // コンテナの中身を全部消す
                todoContainer.innerHTML = '';

                // JSONの各要素に対して
                for(const item of todoList) {
                    const li = document.createElement('li');          // リスト要素
                    const label = document.createElement('label');    // ラベル
                    const checkbox = document.createElement('input'); // チェックボックス
                    checkbox.type = 'checkbox';
                    checkbox.checked = item.done;                     // 項目がdoneならチェック
                    const text = new Text(item.title);                // 項目名

                    // ラベルにチェックボックスとテキストを追加する
                    label.appendChild(checkbox);
                    label.appendChild(text);

                    // リスト要素に先ほどのラベルを追加する
                    li.appendChild(label);

                    // TODOリストにリスト要素を追加する
                    todoContainer.appendChild(li);
                }
            })
    </script>
</body>
</html>

フォルダ構成は以下の通りです。
プロジェクトフォルダ
|--node_modulesフォルダ
|--webフォルダ--index.html
|--index.js、package.json、package-lock.json

上記コードをnode index.jsで起動し、http://localhost:3000/にアクセスすると
index.jsがはたらいた状態でhtmlページが表示されます。
これをwebアプリとしてデプロイして同じように表示する方法を探しています。
デプロイ先として試したのは、AWS Amplify、Google firebase、heroku等ですが、
いずれもindex.jsの動かし方がわかりませんでした。

調べては試すの繰り返しなので、理解不足は承知の上ですが、ご教示頂ければ幸いです。

追記
そもそも上記フォルダ構成をそのままデプロイしようというのが間違いなのでしょうか?
expressプロジェクトには既定のフォルダ構成があるようですが、そのルールに従わないといけない気がしてきました。
そのあたりも含めてアドバイスを頂けるとありがたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

https://yuap.jp/blog/697
こちらのサイトを参考に、index.jsのapp.listenを
app.listen(process.env.PORT || 8080, function () { //⑩
console.log('Example app listening on port 8080!')
})
に変更したらデプロイできました!
サイトによると
>Herokuではポート番号が動的に生成されるため、固定のポート番号が使えません。そのため、このような処理を行っています。
とのことでした。

回答を頂いたgentaroさん、AkitoshiManabeさん、お二方ともアドバイスを頂きありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

例えばHerokuなら、公式が
Getting Started on Heroku with Node.js
こういう親切なチュートリアルを用意してくれてるので、それをやってみたら良いんじゃないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/26 16:22

    公式のものを読んだ上で、補完する目的で他のものを読むのは良いと思いますが。

    キャンセル

  • 2019/10/26 16:25

    Google翻訳等に頼りながらでも読むように心がけます

    キャンセル

  • 2019/10/26 22:30 編集

    herokuのチュートリアルを読み、既存のアプリをデプロイするという手順(https://devcenter.heroku.com/articles/deploying-nodejs )にに従って上記コードでトライしてみたのですが、エラーページしか表示されませんでした・・・。localhost:5000でアクセスするという手順の時点で表示できず、index.jsのapp.listenを3000から5000に変えればローカルでは表示できました。しかし、herokuへのデプロイはエラーページでした・・・。

    キャンセル

0

Express はuse(middleware)した順に、実装を評価します。

app.use(express.static('web')); は最後に評価する形に(app.listen()の直前)に書き直してみてはどうでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/26 22:35 編集

    gentaroさんのアドバイスの元、herokuでのデプロイ時にAkitoshiManabeさんのアドバイスも試してみました。
    ローカルでは
    localhost:指定ポート番号
    で表示できますが、デプロイ後はherokuのエラーページが表示される結果でした。
    そもそもこのフォルダ構成をそのままデプロイというのが間違いなのでしょうか・・・

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る