정적 파일 웹사이트 추가하기

ServBay는 다양한 언어와 데이터베이스를 지원하는 강력한 로컬 웹 개발 환경 툴입니다. 동적 웹사이트뿐 아니라 HTML, CSS, JavaScript로 제작한 간단한 페이지나 프론트엔드 앱 등 정적 파일 웹사이트의 호스팅과 테스트에도 매우 적합합니다.

이 문서에서는 ServBay에서 정적 파일 웹사이트를 추가하고 설정하는 방법을 단계별로 안내합니다.

개요

정적 파일 웹사이트란, 서버 측 스크립트(PHP, Node.js, Python 등) 실행 없이 웹 서버가 직접 파일을 제공하는 사이트를 의미합니다. 이러한 사이트는 보통 HTML 페이지, CSS 스타일시트, JavaScript 파일, 이미지, 폰트 등으로 구성됩니다.

ServBay를 이용하면 로컬 정적 웹사이트를 쉽고 빠르게 개발, 디버깅, 테스트할 수 있습니다. 특히 실제 배포 환경의 도메인 접속 시뮬레이션, HTTPS 연결, 또는 크로스 오리진 리소스 공유(CORS) 테스트가 필요한 상황에 유리합니다.

활용 사례

순수 프론트엔드 프로젝트(HTML/CSS/JS) 개발 및 테스트
정적 문서나 블로그 웹사이트 호스팅
Caddy/Nginx 등 웹 서버별 정적 자원 응답 특성 테스트
로컬에서 실서비스 도메인, HTTPS 환경 시뮬레이션
React, Vue, Angular 등 프론트엔드 프레임워크의 빌드 결과물 테스트

사전 준비

macOS에서 ServBay를 정상 설치 및 실행한 상태여야 합니다.
배포할 정적 웹사이트 파일을 보유하고 있어야 합니다.

단계별 절차

아래 단계를 따라 ServBay에 정적 파일 웹사이트를 추가하세요.

1단계: 웹사이트 파일 준비

우선, 정적 웹사이트의 모든 파일(예: index.html, style.css, script.js 등)이 개별 폴더에 정리되어 있는지 확인하세요.

권장하는 폴더 위치는 ServBay의 기본 웹사이트 루트 디렉터리 /Applications/ServBay/www 아래입니다. 이렇게 하면 파일 관리를 체계적으로 할 수 있습니다. 예를 들어, my-static-site라는 사이트를 만들고 싶다면 /Applications/ServBay/www/ 아래 my-static-site 폴더를 생성해 그 안에 모든 웹사이트 파일을 넣으세요.

bash

# 터미널에서 예시 디렉터리 생성
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# 간단한 index.html 파일 생성
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 정적 웹사이트 예제</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>축하합니다! ServBay 정적 웹사이트가 성공적으로 설정되었습니다!</h1>
    <p>이 로컬 정적 페이지를 ServBay를 통해 접근하고 있습니다.</p>
</body>
</html>' > index.html

# 현재 파일 구조 예시:
# /Applications/ServBay/www/servbay-static-demo/index.html

2단계: ServBay에서 웹사이트 추가

ServBay 앱을 실행합니다.
좌측 네비게이션에서 웹사이트를 클릭하세요. (참고: 구버전에서는 "호스트"로 표기될 수 있으며, 신버전은 "웹사이트"로 변경됨)
웹사이트 목록 하단에 있는 추가 버튼을 클릭합니다. 설정 창이 나타납니다.

3단계: 웹사이트 설정 구성

설정 창에서 아래 정보를 입력 또는 선택하세요.

도메인(Domain): 로컬에서 접속할 도메인을 입력합니다. 보통 .servbay.demo 확장자를 권장하며, 예시로 static.servbay.demo 또는 my-static-site.servbay.demo가 있습니다. ServBay는 .servbay.demo 도메인에 대한 로컬 네임 해석을 자동 처리하므로 hosts 파일을 수정할 필요가 없습니다.
- 설명: .servbay.demo 도메인을 사용하면 실제 운영 도메인과의 충돌을 피할 수 있고, ServBay 내장 DNS 해석기를 통해 해당 도메인이 로컬 컴퓨터를 가리키게 할 수 있습니다.
경로(Path): 오른쪽 폴더 아이콘을 클릭해서 1단계에서 만든 웹사이트 디렉터리(예: /Applications/ServBay/www/servbay-static-demo/)를 선택하세요.
- 설명: 경로는 웹 서버(Caddy 또는 Nginx)가 사이트 파일을 찾아 제공할 기본 폴더이며, 도큐먼트 루트(Document Root)라고도 합니다. 예를 들어 http://static.servbay.demo/로 접속하면 웹 서버는 이 디렉터리 내에서 index.html 등 기본 파일을 먼저 찾습니다. 경로는 반드시 웹사이트 파일이 들어 있는 폴더를 가리켜야 하며, 단일 파일(예: index.html)이 아닙니다.
포트(Port): 기본값을 보통 그대로 둡니다. HTTP 기본 포트는 80, HTTPS는 443입니다. 별도 포트가 필요할 경우에만 수정하세요.
웹 서버(Web Server): 사용할 웹 서버를 선택하세요. 정적 웹사이트에는 Caddy 또는 Nginx 모두 훌륭한 선택입니다.
- Caddy: 설정이 단순하고, HTTP/2 및 HTTPS 자동구성(ServBay User CA와 연동)을 지원하며 ServBay의 기본 권장 옵션입니다.
- Nginx: 고성능, 유연한 설정, 실제 서비스에 널리 사용되는 서버입니다.
- 두 가지 중 하나만 선택하면 됩니다.
PHP 버전(PHP Version): 정적 사이트는 PHP가 필요 없으므로 None을 선택하세요.
Node.js 버전(Node.js Version): 정적 사이트는 Node.js 필요 없음, None 선택.
Python 버전(Python Version): 정적 사이트는 Python 필요 없음, None 선택.
Go 버전(Go Version): 정적 사이트는 Go 필요 없음, None 선택.
Java 버전(Java Version): 정적 사이트는 Java 필요 없음, None 선택.
SSL: 로컬에서 HTTPS로 웹사이트에 접속하려면 이 옵션을 체크하세요. ServBay 내장 ServBay User CA 인증서를 사용해 자동으로 신뢰받는 SSL 인증서를 구성해줍니다. HTTPS 기능을 쉽게 테스트할 수 있습니다.
CORS: 다른 로컬 도메인에서 폰트나 API 데이터를 불러와야 하는 경우(크로스 오리진 리소스 공유), 이 옵션을 체크하고 추가 설정할 수 있습니다. ServBay는 사이트별 CORS 헤더 구성도 지원합니다.

