単一ページをホストするHerokuの角型アプリケーションをExpressを使用して

Question

私はAngularを初めて使っています。私はHerokuで構築した小さなアプリケーションをホストしようとしています。私はWebサーバーが必要だと理解しています。私はExpressのことを聞いたことがあるが、以前はそれを使ったことはなかった。私がHerokuでホストできるようにするために誰かが私のserver.jsファイルに追加する必要があることを指摘したら、それは大いに感謝されるだろう！また、私のアプリがHerokuでホストされることを可能にするより良い、より簡単なソリューションがある場合は、私に教えてください。

次のように私のファイル構造は次のとおりです。

Project/ 

|-- components 
    |-- project.controller.js 
    |-- project.factory.js 
|-- css 
| |-- style.css 
| | 
|-- node_modules 
| 
|-- scripts 
| |-- app.js 
| 
| 
|-- index.html 
|-- server.js 
|-- package.json 
|-- README 

を/scriptsで私app.jsファイルから非常に簡単なコード）は、次のとおりです。

(function() { 



"use strict"; 

    angular 
    .module('project', ['ngMaterial', 'firebase']) 
    .config(function($mdThemingProvider) { 
     $mdThemingProvider.theme('default') 
     .primaryPalette('teal') 
     .warnPalette('deep-orange') 
     .accentPalette('indigo'); 
    }); 

})(); 

そして、私がこれまで持っているコード私のserver.jsファイルは：

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

// app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res){ 
    res.redirect('/index.html'); 
}); 

var PORT = process.env.PORT || 8080; 
app.listen(PORT); 

私は理解できないものがあります。私はこのことを理解するための助けに感謝します。前もって感謝します！それが役に立ちそうなら、私は喜んでもっと多くのコードを共有します。

Answer 1

サーバーを起動するpackage.jsonのセクションにstartを追加する必要があります。 gruntやgulpなどのタスクランナーを使用しない場合は、nodeコマンドを使用してサーバーを起動します。あなたのpackage.jsonのチェック例については下記をご覧ください。

package.json

{ 
    "name": "project", 
    "version": "0.0.0", 
    "description": "Project", 
    "main": "index.js", 
    "author": "userName", 
    "license": "MIT", 
    "scripts": { 
     "start": "node ./server.js" 
    }, 
    "dependencies": { 
     "angular": "^1.6.1", 
     "angular-animate": "^1.5.8", 
     "angular-aria": "^1.5.8", 
     "angular-material": "^0.11.4", 
     "mdi": "^1.7.22", 
     "express": "^4.15.0" 
    } 
} 

今、あなたは、プロジェクトのコンテキストでコマンドnpm startと、このかかわらず、コマンドプロンプトをテストします。サーバーが起動したら、あなたはherokuにあなたのアプリを展開しようとします。