ServBay에서 Angular 프로젝트 생성 및 실행하기

개요

이 문서는 ServBay 로컬 웹 개발 환경에서 Angular 프로젝트를 생성, 설정 및 실행하는 방법을 안내합니다. ServBay의 강력한 Node.js 환경과 유연한 사이트(구 '호스트') 관리 기능을 활용하여 개발 및 프로덕션 환경을 쉽게 구축하고, 사용자 지정 도메인과 SSL 인증서를 통해 안전하게 접근할 수 있도록 합니다. ServBay는 Node.js, PHP, Python, Go, Java, 데이터베이스 등 다양한 개발에 필요한 소프트웨어 패키지(구 '서비스')를 통합 제공하여 풀스택 로컬 개발에 최적의 환경을 제공합니다.

Angular란 무엇인가요?

Angular는 Google이 유지 관리하는 오픈소스 프론트엔드 프레임워크로, 고성능의 동적 싱글 페이지 애플리케이션(SPA)을 구축하는 데 사용됩니다. TypeScript 기반으로, 포괄적인 도구와 구조화된 개발 방식을 제공하며, 대규모 복잡한 엔터프라이즈급 애플리케이션에 적합합니다.

Angular의 핵심 특징 및 강점

컴포넌트 기반 아키텍처: 재사용 가능한 컴포넌트로 UI를 구축하여 코드 유지보수성과 확장성을 높입니다.
TypeScript 지원: 정적 타입 검사와 강력한 객체지향 기능으로 코드 품질과 개발 생산성을 향상시킵니다.
의존성 주입: 컴포넌트의 테스트 및 의존성 관리가 용이합니다.
강력한 CLI(명령줄 인터페이스): 프로젝트 생성, 컴포넌트/서비스/모듈 생성, 빌드, 테스트 등 개발 활동을 간소화합니다.
내장 솔루션: 라우팅, 폼 처리, HTTP 클라이언트 등 필수 기능을 제공하는 내장 모듈을 갖추고 있습니다.
성능 최적화: AOT(사전 컴파일), 트리 셰이킹 등 기술을 지원해 애플리케이션 성능을 극대화합니다.

Angular와 ServBay의 안정적인 환경을 함께 활용하면 개발자는 비즈니스 로직 구현에 더욱 집중할 수 있습니다.

사전 준비 사항

시작하기 전 아래 준비 사항을 완료하세요.

ServBay 설치: ServBay(맥OS/윈도우 지원)를 성공적으로 설치하고 실행합니다.
Node.js 패키지 활성화: ServBay 제어판(컨트롤 패널)에서 필요한 Node.js 버전 패키지를 설치 및 활성화해야 합니다. ServBay는 여러 Node.js 버전 설치와 쉽게 전환이 가능합니다.

ServBay에서 Angular 프로젝트 설정 및 실행

ServBay에서 제공된 Node.js 환경을 사용해 Angular 프로젝트를 생성 및 실행합니다. 개발 모드에서는 ServBay의 사이트 기능을 이용해 리버스 프록시를 통해 Angular 개발 서버에 연결하고, 프로덕션 모드에서는 정적 파일 서비스로 프로젝트를 제공하게 됩니다.

1. Angular 프로젝트 생성

우선 Angular CLI를 사용해 새 프로젝트를 생성합니다.

Angular CLI 설치: 터미널(Terminal)을 열고 ServBay의 Node.js 환경을 활용해 Angular CLI를 글로벌로 설치합니다. ServBay Node.js 환경이 자동으로 시스템 PATH에 추가되지 않은 경우 먼저 ServBay Node.js 환경으로 전환해야 할 수도 있습니다. 보통 ServBay가 자동으로 PATH를 처리합니다.
bash
```
npm install -g @angular/cli
```
1
이 명령어로 시스템에 ng 커맨드가 설치되어 Angular CLI를 전역에서 사용할 수 있습니다.
새 Angular 프로젝트 생성: ServBay 추천 사이트 루트 디렉터리로 이동한 후, ng new 명령으로 새 Angular 프로젝트를 만듭니다. 예시로 ServBay 브랜딩이 들어간 프로젝트명 servbay-angular-app을 권장합니다.
macOS:
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Windows:
bash
```
cd C:\ServBay\www
ng new servbay-angular-app
```
1
2
Angular CLI가 몇 가지 프로젝트 설정을 질문합니다. 아래와 같이 입력하거나 원하는 옵션을 선택하세요.
```
? Would you like to add Angular routing? Yes  # 라우터 기능 추가 여부, Yes 권장
? Which stylesheet format would you like to use? CSS # 스타일시트 형식 선택. 예: CSS
```
1
2
명령이 완료되면 Angular CLI가 사이트 루트에 servbay-angular-app 폴더와 기본 구조 및 파일을 생성합니다:
- macOS: /Applications/ServBay/www/servbay-angular-app
- Windows: C:\ServBay\www\servbay-angular-app
프로젝트 의존성 설치: 새로 생성한 프로젝트 폴더로 들어가 로컬 의존성 패키지를 설치합니다.
bash
```
cd servbay-angular-app
npm install
```
1
2
npm install은 프로젝트의 package.json에 명시된 의존성 패키지를 node_modules 폴더에 설치합니다.

