0Pricing
Linux Server Deployment & SSH Mastery · 강의

정적 웹사이트 호스팅

선택한 웹 서버가 정적 HTML, CSS 및 JavaScript 파일을 제공하도록 설정하여 첫 웹사이트에 접속할 수 있게 합니다.

정적 웹사이트 호스팅은(는) CoddyKit의 무료 Linux Server Deployment & SSH Mastery 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Linux Server Deployment & SSH Mastery 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Linux Server Deployment & SSH Mastery 강의에는 총 4개의 강의가 포함되어 있습니다.

정적 웹사이트란 무엇인가요?

환영합니다! 이번 레슨에서는 간단한 웹사이트를 온라인에 게시하는 방법을 알아보겠습니다.

정적 웹사이트는 HTML, CSS, JavaScript와 같은 파일로 구성되며, 서버에 저장된 그대로 사용자의 브라우저에 전달됩니다.

  • 서버 측 처리(예: PHP 또는 Python)가 없습니다.
  • 빠르고 안전하며 호스팅하기 쉽습니다.
  • 포트폴리오, 블로그 또는 간단한 정보 제공 사이트에 적합합니다.

첫 HTML 파일 만들기

아주 간단한 index.html 파일을 만들어 보겠습니다. 이 파일은 정적 웹사이트의 기본 페이지가 됩니다.

일반적으로 서버에서 이 파일을 만듭니다. 예를 들어 nano 또는 vim과 같은 텍스트 편집기를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

CSS 및 JavaScript 추가하기

HTML 파일에서 style.css와 script.js를 참조합니다. 기본 사이트를 완성하려면 이 파일들도 만들어야 합니다.

이 파일들은 index.html과 같은 디렉터리에 저장됩니다.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

웹 디렉터리 설정하기

이 웹사이트 파일을 저장할 전용 공간이 서버에 필요합니다. 일반적으로 /var/www/ 아래에 만듭니다.

먼저 웹사이트용 디렉터리를 만드세요. 그런 다음 index.html, style.css, script.js 파일을 그 안에 복사합니다.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: 서버 블록 기초

Nginx는 특정 웹사이트의 구성을 정의하기 위해 서버 블록(Apache의 Virtual Hosts와 유사)을 사용합니다.

각 서버 블록은 포트(HTTP의 경우 80)에서 요청을 수신하고 도메인 이름에 따라 응답합니다.

  • 일반적으로 /etc/nginx/sites-available/에서 찾을 수 있습니다.
  • /etc/nginx/sites-enabled/에 심볼릭 링크를 만들어 활성화합니다.

Nginx: Root 및 Index 지시문

서버 블록 내부에는 Nginx에 파일의 위치를 알려 주는 두 가지 주요 지시문이 있습니다.

  • root: 웹사이트 파일의 절대 경로를 지정합니다. Nginx는 이 위치에서 콘텐츠를 찾습니다.
  • index: 디렉터리가 요청되었을 때 Nginx가 제공할 기본 파일을 정의합니다(예: 누군가 yourdomain.com/을 방문하면 Nginx는 index.html을 찾습니다).

Nginx: 정적 사이트 전체 구성

다음은 정적 사이트를 위한 완전한 Nginx 서버 블록 구성입니다. 이 내용을 /etc/nginx/sites-available/mywebsite.conf로 저장하세요.

your_domain.com을 실제 도메인 또는 서버 IP로 바꾸는 것을 잊지 마세요.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: Virtual Host에 해당하는 구성

Apache를 사용한다면 Virtual Hosts라는 비슷한 개념을 사용합니다. 구성 파일(예: /etc/apache2/sites-available/mywebsite.conf)을 만듭니다.

주요 지시문은 DocumentRoot(Nginx의 root에 해당)와 DirectoryIndex(Nginx의 index에 해당)입니다.

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

서버 활성화 및 다시 불러오기

구성 파일을 만든 후에는 변경 사항을 적용하기 위해 해당 구성을 활성화하고 웹 서버를 다시 불러와야 합니다.

  • Nginx의 경우: 심볼릭 링크를 만들고 다시 불러옵니다.
  • Apache의 경우: 사이트를 활성화하고 다시 불러옵니다.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

실제 웹사이트 테스트하기

잘하셨습니다! 이제 정적 웹사이트에 접속할 수 있어야 합니다.

웹 브라우저를 열고 서버의 IP 주소 또는 구성한 도메인 이름으로 이동하세요.

“Hello CoddyKit!” 메시지가 표시되어야 합니다!

빠른 확인: Nginx 지시문

다음 Nginx 서버 블록 일부를 살펴보세요.

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

사용자가 http://example.com/으로 이동하면 Nginx는 어떤 파일을 먼저 제공하려고 할까요?

복습: 정적 사이트 호스팅

정적 웹사이트를 호스팅하는 방법을 성공적으로 배웠습니다!

다음 내용을 다루었습니다.

  • 기본 HTML, CSS, JS 파일 만들기
  • 웹사이트 콘텐츠를 위한 전용 디렉터리 설정하기
  • root/DocumentRoot 및 index/DirectoryIndex를 사용하여 Nginx 서버 블록(또는 Apache Virtual Hosts) 구성하기
  • 웹 서버 활성화 및 다시 불러오기
  • 브라우저에서 실제 웹사이트 테스트하기

다음에는 가상 호스트를 구성하여 하나의 서버에서 여러 웹사이트를 호스팅하는 방법을 알아보겠습니다!

자주 묻는 질문

“정적 웹사이트 호스팅” 강의는 무료인가요?

네 — “정적 웹사이트 호스팅” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Linux Server Deployment & SSH Mastery 강의 전체를 잠금 해제할 수 있습니다. Linux Server Deployment & SSH Mastery 강의에는 총 4개의 강의가 포함되어 있습니다.

“정적 웹사이트 호스팅”에서 뭘 배우나요?

선택한 웹 서버가 정적 HTML, CSS 및 JavaScript 파일을 제공하도록 설정하여 첫 웹사이트에 접속할 수 있게 합니다. 브라우저에서 직접 실행하는 실습 코드로 Linux Server Deployment & SSH Mastery을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Linux Server Deployment & SSH Mastery을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Linux Server Deployment & SSH Mastery은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“정적 웹사이트 호스팅” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Linux Server Deployment & SSH Mastery 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Linux Server Deployment & SSH Mastery 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Nginx/Apache 설치
  2. 정적 웹사이트 호스팅
  3. 기본 가상 호스트 설정
  4. Let's Encrypt로 HTTPS 활성화하기
← Linux Server Deployment & SSH Mastery(으)로 돌아가기