Heroku
Angular2

Angular2v5 Tutorial を Herokuヘデプロイ

  • Heroku CLIインストールしている
  • heroku login している

express インストール

npm i express --save

server.js 作成

package.json や README.md と同じ階層に

const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);
const path = require('path');
app.get('/*', function(req, res){
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});
console.log('Server listening on port 8080');

packege.json

{
  "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --target=production",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.0.29",
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "angular-in-memory-web-api": "^0.5.2",
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.4",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }
}

Error: Cannot find module '@angular-devkit/core'

エラーが出たので,npm i @angular-devkit/core"@angular-devkit/core": "0.0.29"追加.
もしくは、

npm update -g @angular/cli

package.jsonを"@angular/cli": "1.6.0",=> "@angular/cli": "^1.6.0"

npm update

その他にHerokuデプロイで追加した箇所.

  "scripts": {
    "postinstall": "ng build --aot --target=production",
    "start": "node server.js"
  }
..
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }

Heroku へデプロイ:GitHub連携

GitHub へ push すると 自動で Heroku も 自動デプロイされる
1. GitHub リポ を作成し、ローカルと紐付け
2. Heroku コマンド で heroku create [yourAppName]
3. Heroku サイトの該当AppからDeploy/Deployment methodのGitHubを選択し、App connected to GitHubでGithubリポジトリ名を入力し紐付け,次にAutomatic deploysでEnable Auto.. Deployを押して完了.

Heroku へデプロイ: 通常

heroku create [yourAppName]
git push heroku master