水澄net.com
Intelの趣味のHP
top＞サーバ・ネットワーク＞Apacheを利用してWebサーバを立てる
2023年11月6日作成

Apacheを利用してWebサーバを立てる

1.環境の導入
2.うまく行かない場合
3.htmlとphpでの記事作成
    PHPを利用した記事作成

1.環境の導入

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

2.うまく行かない場合

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

3.htmlとphpでの記事作成

なお、記事本文は”/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">
	<?php
		// ページタイトル
		$title = '水澄net.com';
		// ディスクリプション
		$description = '変な奴です。一人で九州から東京まで250ccのバイクで行ったアホです。ZZRフルOHやりました。これでもNWエンジニア。バイクやアマチュア無線の話等々、ただの趣味のホームページです。まだまだ準備中も多いですがゆっくり作っていきます。不具合などはTwitterにDMしてもらえると助かります';
		// ogpで利用
		$url = 'www.misumi-net.com'; 
		// トップページの判定
		$is_home = true; // トップページのみ記載
		// ルートディレクトリ
		$image = "./image/";
		$inc = "./inc/";
		// インクルードの読み込み
		include($inc.'header.php');
	?>
	<title>水澄net.com</title>
</head>	
<body>
<article>
	<?php include($inc.'sidebar.php'); ?>

	<!--ここから本文-->
	<div class="main_content">
		<center>
		<p align=left>
		<自己紹介><br>
		変な奴です。一人で九州から東京まで250ccのバイクで行ったアホです。ZZRフルOHやりました。これでもNWエンジニア。<br>
		バイクやアマチュア無線の話等々、ただの趣味のホームページです<br>
		まだまだ準備中も多いですがゆっくり作っていきます<br>
		不具合などはTwitterにDMしてもらえると助かります<br>
		<br>
		<br>
		</p>
	<table>	
	<tr align="center">
 	<td><a href="https://intel-zzr250.blog.jp/"><img border="0" src="./image/top1.jpg" width="auto" height="192" alt="ZZR250とトレーラ"><br>・ブログ</a></td>
 	<td><a href="./zzr250/"><img border="0" src="./image/top3.jpg" width="auto" height="192" alt="ZZR250"><br>・ZZR250関連</a></td>
	</tr>
	<tr align="center">
 	<td><a href="./server/"><img border="0" src="./image/top5.jpg" width="auto" height="192" alt="Cisco C2960G"><br>・サーバ・ネットワーク</a></td>
 	<td><img border="0" src="./image/top4.jpg" width="auto" height="192" alt="TS-690S"><br>・アマチュア無線(準備中)</td>
	</tr>
</table>
	<!--ここまで本文-->
	</div>
</article>
		<!--ここからフッダー-->
	<?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>
		©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">
	<div class="header">
		水澄net.com</br>
		<font size="7">Intelの趣味のHP</font></br>
	</div>
		<title>水澄net.com</title>
</head>	
	<body>
<article>
		<div class="sidebar">
		<div class="sidebar_content">
			<br>
			<a href="https://www.misumi-net.com/"><font size="5" color="#ffffff">・Top</font></a><br>
			<br>
			<hr width="90%">
			<br>
			<a href="https://intel-zzr250.blog.jp/"><font size="5" color="#ffffff">・ブログ</font></a><br>
			<br>
			<a href="https://www.misumi-net.com/zzr250/"><font size="5" color="#ffffff">・ZZR250関連</font></a><br>
			<br>
			<a href="https://www.misumi-net.com/server/"><font size="5" color="#ffffff">・サーバ・ネットワーク</font></a><br>
			<br>
			<!--
			<a href="https://www.misumi-net.com/web/"><font size="5" color="#ffffff">・アマチュア無線関連</font></a><br>
			<br>
			-->
			<hr width="90%">
			<br>
			<font size="5">Twitter</font><br>
			<hr width="90%">
				<div class="twitter">
	<a href="https://twitter.com/norisan1015">
	<img border="0" src='./image/twitter.gif' width="25%" height="auto" alt="Twieetrアイコン"><br>
	<font size="3" color="#ffffff">Intel ZZR250(JE6RWI/1)🧲❇️</font>
	<font size="1" color="#888888"><br>@norisan1015</font><br>
	</a>
</div>
		</div> 
	</div>	
	
	<!--ここから本文-->
	<div class="main_content">
		<center>
		<p align=left>
		<自己紹介><br>
		変な奴です。一人で九州から東京まで250ccのバイクで行ったアホです。ZZRフルOHやりました。これでもNWエンジニア。<br>
		バイクやアマチュア無線の話等々、ただの趣味のホームページです<br>
		まだまだ準備中も多いですがゆっくり作っていきます<br>
		不具合などはTwitterにDMしてもらえると助かります<br>
		<br>
		<br>
		</p>
	<table>	
	<tr align="center">
	 <td><a href="https://intel-zzr250.blog.jp/"><img border="0" src="/image/top1.jpg" width="auto" height="192" alt="ZZR250とトレーラ"><br>・ブログ</a></td>
	 <td><a href="/zzr250/"><img border="0" src="/image/top3.jpg" width="auto" height="192" alt="ZZR250"><br>・ZZR250関連</a></td>
	</tr>
	<tr align="center">
	 <td><a href="/server/"><img border="0" src="/image/top5.jpg" width="auto" height="192" alt="Cisco C2960G"><br>・サーバ・ネットワーク</a></td>
	 <td><img border="0" src="/image/top4.jpg" width="auto" height="192" alt="TS-690S"><br>・アマチュア無線(準備中)</td>
	</tr>
	</table>
	<!--ここまで本文-->
	</div>
</article>
		<!--ここからフッダー-->
	<div class="footer">
	<center>
		©2022 - 2023 misumi-net(Intel ZZR250)
	</center> 
</div>
</body>
	</html>

このようにPHPで書くと外部ファイルを参照して連続したものとして解釈されるため便利に使えます
他にもJavascriptを使ったやり方などもあるようですが、サーバにPHPを入れるだけ使えるので、
自宅サーバのような環境を自由にできるサーバではこれが最も簡単だと思います

ページを書くだけであればこれの繰り返しで作ることができます
ただ実際にこのページを公開する場合にはHTTPSへ対応させたり、ドメインを取得してドメイン認証を取ったりといった作業が必要となります。
また、複数台のWEBサーバを稼働させるといった場合にはリバースプロキシサーバの設置などが必要となります。


以上

＜前へ戻る

・Top

・ブログ
・バイク・車関連
・サーバ・ネットワーク
・アマチュア無線関連
・その他

twitterTwitter

blueskyBlueSky
Blueskyアイコン
水澄Intel(JE6RWI/1)
@misumi-net.com

minecraft-status
misumi-net Serverに投票
©2019 - 2025 misumi-net.com(水澄Intel)