Angular CLIで作成したPWAをHerokuにデプロイする

初めに

前回投稿した記事のPWAアプリをデプロイするので、まだ見てない方は
(https://qiita.com/KashikomaSweet/items/a156e2c2468017359df0)
を良ければご覧ください。

Herokuにデプロイする

https://qiita.com/DotaKobayashi/items/0d9712c7ab31a29ebb5c
こちらの記事を参考にしながら、Herokuにデプロイします。

手順

ファイルを追加

①server.jsを追加

const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist/pwa-sample'));
app.listen(process.env.PORT || 8080);
const path = require('path');
app.get('/*', function(req, res){
  res.sendFile(path.join(__dirname + '/dist/pwa-sample/index.html'));
});

ファイルを編集

①package.jsonを編集

{
  "name": "pwa-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "postinstall": "ng build --prod && node generate-sw.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "workbox-build": "^3.6.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.x"
  }
}

startとpostinstallとenginesをいじっています。
enginesのバージョンは、herokuが対応しているバージョンを入力しましょう。
https://devcenter.heroku.com/articles/nodejs-support

herokuでアプリを作成

①まずはherokuCLIをインストール
https://devcenter.heroku.com/articles/heroku-cli

②herokuのダッシュボードからアプリを作成
右上のnewを押すと、Create new appがあります。
作成すると自動で、Deployページに飛ぶと思います。
後は、そこに書いているコマンドを入れるだけ
(cd my-project/の部分は、前回作成したプロジェクトのディレクトリに)

③ﾃﾞﾌﾟﾛｰｲ
(PCで、アクセス後オフラインでアクセスしても表示され
iPhoneでもアクセス後ホーム画面追加するとPWA化されているはず・・・)

今後の目標

今後はAngular自体を勉強して、このPWASAMPLEを拡張できればと思ってます。
(努力目標)