水澄net.com
Intelの趣味のHP
top>ブログ
2023年03月28日作成

Webサーバ立ち上げの話

こんにちはインテルです

今回は表題の通り、先日立ち上げたWebサーバの話をしようと思います
今回利用したのはApacheとPHP(HTMLの発展版の言語)です

環境の導入
ということで導入手順、まずはインストールです
$ sudo apt install apache2
$ sudo apt install php libapache2-mod-php
Apacheがインストールできた時点でブラウザで
http://<サーバIP>/
と叩けばデフォルトページが表示されます。

表示されない場合、Apacheが立ち上がっていないorファイヤーウォールでブロックされている可能性があります
対処法としては起動していない場合
sudo systemctl enable apache2.service
    sudo systemctl start apache2.service
上記コマンドでサービスの再起動を試してみてください
ファイヤーウォール(ufw)の場合は以下のコマンドで穴あけをします
$ sudo ufw allow Apache

なお、記事本文は”/var/www/html/index.html”です
逆に言えばここに"index.html"や"index.php"を置けば導入したサーバにHTTPでアクセスすると、
置いたファイルが自動的に読み込まれます

PHPで書く
PHPで書くと一部分を別ファイルにして様々なページで使い回すことができます
ヘッダーやサイドバーなんかを別ファイルにすると変更時の手間が減らせます
PHPなんていうと大仰な気がしますが、基本的には中学や高校の情報の授業でやったHTMLの記述で大丈夫です

例えば私のHP(といっても現時点ではトップページしかない...)を例に上げると
中身の記述としては以下のように書いています

index.php
<!DOCTYPE html>
    <html lang="jp"> 
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <title>水澄net.com </title>
    </head>	
    
    <body>
        <?php include('./inc/header.php'); ?>
        <!--ここまでヘッダー-->
        <!--ここから本文-->
        <center>
            <div class="top_content" style="text-align: center">
                <p align=left>
                <自己紹介><br>
                変な奴です。一人で九州から東京まで250ccのバイクで行ったアホです。ZZRフルOHやりました。これでもNWエンジニア。<br>
                バイクやアマチュア無線の話等々、ただの趣味のホームページです<br>
                まだまだ準備中も多いですがゆっくり作っていきます<br>
                不具合などはTwitterにDMしてもらえると助かります<br>
                <br>
                <br>
                </p>
            <a href="https://intel-zzr250.blog.jp/">・ブログ</a>&emsp;&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top1.jpg" width="auto" height="128" alt="ZZR250とトレーラ"><br>
            <a href="https://twitter.com/norisan1015">・Twitter</a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top2.jpg" width="auto" height="128" alt="ロゴ"><br>
            ・ZZR250関連情報(準備中)&emsp;&emsp;<img border="0" src="./image/top3.jpg" width="auto" height="128" alt="ZZR250"><br>
            ・アマチュア無線関連(準備中)<img border="0" src="./image/top4.jpg" width="auto" height="128" alt="TS-690S"><br>
            ・サーバ関連(準備中)&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top5.jpg" width="auto" height="128" alt="Cisco C2960G"><br>
        </div>
        </center>
        <!--ここまで本文-->
        <!--ここからフッダー-->
        <?php include('./inc/footer.php'); ?>
    </body>
    
    </html>

./inc/header.php
<div class="header">
            水澄net.com</br>
            <font size="7">Intelの趣味のHP</font></br>
        </div>

./inc/footer
<div class="footer">
        <center>
            &copy;2022 - 2023 misumi-net(Intel ZZR250)
        </center> 
    </div>
ところがページのソースコードを表示させると以下のように表示されていると思います
<!DOCTYPE html>
    <html lang="jp"> 
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <title>水澄net.com </title>
    </head>	
    
    <body>
        <div class="header">
            水澄net.com</br>
            <font size="7">Intelの趣味のHP</font></br>
        </div>
    
        <!--ここまでヘッダー-->
        <!--ここから本文-->
        <center>
            <div class="top_content" style="text-align: center">
                <p align=left>
                <自己紹介><br>
                変な奴です。一人で九州から東京まで250ccのバイクで行ったアホです。ZZRフルOHやりました。これでもNWエンジニア。<br>
                バイクやアマチュア無線の話等々、ただの趣味のホームページです<br>
                まだまだ準備中も多いですがゆっくり作っていきます<br>
                不具合などはTwitterにDMしてもらえると助かります<br>
                <br>
                <br>
                </p>
            <a href="https://intel-zzr250.blog.jp/">・ブログ</a>&emsp;&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top1.jpg" width="auto" height="128" alt="ZZR250とトレーラ"><br>
            <a href="https://twitter.com/norisan1015">・Twitter</a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top2.jpg" width="auto" height="128" alt="ロゴ"><br>
            ・ZZR250関連情報(準備中)&emsp;&emsp;<img border="0" src="./image/top3.jpg" width="auto" height="128" alt="ZZR250"><br>
            ・アマチュア無線関連(準備中)<img border="0" src="./image/top4.jpg" width="auto" height="128" alt="TS-690S"><br>
            ・サーバ関連(準備中)&emsp;&emsp;&emsp;&emsp;<img border="0" src="./image/top5.jpg" width="auto" height="128" alt="Cisco C2960G"><br>
        </div>
        </center>
        <!--ここまで本文-->
        <!--ここからフッダー-->
        <div class="footer">
        <center>
            &copy;2022 - 2023 misumi-net(Intel ZZR250)
        </center> 
    </div>
    </body>
    
    </html>
このようにPHPで書くと外部ファイルを参照して連続したものとして解釈されるため便利に使えます
他にもJavascriptを使ったやり方などもあるようですが、サーバにPHPを入れるだけ使えるので、
自宅サーバのような環境を自由にできるサーバではこれが最も簡単だと思います

最後に
やっとHPもできたのでこれまでのブログを引っ越したり、整理したりしていきたいですね
HTTPSへの対応もしたいのですが、認証局のあたりを勉強せねば...

それではまた

<次の記事前の記事>

戻る