[Tip] Angular build 후, local에서 간단하게 웹서버 실행하는 방법

# 개요

angular application을 간단하게, 노트북 상에서 배포하기 위해, angular 배포에 대해 학습하던 중, 제일 간단해 보이는 방법이 있어 정리한다.

회사 pc 상에서는 동일한망 안에서는 ip가 고유할 것이므로, 동일망을 사용하고 있다면 PC와 PC간에 ip주소로 접근이 가능할 것이다.

그러나 개인 pc에서 해당 방법을 사용할 경우, 공유기 ip만 외부로 공개되기 때문에, 공유기 설정 중에 Ip고정, 포트 포워딩을 통해 공유기 주소의 특정 포트로 요청이 들어왔을 경우, 공유기내 특정 ip의 특정 포트의 요청으로 바꾸어주는 작업이 필요하다.

 

# Angular Project Build 하기

— Create Production Build (run below command for creating build)

— Node

ng build --prod --aot --base-href /

// 경우에 따라 --base-href 경로를 수정해야할 수도 있음

// base-href : Base url for the application being built.(앱이 사용할 root url로써, 보통 '--base-href /' 로사용된다.

// aot : Build using Ahead of Time compilation.

// prod : "--configuration=production".

    When true, sets the build configuration to the production target.

    By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.(대략 불필요한 삭제 줄이고, 번들링 크기 고려해서 빌드됨)

 

# 방법 1(http-server 패키지 사용)

-- Install http-server globally

npm install http-server -g

-- Then inside the project directory (in the terminal), I run

http-server dist/[your-project-name] 

// [your-project-name] == app?

// 내부적으로 node.js가 apache처럼 웹서버 역할을 하는 듯?

 

Then inside your project directory(in the terminal) just run

http-server dist/   --> dist 폴더 내에 index.js가 생성되었을 경우

And if you are using Angular 6+ or above (Working with Angular 10), You have to run

http-server dist/your-project-name --> dist 폴더 내 프로젝트명 폴더내 index.js가 생성되었을 경우

Now you can visit http://localhost:8080 to view your application

 

# 방법 2 (Download Link at the End)

-- Create a Directory test

-- Put the Following file in /test/(package.json ,package-lock.json, server.js,)

By Setting test test as current Directory run npm install`

Image for post

npm install in test dir

-- copy dist folder from project to /test/

-- Now test Folder should Look Like

node start?

 

# 출처

https://medium.com/@akashkumarsingh_16213/how-to-run-angular-build-locally-60108b1196bb 

https://secjong.tistory.com/3 -> base-href와 deploy-url에 대해 더 알고 싶은 경우