2. Angular 프로젝트 출력 내용 수정(선택 사항)

프로젝트가 정상적으로 실행되는지 확인하려면, 메인 페이지의 내용을 간단히 수정해볼 수 있습니다.

src/app/app.component.html 파일 수정: 좋아하는 코드 에디터로 servbay-angular-app/src/app/app.component.html을 열어 기존 내용을 삭제하거나 아래처럼 간단한 타이틀만 보이도록 변경합니다.
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>이것은 ServBay를 통해 실행되는 Angular 앱입니다!</p>
</div>
```
1
2
3
4

3. 개발 모드에서 프로젝트 실행

개발 단계에서는 Angular CLI의 개발 서버(ng serve)를 활용합니다. 핫 리로드 등 개발에 유용한 기능이 제공되며, ServBay 리버스 프록시 기능을 통해 로컬 도메인으로 접근할 수 있습니다.

Angular 개발 서버 실행: 프로젝트 루트에서 아래 명령으로 개발 서버를 시작합니다. ServBay 기본 웹서버 포트와 겹치지 않도록 8585 같은 포트번호를 지정합니다.
macOS:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585
```
1
2
Windows:
bash
```
cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585
```
1
2
이 명령어로 Angular 프로젝트가 컴파일되고 http://localhost:8585/에서 웹서버가 구동됩니다. 터미널 창을 닫지 않고 유지해야 서버가 계속 작동합니다.
ServBay 사이트 설정(리버스 프록시): ServBay 제어판에서 '사이트'(구 '호스트') 설정 화면으로 이동합니다. 새 사이트를 추가해 리버스 프록시 방식으로 로컬 도메인을 Angular 개발 서버에 연결합니다.
- 이름(Name): 예시로 My Angular Dev Site(ServBay 내부 표시용)
- 도메인(Domain): ServBay 브랜딩 도메인 예시: servbay-angular-dev.servbay.demo. ServBay는 .servbay.demo 도메인을 127.0.0.1에 자동 매핑합니다.
- 사이트 유형(Website Type): 리버스 프록시(Reverse Proxy) 선택
- 프록시 주소(Proxy Address): 127.0.0.1 입력
- 프록시 포트(Proxy Port): ng serve에서 지정한 포트(예: 8585) 입력
설정 완료 후 변경사항을 저장하고 적용합니다.
개발 모드 사이트 접근: 브라우저에서 설정한 도메인 https://servbay-angular-dev.servbay.demo로 접속하세요.
ServBay를 통해 접속하면, ServBay가 기본적으로 로컬 사이트에 대한 SSL 인증서를(ServBay User CA 또는 ServBay Public CA) 자동 생성·설정하므로 HTTPS로 안전하게 개발사이트를 접근할 수 있습니다. 프로덕션 환경의 HTTPS와 동일하게 사전 테스트가 가능합니다.

4. 프로덕션 버전 빌드 및 서비스

Angular 프로젝트 개발이 완료되어 배포 준비가 되면, 최적화된 정적 파일을 빌드합니다. 이 파일은 ServBay의 정적 사이트 서비스로 쉽게 제공할 수 있습니다.

