これも公式通りにangular-cliを使用
https://github.com/angular/angular-cli
■疎通確認
nginxから4200をfowerdingしてもInvalid Host headerになる。
ホスト名チェックでエラーになっているようなので一時的に以下をtrue固定にして確認。動作確認出来たらもとに戻す。
node_modules/webpack-dev-server/lib/Server.js
・checkHostのreturnをtrue固定
■Angularのビルド
ng build
※dist/が作成される
■expressをインストール
angularで作成したフォルダに移動して以下を実行
npm install --save express
expressコマンドが作成した/bin/wwwをコピーしてAngularを表示するようにする
以下を参考
https://qiita.com/frost_star/items/75290a6749fb7933b420
bin/www
// 使用するライブラリの読み込み
const express = require('express');
const path = require('path');
const http = require('http');
// api.js(サーバサイドの処理スクリプト)の読み込み
const api = require('./server/routes/api');
// expressの初期化
const app = express();
// 静的ファイルパスの設定
// ビルド後のAngularのパスを設定する
app.use(express.static(path.join(__dirname, 'dist')));
// /apiでアクセスしたときはapi.jsを表示
app.use('/api', api);
// 任意のURLでアクセスしたときはdist/index.html(Angularのindex.html)を表示
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
/**
* ポート設定
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* HTTPサーバの作成
*/
const server = http.createServer(app);
/**
* ポート監視を開始する
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
server/routes/api.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.header('Content-Type', 'text/plain;charset=utf-8');
res.send('これはサーバサイドスクリプトだよ');
});
module.exports = router;
■実行
forever start ./meanapp/bin/www
