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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

3回答

4837閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1グッド

1クリップ

投稿2019/10/26 03:42

編集2019/10/26 13:40

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

javacsript

1// expressモジュールを読み込む 2const express = require('express'); 3 4// expressアプリを生成する 5const app = express(); 6 7// webフォルダの中身を公開する 8app.use(express.static('web')); 9 10// http://localhost:3000/api/v1/list にアクセスしてきたときに 11// TODOリストを返す 12app.get('/api/v1/list', (req, res) => { 13 // クライアントに送るJSONデータ 14 const todoList = [ 15 { title: 'JavaScriptを勉強する', done: true }, 16 { title: 'Node.jsを勉強する', done: false }, 17 { title: 'Web APIを作る', done: false } 18 ]; 19 20 // JSONを送信する 21 res.json(todoList); 22}); 23 24// ポート3000でサーバを立てる 25app.listen(3000, () => console.log('Listening on port 3000'));

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>TODOリスト</title> 6 <style> 7 html { 8 background-color: rgb(240, 240, 240); 9 } 10 </style> 11</head> 12<body> 13 <h1>TODO List</h1> 14 <div> 15 <ul id="todo-container"></ul> 16 </div> 17 18 <script> 19 // APIからJSONを取得する 20 fetch('./api/v1/list') 21 .then((response) => response.json()) 22 .then((todoList) => { 23 // id="todo-container"要素を取得する 24 const todoContainer = document.querySelector('#todo-container'); 25 26 // コンテナの中身を全部消す 27 todoContainer.innerHTML = ''; 28 29 // JSONの各要素に対して 30 for(const item of todoList) { 31 const li = document.createElement('li'); // リスト要素 32 const label = document.createElement('label'); // ラベル 33 const checkbox = document.createElement('input'); // チェックボックス 34 checkbox.type = 'checkbox'; 35 checkbox.checked = item.done; // 項目がdoneならチェック 36 const text = new Text(item.title); // 項目名 37 38 // ラベルにチェックボックスとテキストを追加する 39 label.appendChild(checkbox); 40 label.appendChild(text); 41 42 // リスト要素に先ほどのラベルを追加する 43 li.appendChild(label); 44 45 // TODOリストにリスト要素を追加する 46 todoContainer.appendChild(li); 47 } 48 }) 49 </script> 50</body> 51</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プロジェクトには既定のフォルダ構成があるようですが、そのルールに従わないといけない気がしてきました。
そのあたりも含めてアドバイスを頂けるとありがたいです。

set0gut1👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

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さん、お二方ともアドバイスを頂きありがとうございました。

投稿2019/10/26 14:29

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2019/10/26 08:45

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/10/26 13:35 編集

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

0

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

投稿2019/10/26 06:24

gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/10/26 07:15

回答ありがとうございます。 チュートリアルが英語だったので避けてしまいました。 やってみますね。
gentaro

2019/10/26 07:20

英語かどうかより、公式かどうかを気にした方が良いです。 どっかの誰かが書いた日本語記事にはなんの保証もないし、書かれた当時は正しかったとしても仕様変更等によりうまく行かないケースがあるので。
gentaro

2019/10/26 07:22

公式のものを読んだ上で、補完する目的で他のものを読むのは良いと思いますが。
退会済みユーザー

退会済みユーザー

2019/10/26 07:25

Google翻訳等に頼りながらでも読むように心がけます
退会済みユーザー

退会済みユーザー

2019/10/26 13:36 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問