4단계: 저장 및 변경사항 적용

모든 설정을 입력한 뒤 창 하단의 저장 버튼을 클릭합니다.
웹사이트 목록 화면으로 돌아갑니다. 방금 추가한 새로운 웹사이트가 보일 것입니다.
웹사이트 목록 상단의 변경사항 적용 버튼을 클릭하세요.
- 설명: 변경사항 적용을 누르면 ServBay가 웹 서버(Caddy 또는 Nginx)의 설정을 다시 로드하여 새로 추가한 웹사이트 구성이 활성화됩니다. 이 단계가 반드시 필요하며, 적용하지 않으면 웹사이트에 접속할 수 없습니다.

설정 확인

설정을 마치고 변경사항을 적용한 후, 웹 브라우저를 열고 입력한 도메인 주소(예: http://static.servbay.demo 또는 SSL 사용시 https://static.servbay.demo)로 접속해보세요.

모든 작업이 올바르게 되어 있다면, 예시로 만든 index.html을 포함해 사이트 컨텐츠가 정상적으로 표시됩니다.

참고사항

경로가 정확한 웹사이트 파일 루트 디렉터리인지 다시 확인하세요.
웹사이트 설정을 추가/수정/삭제할 때마다 꼭 변경사항 적용을 눌러야 적용됩니다.
정적 웹사이트에는 PHP, Node.js 등 서버사이드 언어를 None으로 두는 것이 최선의 보안, 자원 효율 측면에서 좋습니다.
접속 불가 등 문제가 생기면 ServBay가 실행 중인지, 웹 서버(Caddy/Nginx)가 동작 중인지, 브라우저에서 입력한 도메인이 설정과 정확히 일치하는지 확인하세요.

자주 묻는 질문(FAQ)

Q: 설정한 도메인에 접속하니 “웹사이트에 연결할 수 없음” 혹은 “서버를 찾을 수 없음” 오류가 뜹니다. 어떻게 하나요?

ServBay 앱이 실행 중인지 확인하세요.
변경사항 적용 버튼을 클릭했는지 확인하세요.
브라우저에 입력한 도메인이 ServBay 구성과 정확히 일치하는지(특히 http:// 또는 https:// 사용 여부도) 확인하세요.
지정한 경로가 올바른 웹사이트 파일 디렉터리를 가리키는지 확인하세요.
ServBay의 로그 파일에서 보다 구체적인 오류 정보를 확인할 수 있습니다.

Q: 웹사이트 경로를 제대로 지정했는데도 index.html이 아닌 폴더 리스트가 뜹니다. 왜 그런가요?

A: 사이트 루트에 기본 홈 파일(예: index.html)이 없을 때 보통 이런 현상이 나타납니다. 루트 디렉터리에 정확히 index.html (혹은 웹 서버에 설정된 기본 파일)이 존재하는지, 파일명이 대소문자까지 똑같은지 꼭 확인하세요.

Q: 정적 웹사이트에도 HTTPS를 적용할 수 있나요?

A: 네, ServBay 웹사이트 설정에서 SSL 옵션을 체크할 수 있습니다. ServBay 내장의 ServBay User CA 인증서로 로컬 도메인용 SSL 인증서를 발급·신뢰처리한 뒤 HTTPS 로컬 접속이 가능합니다.

요약

ServBay를 활용하면 단순한 HTML 페이지부터 복잡한 프론트엔드 앱의 빌드 산출물까지, 로컬에서 정적 파일 웹사이트를 쉽고 빠르게 추가·관리할 수 있습니다. ServBay의 웹사이트 관리 기능, 로컬 도메인 네임 해석, SSL 지원을 통해 더 효율적으로 프론트엔드 개발 및 테스트를 진행해 보세요.

정적 파일 웹사이트 추가하기 ​

개요 ​

활용 사례 ​

사전 준비 ​

단계별 절차 ​

1단계: 웹사이트 파일 준비 ​

2단계: ServBay에서 웹사이트 추가 ​

3단계: 웹사이트 설정 구성 ​

4단계: 저장 및 변경사항 적용 ​

설정 확인 ​

참고사항 ​

자주 묻는 질문(FAQ) ​

요약 ​