0) Node 설치
> curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
> sudo apt-get install nodejs
> sudo apt-get install npm
1) Node 를 최신버젼으로 업그레이드 한다.
> sudo npm install -g n
> sudo n stable
2) Angular CLI 를 설치한다.
> sudo npm install -g @angular/cli
3) 프로젝트 폴더 생성
> ng new U2ReportServer
4) 프로젝트 폴더로 진입
> cd U2ReportServer
5) express , multer , cors 모듈 추가
> npm install express multer cors chart.js --save
6) 생성된 package.json 파일을 확인한다.
----------------------------------------------------------
{
"name": "u2-report-server",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"chart.js": "^2.7.3",
"core-js": "^2.5.4",
"cors": "^2.8.4",
"express": "^4.16.4",
"multer": "^1.4.1",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/cli": "~6.2.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.3.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": "~2.9.2"
}
}
----------------------------------------------------------
7) ./backend/config/multer.config.js 파일을 생성한다.
----------------------------------------------------------
const multer = require('multer');
var storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, __basedir + '/uploads/')
},
filename: (req, file, cb) => {
cb(null, file.originalname)
}
});
var upload = multer({storage: storage});
module.exports = upload;
----------------------------------------------------------
8) ./backend/routers/file.router.js 파일을 생성한다.
----------------------------------------------------------
let express = require('express');
let router = express.Router();
let upload = require('../config/multer.config.js');
let fileWorker = require('../controllers/file.controller.js');
router.post('/api/file/upload', upload.single("file"), fileWorker.uploadFile);
router.get('/api/file/all', fileWorker.listUrlFiles);
router.get('/api/file/:filename', fileWorker.downloadFile);
module.exports = router;
----------------------------------------------------------
9) ./backend/controllers/file.controller.js 파일을 생성한다.
----------------------------------------------------------
const uploadFolder = __basedir + '/uploads/';
const fs = require('fs');
exports.uploadFile = (req, res) => {
res.send('File uploaded successfully! -> filename = ' + req.file.filename);
}
exports.listUrlFiles = (req, res) => {
fs.readdir(uploadFolder, (err, files) => {
for (let i = 0; i < files.length; ++i) {
files[i] = "http://localhost:8080/api/file/" + files[i];
}
res.send(files);
})
}
exports.downloadFile = (req, res) => {
let filename = req.params.filename;
res.download(uploadFolder + filename);
}
----------------------------------------------------------
10) ./server.js 파일을 생성한다. (main 파일임)
----------------------------------------------------------
var express = require('express');
var app = express();
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors')
const corsOptions = {
origin: 'http://localhost:4200',
optionsSuccessStatus: 200
}
app.use(cors(corsOptions));
global.__basedir = __dirname;
let router = require('./backend/routers/file.router.js');
// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'public')));
// API location
app.use('/api', router);
// Send all other requests to the Angular app
app.get('*', (req, res) => {
console.log("angular path");
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// Create a Server
let server = app.listen(8082, () => {
let host = server.address().address
let port = server.address().port
console.log("App listening at http://%s:%s", host, port);
})
------------------------------------------------------------
11) angular.json 파일의 outputPath 를 public 으로 바꾼다.
----------------------------------------------------------
"options": {
"outputPath": "public",
"index": "src/index.html",
----------------------------------------------------------
12) Angular 를 build 한다.
> ng build
13) Server 를 실행한다.
> node server.js
> curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
> sudo apt-get install nodejs
> sudo apt-get install npm
1) Node 를 최신버젼으로 업그레이드 한다.
> sudo npm install -g n
> sudo n stable
2) Angular CLI 를 설치한다.
> sudo npm install -g @angular/cli
3) 프로젝트 폴더 생성
> ng new U2ReportServer
4) 프로젝트 폴더로 진입
> cd U2ReportServer
5) express , multer , cors 모듈 추가
> npm install express multer cors chart.js --save
6) 생성된 package.json 파일을 확인한다.
----------------------------------------------------------
{
"name": "u2-report-server",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"chart.js": "^2.7.3",
"core-js": "^2.5.4",
"cors": "^2.8.4",
"express": "^4.16.4",
"multer": "^1.4.1",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.8.0",
"@angular/cli": "~6.2.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.3.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": "~2.9.2"
}
}
----------------------------------------------------------
7) ./backend/config/multer.config.js 파일을 생성한다.
----------------------------------------------------------
const multer = require('multer');
var storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, __basedir + '/uploads/')
},
filename: (req, file, cb) => {
cb(null, file.originalname)
}
});
var upload = multer({storage: storage});
module.exports = upload;
----------------------------------------------------------
8) ./backend/routers/file.router.js 파일을 생성한다.
----------------------------------------------------------
let express = require('express');
let router = express.Router();
let upload = require('../config/multer.config.js');
let fileWorker = require('../controllers/file.controller.js');
router.post('/api/file/upload', upload.single("file"), fileWorker.uploadFile);
router.get('/api/file/all', fileWorker.listUrlFiles);
router.get('/api/file/:filename', fileWorker.downloadFile);
module.exports = router;
----------------------------------------------------------
9) ./backend/controllers/file.controller.js 파일을 생성한다.
----------------------------------------------------------
const uploadFolder = __basedir + '/uploads/';
const fs = require('fs');
exports.uploadFile = (req, res) => {
res.send('File uploaded successfully! -> filename = ' + req.file.filename);
}
exports.listUrlFiles = (req, res) => {
fs.readdir(uploadFolder, (err, files) => {
for (let i = 0; i < files.length; ++i) {
files[i] = "http://localhost:8080/api/file/" + files[i];
}
res.send(files);
})
}
exports.downloadFile = (req, res) => {
let filename = req.params.filename;
res.download(uploadFolder + filename);
}
----------------------------------------------------------
10) ./server.js 파일을 생성한다. (main 파일임)
----------------------------------------------------------
var express = require('express');
var app = express();
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors')
const corsOptions = {
origin: 'http://localhost:4200',
optionsSuccessStatus: 200
}
app.use(cors(corsOptions));
global.__basedir = __dirname;
let router = require('./backend/routers/file.router.js');
// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'public')));
// API location
app.use('/api', router);
// Send all other requests to the Angular app
app.get('*', (req, res) => {
console.log("angular path");
res.sendFile(path.join(__dirname, 'public/index.html'));
});
// Create a Server
let server = app.listen(8082, () => {
let host = server.address().address
let port = server.address().port
console.log("App listening at http://%s:%s", host, port);
})
------------------------------------------------------------
11) angular.json 파일의 outputPath 를 public 으로 바꾼다.
----------------------------------------------------------
"options": {
"outputPath": "public",
"index": "src/index.html",
----------------------------------------------------------
12) Angular 를 build 한다.
> ng build
13) Server 를 실행한다.
> node server.js
