ServBay

한국어

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย

한국어

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย

Appearance

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(미리 컴파일), 트리 셰이킹, 코드 압축 등 최신 최적화 기술을 지원합니다.

ServBay가 제공하는 안정적인 환경과 Angular를 조합하면 개발자는 비즈니스 로직에 더욱 집중할 수 있습니다.

사전 준비사항 ​

시작 전 아래의 준비가 완료되었는지 확인하세요:

  1. ServBay 설치: macOS에 ServBay가 정상적으로 설치되어 실행 중이어야 합니다.
  2. Node.js 패키지 활성화: ServBay 제어판에서 원하는 Node.js 버전을 설치하고 활성화하세요. ServBay는 여러 Node.js 버전 설치 및 전환을 지원합니다.

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

ServBay의 Node.js 환경을 활용해 Angular 프로젝트를 만들고 실행합니다. 개발 모드에서는 ServBay 사이트 기능을 활용해 Angular 개발 서버로 역방향 프록시를 설정하고, 프로덕션 모드에선 빌드된 정적 파일을 ServBay로 서비스합니다.

1. Angular 프로젝트 생성 ​

먼저 Angular CLI를 사용해 새 프로젝트를 생성해야 합니다.

  1. Angular CLI 설치: 터미널을 열고 ServBay가 제공하는 Node.js 환경에서 Angular CLI를 전역 설치합니다. ServBay의 Node.js 환경이 자동으로 PATH에 설정되어 있지 않다면, 해당 환경으로 먼저 전환해야 할 수 있습니다. 보통 ServBay가 자동 처리합니다.

    bash
    npm install -g @angular/cli

    위 명령으로 ng 명령어가 전역 설치되어 언제든 Angular CLI를 사용할 수 있습니다.

  2. 새 Angular 프로젝트 생성: ServBay 사이트 루트 디렉토리 /Applications/ServBay/www로 이동해 ng new 명령어로 프로젝트를 만듭니다. 예를 들어 ServBay 브랜딩으로 servbay-angular-app과 같이 이름을 정할 수 있습니다.

    bash
    cd /Applications/ServBay/www
ng new servbay-angular-app

    CLI가 프로젝트 설정 관련 몇 가지를 묻습니다. 안내에 따라 답변하거나 원하는 옵션을 선택하세요.

    ? Would you like to add Angular routing? Yes  # 라우팅 기능 추가 권장(Yes)
? Which stylesheet format would you like to use? CSS # 스타일시트 포맷 선택(CSS 등)

    명령 실행이 완료되면 /Applications/ServBay/www에 프로젝트 폴더(servbay-angular-app)가 생성되고, 기본 구조 및 파일이 포함됩니다.

  3. 프로젝트 의존성 설치: 새로 만든 프로젝트 폴더로 이동한 후 의존 패키지를 설치합니다.

    bash
    cd servbay-angular-app
npm install

    npm install은 package.json에 정의된 의존 모듈을 node_modules에 설치합니다.

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

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

  1. src/app/app.component.html 파일 수정: 선호하는 코드 에디터로 servbay-angular-app/src/app/app.component.html을 열고, 기존 코드를 삭제하거나 아래처럼 간단한 제목으로 수정하세요.

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>This is your Angular app running via ServBay!</p>
</div>

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

