본문 바로가기

Language/Angular

우분투 16.04 Mysql, Express, Angular& node js를 npm페키지로 초간단 간단셋팅

 

 

#ANGULAR CLI 설치

npm install -g @angular/cli

 

# NG 명령어로 앵귤러 프로젝트 폴더생성

ng new ngApp --routing

 

# 프로젝트 폴더로 가서 NG SERVER 명령어로 서버가동

cd ngApp

 

ng serve

 

# EXPRESS와 연동해주기 위해서 NG BUILD 명령어로 배포 준비

ng build  (dist 폴더와 build된 파일들이 생성됨)

 

# Express 패키지와 미들웨어인 body-parser , db페키지를  다운로드 한다

npm install --save express body-parser mysql

 

 

#ngApp 폴더 안에 server.js 파일을 만들고 express 서버 소스 작성 

server.js

var express = require('express');

var bodyParser = require('body-parser');

var path = require('path');




//routes

var api = require('./server/routes/api');

 

 

var port = 3000;

 

var app = express();





//set static folder

app.use(express.static(path.join(__dirname,'dist')));

 

//view Engin

//app.set('view engine', 'ejs');

 

//app.engine('html',require('ejs').renderFile);



//body parser mw

app.use(bodyParser.urlencoded({extended:false}));

 

app.use(bodyParser.json());





app.use('/api',api);

 

 

app.get('*',function(req,res){

 

res.sendFile(path.join(__dirname,'dist/index.html'));

 

});

 

//run server

app.listen(port, function(){

 

console.log("master kang!, server runing on location" + port);

 

});

 

 

#ngApp 폴더 안에  routes 폴더를 만들고 api.js 파일(라우터) 작성

api.js

var express = require('express');

var router = express.Router();

 

router.get('/', function(req,res){

 

res.send('api works')

 

});

 

module.exports = router;

 

#파일 경로

 

 

#ng build 로 dist 폴더를 만든후 node server.js 로 node 서버 가동

 

ng build 

node server.js

 

#localhost:3000 으로 접속해서 확인

 

 

#참고 사이트

https://angular.io/guide/quickstart



출처: https://abc1211.tistory.com/296 [길위의 개발자][출처] abc1211.tistory.com/296

 

 

 

우분투 16.04 Mysql, Express, Angular& node js를 npm페키지로 초간단 간단셋팅

우분투 16.04 Mysql, Express, Angular& node js npm페키지로 초간단 셋팅 #ANGULAR CLI 설치 npm install -g @angular/cli # NG 명령어로 앵귤러 프로젝트 폴더생성 ng new ngApp --routing # 프로젝트 폴더로..

abc1211.tistory.com