프로덕션 버전 빌드: 프로젝트 루트에서 아래 명령어로 프로덕션 빌드 합니다:
macOS:
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# 혹은 최신 Angular CLI에서는:
# ng build
```
1
2
3
4
Windows:
bash
```
cd C:\ServBay\www\servbay-angular-app
ng build --prod
# 혹은 최신 Angular CLI에서는:
# ng build
```
1
2
3
4
--prod 옵션(신버전 CLI에선 기본 적용됨)은 AOT 컴파일, 코드 압축, 트리셰이킹 등 프로덕션 최적화를 활성화합니다. 빌드가 완료되면, 정적 파일이 dist/servbay-angular-app 폴더에 생성됩니다(프로젝트 설정에 따라 하위 폴더명 달라질 수 있음).
ServBay 사이트 설정(정적 파일 서비스): ServBay 제어판에서 '사이트' 설정으로 이동해 새 사이트를 추가합니다. 이번엔 정적 파일 서비스로 빌드된 폴더를 연결합니다.
- 이름(Name): 예시로 My Angular Production Site
- 도메인(Domain): 예시로 servbay-angular-prod.servbay.demo
- 사이트 유형(Website Type): 정적(Static) 선택
- 사이트 루트 디렉터리(Website Root Directory): 빌드 결과물이 있는 폴더로 지정합니다. 보통은:
  - macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
  - Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app
  index.html이 들어있는 마지막 폴더까지 지정해야 합니다.
설정 후 저장하고 적용합니다.
프로덕션 사이트 접근: 브라우저로 https://servbay-angular-prod.servbay.demo 도메인에 접속합니다.
이제 ServBay의 고성능 웹서버(Caddy, Nginx 등 ServBay 설정에 따라 변경됨)를 통해 Angular 앱의 프로덕션 버전을 정적 파일로 서비스합니다. ServBay가 자동으로 SSL 인증서를 설정하므로 안전하게 접근할 수 있습니다.

Angular 개발에서 ServBay의 강점

통합 환경: 복잡한 환경 변수 없이 간편하게 Node.js 버전을 설치·관리할 수 있습니다.
유연한 사이트 관리: 직관적인 UI로 리버스 프록시/정적 파일 서비스를 설정하고, 개발·프로덕션 접근 전환이 빠릅니다.
내장형 SSL 지원: 로컬 개발 환경에 무료, 자동 설정 SSL 인증서를 제공해 프로덕션 환경과 동일하게 HTTPS 테스트가 가능합니다.
멀티 기술 스택 지원: 백엔드 API(Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot 등)나 데이터베이스(MySQL, PostgreSQL, MongoDB, Redis 등)를 사용하는 프로젝트도 ServBay에서 손쉽게 연동할 수 있습니다. 최신 기능 포함 모든 패키지의 지원과 업데이트가 계속 이뤄지고 있습니다.
데이터 백업 및 복원: 사이트, 데이터베이스, SSL 인증서까지 간편하게 백업/복원 기능을 제공해 로컬 개발 데이터를 보호합니다.
DB 비밀번호 초기화: MySQL, MariaDB, PostgreSQL 루트 비밀번호 초기화 기능 내장으로 개발자들의 고질적 불편을 해결합니다.

자주 묻는 질문(FAQ)

Q: ng new나 ng serve 명령실행 시 command not found: ng 에러가 납니다. A: Angular CLI가 제대로 설치되지 않았거나 시스템 PATH에 없을 때 발생합니다. @angular/cli를 글로벌로 설치(npm install -g @angular/cli)하고, ServBay Node.js 환경이 올바로 PATH에 등록됐는지 확인하세요. 터미널이나 ServBay를 재시작하면 해결될 수 있습니다.
Q: ng serve가 포트 사용중 에러로 실행되지 않습니다. A: 사용하려는 포트(예: 8585)가 이미 다른 프로그램에서 쓰이고 있습니다. ng serve --port 파라미터로 다른, 사용되지 않은 포트(예: 8586)를 지정하고, ServBay 리버스 프록시 포트 설정도 동일하게 변경하세요.
Q: ServBay 사이트를 설정했는데 도메인 접속이 되지 않습니다. A: 아래 항목을 확인하세요:
- ServBay가 실행 중인지 확인
- 개발 모드에서는 ng serve가 실행 중이며, 프록시 포트가 ServBay 설정과 동일한지 확인
- 프로덕션 모드에서는 '사이트 루트 디렉터리'가 빌드 결과물(index.html이 들어있는 dist/프로젝트명 폴더)로 정확히 지정됐는지 확인
- ServBay 로그에서 상세 에러 정보 확인
- 접근하려는 도메인이 ServBay 설정과 완전히 일치하는지 확인
Q: ServBay의 다양한 웹서버(Caddy/Nginx/Apache)로 Angular 프로덕션을 서비스할 수 있나요? A: 네, ServBay는 Caddy, Nginx(그리고 Apache) 모두 정적 파일 서버로 사용할 수 있습니다. 정적 사이트 설정 시 사용중인 웹서버로 자동 서비스되며, 모두 고효율 정적 파일 서비스를 지원합니다.

요약

본 가이드를 통해 ServBay 환경에서 Angular 프로젝트를 성공적으로 생성 및 실행할 수 있습니다. 개발 단계에는 ServBay 리버스 프록시로 로컬 도메인을 통해 ng serve 개발 서버에 접근하고, 프로덕션 단계에서는 빌드/정적 서비스 기능으로 배포까지 가능합니다. ServBay의 Node.js 환경, 쉽고 강력한 사이트 관리, 내장 SSL의 지원으로 로컬 Angular 개발 효율성과 경험을 대폭 향상시킬 수 있습니다. 또한 ServBay는 다양한 기술 스택을 지원하여 풀스택 개발에도 확실한 기반을 제공합니다.

ServBay에서 Angular 프로젝트 생성 및 실행하기 ​

개요 ​

Angular란 무엇인가요? ​

Angular의 핵심 특징 및 강점 ​

사전 준비 사항 ​

ServBay에서 Angular 프로젝트 설정 및 실행 ​

1. Angular 프로젝트 생성 ​

2. Angular 프로젝트 출력 내용 수정(선택 사항) ​

3. 개발 모드에서 프로젝트 실행 ​

4. 프로덕션 버전 빌드 및 서비스 ​

Angular 개발에서 ServBay의 강점 ​

자주 묻는 질문(FAQ) ​

요약 ​