개발 중에는 Angular CLI의 개발 서버(ng serve)를 주로 사용합니다. 이 서버는 핫 리로드 등 다양한 기능을 제공하며, ServBay의 리버스 프록시 기능과 연동해 로컬 도메인으로 접근할 수 있습니다.

  1. Angular 개발 서버 실행: 프로젝트 루트 디렉토리(/Applications/ServBay/www/servbay-angular-app)에서 아래 명령어로 개발 서버를 실행하세요. 충돌을 피하기 위해 8585와 같이 ServBay 기본 웹서버와 겹치지 않는 포트를 사용합니다.

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585

    이 명령은 Angular 프로젝트를 컴파일하고 로컬 서버(http://localhost:8585/)를 시작합니다. 터미널 창을 닫으면 서버가 종료되니 계속 열어두세요.

  2. ServBay 사이트(역방향 프록시) 설정: ServBay 제어판의 '사이트' 메뉴로 가서 새 사이트를 추가하고, 리버스 프록시로 Angular 개발 서버에 연결합니다.

    • 이름(Name): 예시 – My Angular Dev Site (ServBay 내에서만 표시됨)
    • 도메인(Domain): 예시 – servbay-angular-dev.servbay.demo(ServBay는 .servbay.demo 도메인을 자동으로 127.0.0.1에 매핑)
    • 웹사이트 유형: 역방향 프록시(Reverse Proxy) 선택
    • 프록시 주소: 127.0.0.1 입력
    • 프록시 포트: 위에서 지정한 포트(예: 8585) 입력

    설정 후 저장 및 적용하세요.

  3. 개발 모드 사이트 접속: 브라우저에서 설정한 로컬 도메인(https://servbay-angular-dev.servbay.demo)에 접속합니다.

    ServBay로 접속하면, 기본적으로 로컬 사이트에 SSL 인증서가 자동 발급 및 적용되므로(ServBay User CA 또는 ServBay Public CA 활용), 개발 단계에서도 HTTPS로 안전하게 접속할 수 있습니다. 이는 실제 배포 환경의 HTTPS와 똑같이 동작해 미리 문제를 찾는 데 도움이 됩니다.

4. 프로덕션(배포) 버전 빌드 및 서비스 ​

Angular 프로젝트 개발을 완료하고 배포 준비가 되면, 최적화된 프로덕션 빌드를 생성해야 합니다. 이 빌드 결과(정적 파일 세트)는 어떤 정적 웹 서버에서도 서비스할 수 있으며, ServBay의 정적 웹사이트 기능으로 쉽게 배포할 수 있습니다.

  1. 프로덕션 버전 빌드: 프로젝트 루트(/Applications/ServBay/www/servbay-angular-app)에서 아래 명령어로 빌드합니다.

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# 또는 최신 Angular CLI에서는:
# ng build

    --prod 플래그는 최신 CLI에서 기본값으로 제공되며, 코드 압축, AOT, 트리 셰이킹 등 배포 최적화를 활성화합니다. 빌드가 완료되면 결과물은 dist/servbay-angular-app 폴더(프로젝트 구성에 따라 다름)에 생성됩니다.

  2. ServBay 사이트(정적 파일 서비스) 설정: ServBay 제어판에서 새 사이트를 추가하고, 빌드 결과 정적 파일 디렉터리로 도메인을 연결하세요.

    • 이름(Name): 예시 – My Angular Production Site
    • 도메인(Domain): 예시 – servbay-angular-prod.servbay.demo
    • 웹사이트 유형: 정적(Static) 선택
    • 웹사이트 루트 디렉토리: 프로젝트 빌드 결과(예시: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app)를 지정합니다. 반드시 index.html이 포함된 최종 폴더를 선택하세요.

    설정 후 저장 및 적용하세요.

  3. 프로덕션 사이트 접속: 브라우저에서 도메인(https://servbay-angular-prod.servbay.demo)에 접속하면,

    빌드된 Angular 프로젝트가 ServBay의 고성능 웹 서버(Caddy 또는 Nginx 등, 설정에 따라 다름)로 정적 파일 형태로 서비스됩니다. 이때도 ServBay가 SSL 인증서를 자동 적용해 안전한 접속이 가능합니다.

Angular 개발에 있어 ServBay의 강점 ​

  • 통합 환경: 다양한 Node.js 버전을 설치/관리할 수 있으므로 환경 변수나 시스템 설정이 번거롭지 않습니다.
  • 유연한 사이트 운영: 리버스 프록시와 정적 파일 서비스를 직관적으로 설정할 수 있어, 개발/배포 환경 전환이 쉽습니다.
  • 내장 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 등 주요 DB의 root 암호 초기화 기능도 내장되어 있어, 자주 겪는 개발자 어려움을 간단히 해결할 수 있습니다.

자주 묻는 질문 (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가 실행 중이며, 지정 포트와 프록시 포트가 일치하는지 점검
    • 프로덕션 모드는 사이트 설정의 ‘웹사이트 루트 디렉토리’가 빌드 결과물(dist/your-project-name의 index.html 포함 폴더)로 맞게 지정됐는지 확인
    • ServBay 로그에서 구체적 오류 메시지 확인
    • 접속하는 도메인이 사이트 설정과 정확히 일치하는지 점검
  • Q: ServBay에서 Caddy/Nginx/Apache 등 다양한 웹 서버로 Angular 프로덕션 버전을 서비스할 수 있나요? A: 네, ServBay는 Caddy, Nginx, Apache 중 활성화된 어떤 웹 서버든 정적 파일 서비스에 활용됩니다. 환경에 맞게 자동 세팅되므로 걱정 없이 사용할 수 있습니다.

요약 ​

이 안내서를 따라 ServBay 환경에서 Angular 프로젝트를 성공적으로 생성하고 실행할 수 있습니다. 개발 단계에서는 ServBay의 리버스 프록시 기능과 로컬 도메인으로 ng serve를 이용한 개발 서버에 접속하는 방법, 프로덕션 단계에서는 정적 파일 빌드와 ServBay 정적 파일 서비스로 배포하는 방법을 익혔습니다. ServBay의 Node.js 환경 지원, 편리한 사이트 관리, 내장된 SSL 등 다양한 기능은 Angular 프로젝트의 로컬 개발 효율과 경험을 크게 높여줍니다. 또한, ServBay는 폭넓은 기술 스택 지원을 통해 여러분의 풀스택 개발 기반을 탄탄하게 만들어 줄 것입니다.