元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

Apache2入門

昨今、フレームワークのおかげでウェブサービスの開発が楽になりました。ここでは基本に立ち返って、ウェブサーバをインストールします。Apache2をインストールして、ウェブサーバを起動し、ブラウザで表示を確認します。Apacheの正式名称は、Apache HTTP Serverだそうです。

Apache2のインストール

インストールコマンドは以下のとおりです。

sudo apt install apache2

Apacheのバージョンを確認します。

apache2 -v

サービスのステータスを確認します。

systemctl status apache2

設定ファイルの在処は、以下のとおりです。

ls -hl /etc/apache2/

Apacheの起動、表示確認

Apache(=ローカルサーバ)を起動します。ブラウザでhttp://localhost:80/にアクセスして、表示を確認します。Apache2 Default Pageというページが表示されます。このページの在処は、/var/www/html/index.htmlです。

実験:ポート番号を変更する

/etc/apache2/ports.confを編集します。Listen 80からListen 8000に変更します。

# Listen 80
Listen 8000

Apacheを再起動し、ブラウザでhttp://localhost:8000にアクセスします。

Apacheの再起動

以下のコマンドでApacheを再起動します。

systemctl restart apache2

実験:ドキュメントルートのパスを変更する

/etc/apache2/sites-available/000-default.confを編集します。ドキュメントルートのパスを/var/www/htmlから/var/www/html/testに変更します。

# DocumentRoot /var/www/html
DocumentRoot /var/www/html/test

testディレクトリの配下に、index.htmlを配置します。Apache2を再起動し、ブラウザでhttp://localhost:8000にアクセスします。今度は、/var/www/html/test/index.htmlファイルが表示されます。確認できたらポート番号を80、ドキュメントルートを/var/www/htmlに戻します。

index.htmlを自前のものに置き換える

/var/www/htmlにある既存のindex.htmlのファイル名を変更します。新たに自前のindex.htmlを作成し、表示を確認します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apacheの練習</title>
</head>
<body>
  <h1>Apacheの練習</h1>
  こんにちは、世界<br/>Hello World!</body>
</html>

ブラウザでhttp://localhost:80にアクセスして、表示を確認します。

おまけ:curlコマンド

curlコマンドでHTMLのデータを取得して、内容を確認します。

curl http://localhost

または

curl ローカルIPアドレス

を実行します。以下のようなデータが返されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apacheの練習</title>
</head>
<body>
  <h1>Apacheの練習</h1>
  こんにちは、世界<br/>Hello World!</body>
</html>

PHPを使ってサイトを作ってみる

PHPのインストール

sudo apt install php -y

index.phpを作成する

ドキュメントルートにindex.phpを作成します。index.htmlは、ファイル名を変更しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apacheの練習</title>
</head>
<body>
  <h1>Apacheの練習</h1>
  <?php
    print 'こんにちは、世界<br/>';
    print 'Hello World!';
  ?>
</body>
</html>

ブラウザで表示確認

ブラウザで表示を確認します。PHPで記述した箇所が、HTMLに変換されていれば問題ないです。

参考サイト

» HTML入門のまとめはこちらです。