웹사이트 검색

Ubuntu 20.04 LTS에 Angular를 설치하는 방법


이 페이지에서

  1. 전제 조건
  2. Node.js 설치
  3. Angular 설치
  4. Angular 프로젝트 만들기\n
  5. Angular 웹 인터페이스에 액세스
  6. 결론

Angular는 모바일 및 데스크톱 웹 애플리케이션을 구축하기 위한 오픈 소스 웹 애플리케이션 프레임워크입니다. TypeScript/JavaScript로 작성되었으며 2009년 Google에서 만들었습니다. 소규모에서 대규모 애플리케이션을 처음부터 구축하도록 특별히 설계되었습니다. Angular 애플리케이션을 생성, 관리, 빌드 및 테스트하는 데 도움이 되는 Angular CLI 유틸리티와 함께 제공됩니다.

이 튜토리얼에서는 Ubuntu 20.04에 Angular를 설치하는 방법을 보여줍니다.

전제 조건

  • Ubuntu 20.04를 실행하는 서버.\n
  • 루트 암호는 서버에서 구성됩니다.\n

Node.js 설치

시작하기 전에 시스템에 Node.js와 npm을 설치해야 합니다. 기본적으로 Node.js의 최신 버전은 Ubuntu 20.04 기본 리포지토리에서 사용할 수 없습니다. 따라서 시스템에 Node.js 저장소를 추가해야 합니다.

먼저 다음 명령을 사용하여 Node.js 리포지토리를 추가합니다.

curl -sL https://deb.nodesource.com/setup_14.x | bash -

추가되면 다음 명령을 사용하여 Node.js를 설치합니다.

apt-get install nodejs -y

설치가 완료되면 다음 명령을 사용하여 설치된 Node.js 버전을 확인합니다.

node --version

다음 출력이 표시되어야 합니다.

v14.7.0

다음으로 다음 명령을 실행하여 npm 버전을 최신 버전으로 업데이트합니다.

npm install  -g

다음으로 다음 명령을 사용하여 npm 버전을 확인합니다.

npm --version

다음 출력이 표시되어야 합니다.

6.14.7

각도 설치

아래와 같이 npm을 사용하여 Angular를 설치할 수 있습니다.

npm install -g @angular/cli

설치가 완료되면 다음 명령을 사용하여 설치된 Angular 버전을 확인합니다.

ng version

다음 출력이 표시되어야 합니다.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

각도 프로젝트 만들기

이 시점에서 Angular가 시스템에 설치됩니다. Angular로 새 프로젝트를 만들 차례입니다.

먼저 디렉터리를 /opt로 변경하고 다음 명령을 사용하여 myproject라는 새 프로젝트를 만듭니다.

cd /opt
ng new myproject

다음으로 디렉터리를 myproject로 변경하고 다음 명령을 사용하여 프로젝트를 제공합니다.

cd myproject
ng serve --host your-server-ip --port 8088

다음 출력이 표시되어야 합니다.

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 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.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Angular 웹 인터페이스에 액세스

이 시점에서 Angular 프로젝트가 배포되고 포트 8088에서 수신 대기합니다. URL http://your-server-ip:8088을 사용하여 액세스할 수 있습니다. 다음 화면이 표시됩니다.

결론

축하합니다! Ubuntu 20.04에 Angular를 성공적으로 설치했습니다. 이제 Angular로 첫 번째 프로젝트 배포를 시작할 수 있습니다. Angular의 뛰어난 기능 중 하나는 실시간으로 변경 사항을 배포하고 많은 시간을 절약하는 웹팩 핫 리로딩입니다.