Linux Server Deployment & SSH Mastery · レッスン

静的Webサイトのホスティング

選択したWebサーバーを設定して静的なHTML、CSS、JavaScriptファイルを配信し、最初のWebサイトを公開します。

「静的Webサイトのホスティング」はCoddyKit上の無料Linux Server Deployment & SSH Masteryレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはLinux Server Deployment & SSH Mastery学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Linux Server Deployment & SSH Masteryコースには全4レッスンが含まれています。

静的Webサイトとは

ようこそ。このレッスンでは、シンプルなWebサイトをオンラインで公開する方法を学びます。

静的Webサイトは、HTML、CSS、JavaScriptなどのファイルで構成され、サーバーに保存されている状態のままユーザーのブラウザーに配信されます。

PHPやPythonなどによるサーバーサイド処理がありません。
高速で安全性が高く、ホスティングも簡単です。
ポートフォリオ、ブログ、シンプルな情報サイトに最適です。

初めてのHTMLファイルを作成する

非常にシンプルなindex.htmlファイルを作成しましょう。これは静的Webサイトのメインページになります。

通常、このファイルはサーバー上で作成します。たとえば、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!');
});

Webディレクトリを設定する

これらのWebサイトファイルを保存するために、サーバー上に専用の場所が必要です。一般的な場所は/var/www/の配下です。

まず、Webサイト用のディレクトリを作成します。次に、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は、特定のWebサイトの設定を定義するためにサーバーブロックを使用します（ApacheのVirtual Hostsに相当します）。

各サーバーブロックは、ポート（HTTPの場合は80など）でリクエストを待ち受け、ドメイン名に基づいて応答します。

通常は/etc/nginx/sites-available/にあります。
/etc/nginx/sites-enabled/へのシンボリックリンクを作成して有効化します。

Nginx：rootとindexディレクティブ

サーバーブロック内では、2つの重要なディレクティブによってファイルの場所をNginxに伝えます。

root：Webサイトのファイルへの絶対パスを指定します。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）を作成します。

主なディレクティブは、Nginxのrootに相当するDocumentRootと、Nginxのindexに相当するDirectoryIndexです。

<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>

サーバーを有効化して再読み込みする

設定ファイルを作成したら、変更を反映するために設定を有効化し、Webサーバーを再読み込みする必要があります。

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

公開したWebサイトをテストする

よくできました。これで静的Webサイトにアクセスできるはずです。

Webブラウザーを開き、サーバーの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は最初にどのファイルを配信しようとしますか。

まとめ：静的サイトをホスティングする

静的Webサイトをホスティングする方法を身につけました。

次の内容を学びました。

基本的なHTML、CSS、JSファイルの作成。
Webサイトのコンテンツ用の専用ディレクトリの設定。
root/DocumentRootとindex/DirectoryIndexを使ったNginxサーバーブロック（またはApache Virtual Hosts）の設定。
Webサーバーの有効化と再読み込み。
ブラウザーでの公開Webサイトのテスト。

次は、1台のサーバーで複数のWebサイトをホストするために、Virtual Hostsを設定する方法を学びます。

よくある質問

「静的Webサイトのホスティング」レッスンは無料ですか？

はい。「静的Webサイトのホスティング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Linux Server Deployment & SSH Masteryコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Linux Server Deployment & SSH Masteryコースには全4レッスンが含まれています。

「静的Webサイトのホスティング」で何を学びますか？

選択したWebサーバーを設定して静的なHTML、CSS、JavaScriptファイルを配信し、最初のWebサイトを公開します。ブラウザで直接実行するハンズオンコードでLinux Server Deployment & SSH Masteryを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Linux Server Deployment & SSH Masteryを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのLinux Server Deployment & SSH Masteryは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「静的Webサイトのホスティング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このLinux Server Deployment & SSH Masteryレッスンでコードを書いて実行できますか？

はい。すべてのLinux Server Deployment & SSH Masteryレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Linux Server Deployment & SSH Masteryに戻る