Tech Stock logo Tech Stock

먼저 NODE를 다운 받는다

(Gitbash가 깔려있다는 전제하에서 Gitbash로 진행)

링크 : node 공식 홈피

node공식홈피

설치가 완료 되면 gitbash에서 확인을 해본다.

node설치 확인

node --version
v12.18.2

npm설치 확인

npm --version
6.14.5

npm을 통해서 앵귤러를 설치하자

npm install -g @angular/cli

설치가 완료되면 angular를 통해서 새로운 프로젝트를 만들어 보자.
(Angular 디렉토리로 이동해서 Helloworld라는 프로젝트를 만든다)

cd /Angular
ng new Helloworld

이렇게 하면 Angular라는 디렉토리 밑에 Helloworld라는 프로젝트 디렉토리가 자동생성되며 프로젝트가 만들어진다.

자 이제 Helloworld디렉토리로 이동해서 빌드후에 로컬에서 디플로이 해보자

cd /Angular/Helloworld
ng serve -o

그럼 이런식으로 빌드과정이 끝나고 브라우저에서 4200포트로 오픈 되었다는 메세지가 나온다

Compiling @angular/router : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 57.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.41 MB [initial] [rendered]
Date: 2020-07-18T15:52:03.068Z - Hash: 98b402c3c1193f78cef6 - Time: 4783ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

그후 자동적으로 브라우저가 열리면서 이렇게 로컬서버에 접속이 된다.
Angular

-o 는 브라우저에서 바로 오픈하게하는 옵션이다 –open이라고 쳐도 된다.
Angular는 기본포트를 4200번을 사용한다.
종료 할 때에는 Ctrl + c를 눌러주자.


잠깐만…

빌드된 파일이 어떻게 구성되어 있는지 구경좀 해보자

일단. 빌드만 한번 해보자

아까 만들었언 Helloworld프로젝트 디렉토리로 이동 후 다음과 같이 쳐보자

ng build

그럼 요런식으로 나오면서 빌드가 완료 된다.

chunk {main} main.js, main.js.map (main) 56.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.07 MB [initial] [rendered]
Date: 2020-07-18T16:04:03.028Z - Hash: 41acbaba188a70091d63 - Time: 4370ms

빌드된 결과물은 dist라는 자동생성된 디렉토리에 저장된다.
dist라는 디렉토리에 가보면 Helloworld라는 디렉토리가 하부에 생성되어있고, 그곳에 저장되어있다.


빌드할때 특정 디렉토리에 저장해보자

ng build --output-path ./public

이렇게 하면 public이라는 디렉토리를 자동생성 하면서 그곳에 빌드된 결과물이 저장된다.


개발 환경용 빌드와 프로덕션용 빌드를 따로따로 해보자.

# 따로 옵션 지정을 해주지 않으면 개발용 빌드이다
ng build
# 이렇게 옵션을 지정해 주면 프로덕션용 빌드가 된다.
ng build -prod 

개발용과 프로덕션용의 환경설정은 프로젝트 디렉토리 밑에 /src/environments 를 살펴보면 따로따로 존재한다.
프로덕션용 환경설정 파일 environment.prod.ts 개발용 환경설정 파일 environment.ts