＃KaliでWebサーバを一瞬で立ててみた！

2024.08.18 2024.08.17

はじめに
おわりに

はじめに

今日はKali LinuxでWebサーバを立てる手順を解説します。Kaliは主にセキュリティテスト用のディストリビューションですが、Webサーバを立てることも可能です。ここのゴールは実際にブラウザからアクセスして、表示することです！

今日やるWebサーバ構築の流れ

①Apacheのインストール
 ②Apacheサービスの起動
 ③Apacheの自動起動設定
 ④ファイアウォールの準備
 ⑤ファイアウォールの設定
 ⑥ブラウザからアクセス
 ⑦Webページ（HTML）のカスタマイズ
 ⑧サーバの停止と再起動

手順1: Apacheのインストール

ApacheはオープンソースのWebサーバです。以下のコマンドでインストールします。

Bash

sudo apt update
sudo apt install apache2

手順2: Apacheのサービスを起動

インストールが完了したら、Apacheのサービスを起動し、ステータスを確認します。

Bash

sudo systemctl start apache2
sudo systemctl status apache2

ステータスが「active (running)」となっていれば、Apacheが正常に動作しています。

systemctl: SystemdというLinuxのサービス管理システムを操作するためのコマンドです。サービスの起動、停止、再起動、ステータスの確認などを行います。

start: サービスを起動するコマンドです。今回は、apache2サービス（Apache Webサーバ）を起動します。

手順3: Apacheの自動起動設定

次回からシステム起動時に自動でApacheが起動するように設定します。

Bash

sudo systemctl enable apache2

enable: サービスを有効化するコマンドです。この場合、「自動起動を有効化する」ことを意味します。

手順4: ファイアウォールを準備する

Kaliにはデフォルトでファイアウォール（UFW）が有効になっていないかもしれませんが、有効な場合は、Webサーバのポート（80番）を許可する必要があります。

Bash

sudo apt install ufw
sudo ufw enable

ufw: Linuxのファイアウォールを簡単に管理するためのツールです。

enable:システムが再起動した後でも、自動でufwが動作するようにする

手順5：ファイアウォールを設定する

Bash

sudo ufw allow 'Apache'
sudo ufw reload

allow: 特定のサービスまたはポートへのアクセスを許可するためのサブコマンドです。ここでは、’Apache’を指定することで、Apache Webサーバに必要なポート（80（HTTP）や443（HTTPS））を開放し、外部からのアクセスを許可します。

reload: ファイアウォール設定を再読み込みし、変更を適用するためのサブコマンドです。reloadを行わないと、新しく設定したルールが即座に適用されないため、意図したアクセス制御が実現できません。特に、ファイアウォールの設定変更後は、設定をすぐに反映させるためにreloadを行うことが重要です。

トニーくん

サービス名は、/etc/servicesファイルや/etc/ufw/applications.d/ディレクトリに登録されているサービスのプロファイルを指します。で、このプロファイルに基づいて、指定されたサービス名に関連するポートとプロトコルを自動的に適用します！

＊『サービス名の指定ではなく、ポート番号の指定だけで設定する方法は？』

手順6: ブラウザからアクセス

これでWebサーバが立ち上がっています。ブラウザを開いて、次のURLにアクセスします。

KaliのIPアドレスを確認して別のデバイスからもアクセスできます。IPアドレスは次のコマンドで確認します。

Bash

ip a #ipアドレスの確認

eth0の中にあるinetの後に記されているIPアドレスをコピー（ctrl+shift+c）します。

そして、ブラウザのアドレスバーで指定します。たとえば、192.168.1.100なら以下のようになります。

Bash

http://192.168.1.100

手順7: Webページのカスタマイズ

デフォルトのWebページは/var/www/htmlディレクトリにあります。index.htmlファイルを編集して、独自のWebページを作成できます。

Bash

sudo vi /var/www/html/index.html

ここでHTMLを編集し、ブラウザでリロードすることで変更を確認できます。

vi: テキストエディタviを起動します。viはターミナル上で動作するエディタで、軽量かつ強力な編集機能を持っています。

編集手順

1.「i」キーで挿入モードにする
2.以下をコピペする(ctrl+shift+v)
3.「Esc」キーでノーマルモードに切り替える
4.「:wq」で変更を保存して終了する
5.ブラウザをリロードする

詳しいviの使い方はこちら↓

トニーくん

ノーマルモードは、ファイルの保存や、ページ内検索といったメタ的な操作を担当します。また、保存・終了などでは「：」を忘れないように打ちましょう！

HTML

<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Webサーバ</title>

<style>

  body {

    background: linear-gradient(to bottom right, #006400, #00ff00); /* グラデーション背景 */

    opacity: 0;

    transition: opacity 5s ease-in-out; /* フェードインの速度を5秒に変更 */

  }

  body.loaded {

    opacity: 1;

  }

  h1, h2 {

    color: white; /* テキストの色を白にして、背景とのコントラストを強調 */

    text-align: center; /* テキストを中央揃えに */

    margin-top: 20%; /* テキストの位置を少し下に調整 */

  }

</style>

</head>

<body>

<h1>Webサーバーが作動しています！</h1>

<h2>p.s.では、また会いましょう！さらばじゃっ！</h2>

 

<script>

  window.addEventListener('load', function() {

    document.body.classList.add('loaded');

  });

</script>

</body>

</html>