NodeJS+FileServer+Angular+ChartJS 로 개발하기

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

Read More

Angular 로 개발하기

1) Angular CLI 를 설치한다.
  > npm install -g @angular/cli

2) Angular 프로젝트 생성
  > ng new my-test-app

3) my-test-app 실행해보기
  > cd my-test-app
  > ng serve

4) 폴더구조 확인

5) 새로운 component 추가
  > ng g c about

Read More

TypeScript 로 개발하기

1) TypeScript 설치
  > npm install -g typescript

  -g 옵션을 주면 global 어디서나 TypeScript 를 사용할 수 있다.
  -g 옵션을 주지 않으면 실행한 folder 에서만 TypeScript 를 사용한다.


2) 테스트용 파일 생성
   index.html
     <html>
       <head lang="ko">
         <title>
            type script test
         </title>
         <meta charset="utf-8" />
         <script src="index.js"></script>
      </head>
      <body>
        <p>type script test on browser environments</p>
      </body>
    </html>

   index.ts
    console.log("type script test on console environments");

3) TypeScript 를 compile
  > tsc index.ts

  TypeScrpt 파일을 compile 하면 js 파일이 생성된다.
  위의 경우 index.js 파일이 생성된다.

4) 생성된 index.js 를 실행해 본다.
  > node index.js
 
5) npm 환경 구성
  > npm init

6) test 를 위한 lite-server 설치
  > npm install lite-server --save-dev

7) lite-server 실행 스크립트 추가
  package.json 에 "start" 라는 명령어를 추가한다.

    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "lite-server"
    },

8) lite-server 를 실행한다.
  > npm start

9) TypeScript 컴파일 환경을 설정한다.
  > tsc --init

10) TypeScript 파일 모두 compile 하기
  > tsc

  tsc --init 를 실행하고 나면 tsc 명령으로 모든 ts 파일을 compile 하여 js 파일을 만든다.

Read More