Webサイト応用(3)~Webサイトの公開と運用~

本カリキュラムでは、Webサイトの公開とその運用に必要な知識を習得します。
Webサーバの設定方法や安全なファイル転送方法、CMSの導入とカスタマイズまで幅広くカバーします。
実践を通して、効率的かつ安全な運用の基礎を確立しましょう。

1. Webサーバの設定と管理（Apache/Nginx）

Webサイトをインターネット上に公開するには、Webサーバの役割や設定方法を理解することが必要不可欠です。
このセクションでは、Webサーバの基本概念から、ApacheとNginxのインストールと設定方法、さらにHTTPS対応までの具体的な手順を詳しく解説します。

---

1-1. Webサーバの基本概念

Webサーバとは何か？

Webサーバは、インターネット経由でユーザーのリクエストに応じてHTML、CSS、JavaScript、画像ファイルなどを提供するソフトウェアのことです。
具体的には、以下のような役割を果たします。

• HTTPプロトコルを使ってブラウザやアプリケーションと通信。
  
• リクエストされたリソースを処理し、クライアントにレスポンスとして返す。
  
• 動的な処理が必要な場合には、アプリケーションサーバ（例: PHP、Node.js）と連携する。

ApacheとNginxの違いと選択基準

2つの主要なWebサーバであるApacheとNginxの違いを比較し、それぞれの特徴や用途を理解します。

特徴	Apache	Nginx
開発開始	1995年（老舗で安定性あり）	2004年（モダンな設計）
処理方式	プロセスベース（1リクエスト1プロセス）	イベント駆動型（非同期処理が可能）
静的/動的処理	動的コンテンツに強い	静的コンテンツに高性能
使いやすさ	初心者でも設定が容易	設定がやや難しいが高パフォーマンス
推奨用途	小規模～中規模サイト	高トラフィックや負荷の高いサイト

選択基準:

• Apacheはカスタマイズ性や動的処理が必要な場合に適しており、PHPと連携するWordPressサイトでよく使われます。
  
• Nginxは、高負荷環境や静的コンテンツの配信が多い場合に有利で、大規模サイトで主に利用されます。

静的コンテンツと動的コンテンツの違い

• 静的コンテンツ:
  サーバ上に保存されているファイルをそのまま返す（例: HTML, CSS, 画像ファイル）。
  
• 動的コンテンツ:
  サーバ側でプログラムを実行して生成されるコンテンツ（例: PHPで生成されたページ）。

1-2. Apacheのインストールと基本設定

Apacheのインストール方法（Linux環境を想定）

1. パッケージのアップデート
   まず、システムのパッケージを最新の状態にします。
   
   sudo apt update && sudo apt upgrade
   
2. Apacheのインストール
   以下のコマンドでApacheをインストールします（Debian系Linuxを想定）。
   
   sudo apt install apache2
   
3. 動作確認
   サーバの起動と動作確認を行います。
   
   sudo systemctl start apache2 sudo
systemctl enable apache2
   
   ブラウザでhttp://[サーバのIPアドレス]/にアクセスして「It works!」が表示されれば成功です。

httpd.conf の基本設定

Apacheの設定ファイルhttpd.confでは、サーバの動作をカスタマイズできます。
主な設定項目を以下に示します。

• ポート設定
  デフォルトではポート80を使用。
  
  Listen 80
  
• ドキュメントルート
  Webサイトのルートディレクトリを指定。
  
  DocumentRoot "/var/www/html"
  
• ディレクトリ設定
  ドキュメントルート以下のディレクトリのアクセス権限を指定。
  
  <Directory "/var/www/html"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>
  

仮想ホスト（Virtual Hosts）の設定

複数のドメインを1台のサーバで運用する場合、仮想ホストを設定します。

1. 仮想ホストファイルの作成
   /etc/apache2/sites-available/example.com.conf を作成。
   
   <VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost>
   
   
2. 仮想ホストの有効化とサーバ再起動
   設定を有効化してApacheを再起動。
   
   sudo a2ensite example.com.conf sudo systemctl reload apache2

ログ管理の基本（アクセスログ・エラーログの確認）

Apacheでは、以下のログファイルを確認することで問題の特定ができます。

• アクセスログ: /var/log/apache2/access.log
  
• エラーログ: /var/log/apache2/error.log

sudo tail -f /var/log/apache2/error.log

---

1-3. Nginxのインストールと基本設定

Nginxのインストール方法

1. インストール
   
   sudo apt install nginx
   
2. サービスの起動
   
   sudo systemctl start nginx
sudo systemctl enable nginx
   
   
3. 動作確認
   ブラウザでhttp://[サーバのIPアドレス]/にアクセスしてNginxのデフォルトページが表示されることを確認。

nginx.conf の基本構造と設定

Nginxの設定ファイルは、/etc/nginx/nginx.conf にあります。

• ワーカープロセスの設定
  サーバのCPU数に応じたプロセス数を設定。
  
  worker_processes auto;
  
• イベント処理
  最大接続数を指定。
  
  events { worker_connections 1024; }
  
• サーバブロック（仮想ホスト）
  サーバブロックを使って、複数のサイトをホスト可能。
  
  server { listen 80; server_name example.com; root /var/www/example.com;
location / { index index.html index.htm; } }
  

リバースプロキシとしての活用

Nginxはリバースプロキシとしても利用できます。
以下はバックエンドサーバにリクエストを転送する設定例です。

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

HTTPS対応とSSL/TLS証明書の設定（Let's Encryptを利用）

1. Certbotのインストール
   Let's Encryptの無料SSL証明書を利用するためのツール。
   
   sudo apt install certbot python3-certbot-nginx
   
2. 証明書の取得と設定
   コマンド一つでSSL化を自動設定。
   
   sudo certbot --nginx -d example.com -d www.example.com
   
3. 証明書の自動更新
   設定ファイルを確認し、自動更新タスクを設定。
   
   sudo systemctl status certbot.timer
   

---

補足: ApacheとNginxの比較と選択基準（詳細解説）

ApacheとNginxのどちらを選択すべきかについて、具体的なケースを基に詳しく解説します。

Apacheが適しているケース

1. WordPressやPHPベースのサイトを運営する場合
   • Apacheは.htaccessファイルを利用して、ディレクトリごとに設定を柔軟に変更可能です。
     これにより、WordPressやDrupalなどのCMSで必要とされるリダイレクトやカスタム設定を簡単に適用できます。
     
2. すでにApacheを利用しているインフラを引き継ぐ場合
   • 長年使われているため、ドキュメントやコミュニティが豊富です。
     過去の設定ファイルやインフラがApacheを前提としているなら、そのまま継続利用する方がコストを抑えられるでしょう。

Nginxが適しているケース

1. 大量の静的コンテンツを高速に配信する場合
   • Nginxは非同期のイベント駆動型モデルを採用しているため、同時接続数が多い場合でも高いパフォーマンスを発揮します。
     
2. リバースプロキシやロードバランサとして利用する場合
   • Nginxはリバースプロキシとして最適化されており、負荷分散やSSL終端処理にも強みを持っています。
     
3. 大規模なWebアプリケーションを運営する場合
   • 動的コンテンツの処理をバックエンドサーバに任せ、Nginxをフロントエンドサーバとして使用すると効率的です。

結論: ハイブリッド構成

多くの企業では、ApacheとNginxの両方を活用するハイブリッド構成を採用しています。
例えば、Nginxをフロントエンドに配置し、静的コンテンツを直接配信させながら、動的コンテンツはApacheに転送する構成が一般的です。この方法で、それぞれの強みを活かすことができます。

---

注意点: 実務でよくあるトラブルとその解決方法

1. ポートの競合
   • ApacheとNginxを同じサーバで動作させる場合、両方がデフォルトでポート80を使用しようとします。
   
   
   • これを解決するには、どちらかのポートを変更します。
   # Apacheのポートを変更する場合 Listen 8080
   
   または、Nginxをリバースプロキシとして設定し、バックエンドのApacheにリクエストを転送します。
   
2. ファイアウォールの設定
   • サーバが外部からアクセス可能になっていない場合、ファイアウォールが原因のことが多いです。次のコマンドで必要なポートを開放します（例: UbuntuでのUFW）
   sudo ufw allow 80 sudo ufw allow 443
   
3. HTTPS証明書の期限切れ
   • Let's Encryptの証明書は90日間のみ有効です。
   
   
   • 自動更新の設定が正しく機能していないと、HTTPSが利用できなくなることがあります。
   
   
   • 定期的に以下のコマンドで更新状況を確認してください。
   sudo certbot renew --dry-run

2.FTPとSSHの基本

2-1. FTPの基本

FTPとは何か？仕組みの理解

FTP（File Transfer Protocol）は、ネットワークを通じてファイルをサーバとクライアント間で転送するプロトコルです。
以下の特徴があります。

• 通信ポート:
  デフォルトではポート21を使用します。
  
• 仕組み:
  • クライアント（例: ローカルPC）からサーバ（Webサーバ）へファイルをアップロード。
    
  • サーバからクライアントへファイルをダウンロード。
    
• セキュリティリスク:
  FTPは暗号化されていないため、認証情報や転送データが第三者に傍受される可能性があります。そのため、SFTP（Secure FTP）などの安全な転送方法が推奨されます。

FTPクライアント（例: FileZilla）の使い方

FTPクライアントを利用すると、GUIで簡単にファイルのアップロードやダウンロードが可能です。
以下はFileZillaを使用する手順です。

1. FileZillaのインストール
   • 公式サイトからダウンロードしてインストールします。
     
2. サーバへの接続
   • FileZillaを起動し、以下の情報を入力します。
     • ホスト: サーバのIPアドレスまたはドメイン名。
     • ユーザー名: サーバ管理者が設定したアカウント。
     • パスワード: 上記アカウントのパスワード。
     • ポート番号: FTPの場合は「21」、SFTPの場合は「22」。
   • クイック接続ボタンをクリックすると、サーバへ接続されます。
     
3. ファイル操作
   • 左側がローカルPC、右側がサーバディレクトリを示します。
   • ファイルをドラッグ＆ドロップしてアップロード/ダウンロード可能。
     
4. SFTP接続の設定
   • FTPではなくSFTPを使用する場合、ホスト名に「sftp://」を付けて接続します。

SFTP（Secure FTP）を用いた安全なファイル転送

SFTPは、FTPの機能をSSH（Secure Shell）を利用して安全に通信するプロトコルです。
以下の点でFTPよりも優れています。

• 暗号化:
  データや認証情報が暗号化されるため、安全性が高い。
  
• 同じポート22を使用:
  SSHと同じポートで通信するため、ファイアウォール設定が簡単。

SFTPを使う利点

• 通信内容が暗号化され、パスワードが漏洩するリスクが減少。
  
• FTPに比べて、よりセキュアな環境でファイル操作が可能。

---

2-2. SSHの基本

SSHとは何か？仕組みと利用用途

SSH（Secure Shell）は、安全なリモート接続を提供するプロトコルで、主に以下の用途に使われます。

• サーバ管理:
  リモートサーバにログインしてコマンド操作が可能。
  
• ファイル転送:
  SFTPやSCPを用いた安全なファイル転送。
  
• ポートフォワーディング:
  特定の通信を暗号化して中継。

仕組み

• SSHは、クライアントとサーバ間の通信を暗号化します。
  
• 認証には、通常パスワード認証または公開鍵認証を使用します。

SSHクライアント（例: Tera Term、PuTTY）のセットアップ

Windows環境で代表的なSSHクライアントの使い方を説明します。

1. Tera Termのインストール
   • Tera Term公式サイトからダウンロードしてインストール。
     
2. 接続設定
   • Tera Termを起動し、以下の情報を入力します。
     • ホスト: サーバのIPアドレスまたはドメイン名。
     • ポート番号: SSHは通常ポート22を使用。
       
   • 「OK」をクリックして接続。
     
   • 初回接続時に「ホスト鍵」の警告が出ますが、「Accept」を選択します。
     
3. PuTTYのインストール
   • 公式サイトからダウンロードしてセットアップ。
     
   • 接続方法はTera Termと類似しています。

公開鍵認証方式の導入と設定

公開鍵認証は、パスワード認証よりも安全な認証方式です。
以下の手順で設定します。

1. SSHキーの生成（クライアント側）
   • Linux/Mac:
     ssh-keygen -t rsa -b 2048
     
     デフォルトの保存場所は~/.ssh/id_rsa（秘密鍵）と~/.ssh/id_rsa.pub（公開鍵）です。
     
   • Windows（PuTTYgenを使用）:
     • PuTTYgenを起動して「Generate」ボタンをクリック。
       
     • 公開鍵と秘密鍵が生成されるので保存します。
       
2. 公開鍵のサーバ登録
   • 公開鍵をサーバの~/.ssh/authorized_keysファイルに追加します。
   cat id_rsa.pub >> ~/.ssh/authorized_keys chmod 600 ~/.ssh/authorized_keys
   
3. SSH接続の確認
   • クライアントからSSH接続を行い、パスワード不要でログインできることを確認します。
   ssh -i ~/.ssh/id_rsa username@server_ip

基本的なコマンド操作例

SSH接続後によく使用されるコマンドを以下に示します。

• ファイル一覧の表示
  ls -l
  
• ディレクトリの移動
  cd /path/to/directory
  
• ファイルのコピー
  cp source_file destination_file
  
• ファイルの転送（SCP）
  クライアント→サーバ:
  　　scp local_file username@server_ip:/remote/directory/
  
  サーバ→クライアント:
  　　scp username@server_ip:/remote/file /local/directory/
  
• パーミッションの変更
  chmod 644 filename

ディレクトリ管理のポイント

• /var/www/html/ などのWebサーバ用ディレクトリを操作する場合は、適切なパーミッション設定を行うことで、セキュリティを確保します。

3.CMS（WordPress）の概要とカスタマイズ

3-1. CMSとは何か？

CMSの仕組みと利点

CMS（Content Management System）は、コーディング不要でWebサイトを作成・編集・運用できるシステムです。
主な特徴と利点は以下の通りです。

1. 効率的なコンテンツ管理
   • HTMLやCSSの知識がなくても、管理画面からテキストや画像を簡単に編集可能。
     
2. 拡張性
   • テーマやプラグインを追加することで、機能やデザインを簡単に拡張。
     
3. コラボレーション機能
   • 複数のユーザーが異なる権限でサイトを管理可能（例: 投稿者、編集者、管理者）。

WordPressを選ぶ理由（国内外の普及状況）

1. 圧倒的なシェア
   • 世界のWebサイトの約43%（2023年時点）がWordPressで構築されており、CMS市場ではトップを占めています。
     
2. オープンソースで無料
   • WordPress本体は無料で利用でき、プラグインやテーマも無料のものが多くあります。
     
3. 豊富なコミュニティとドキュメント
   • 日本国内外で活発なコミュニティがあり、トラブル時の情報やチュートリアルが豊富。
     
4. 汎用性の高さ
   • ブログサイト、企業サイト、ECサイトなど、あらゆる種類のWebサイトに対応可能。
     

---

3-2. WordPressのインストール

必要な環境（LAMPスタック）の構築

WordPressを動作させるためには、以下のソフトウェアを組み合わせた環境（LAMPスタック）が必要です。

• Linux:
  サーバのOS。
  
• Apache:
  Webサーバソフトウェア。
  
• MySQL:
  データベース管理システム。
  
• PHP:
  サーバサイドスクリプトを処理するプログラム。

インストール手順（Ubuntuを例に）

1. パッケージのアップデート:
   sudo apt update && sudo apt upgrade
   
2. 必要なソフトウェアのインストール:
   sudo apt install apache2 mysql-server php php-mysql libapache2-mod-php
   
3. 動作確認:
   • Apacheを起動:
     sudo systemctl start apache2
     
   • PHPが動作するか確認:
     echo "<?php phpinfo(); ?>" > /var/www/html/info.php

WordPressのダウンロードとインストール

1. WordPressのダウンロード:
   wget https://wordpress.org/latest.tar.gz
   
2. 解凍と配置:
   tar -xvzf latest.tar.gz
sudo mv wordpress/* /var/www/html/
   
3. ファイルの権限設定:
   sudo chown -R www-data:www-data /var/www/html/
sudo chmod -R 755 /var/www/html/
   
4. データベースの作成:
   mysql -u root -p CREATE DATABASE wordpress_db;
CREATE USER 'wordpress_user'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON wordpress_db.* TO 'wordpress_user'@'localhost';
FLUSH PRIVILEGES;
   
5. ブラウザでインストールを完了:
   • http://[サーバのIPアドレス]/ にアクセスして、インストールウィザードに従います。

管理画面（ダッシュボード）の基本操作

• 投稿の作成:
  ブログやニュースを追加。
  
• 固定ページ:
  サイト内の静的なページ（例: お問い合わせページ）。
  
• 外観:
  テーマやウィジェットの変更。
  
• プラグイン:
  機能の追加や管理。

---

3-3. WordPressテーマのカスタマイズ

テーマとは何か？その役割

テーマは、サイトのデザインとレイアウトを制御するテンプレートです。公式ディレクトリから無料テーマをインストールするか、有料テーマを利用します。

子テーマを用いた安全なカスタマイズ方法

• 子テーマとは？
  子テーマは、親テーマの機能を引き継ぎながら、デザインやコードをカスタマイズできるものです。
  
• 子テーマの作成方法
  1. /wp-content/themes/ディレクトリ内に子テーマフォルダを作成。
  2. style.css と functions.php を作成。
  3. style.css の例:
     /* Theme Name: My Child Theme Template: parent-theme-folder */
  4. 管理画面で子テーマを有効化。

カスタムCSSと簡単なPHPの編集方法

1. カスタムCSSの追加
   • 管理画面 > 外観 > カスタマイズ > 「追加CSS」で直接編集可能。
     
2. PHPの編集
   • 子テーマ内のfunctions.phpを使い、追加機能を実装。
     
   • 例: ヘッダーにカスタムスクリプトを挿入:
     function custom_script() { echo '<script>alert("Hello, World!");</script>'; } add_action('wp_head', 'custom_script');

---

3-4. プラグインの活用

必須プラグインの紹介

1. セキュリティ
   • Wordfence Security: サイト全体のセキュリティを強化。
     
2. SEO
   • Yoast SEO: 検索エンジン最適化をサポート。
     
3. キャッシュ
   • W3 Total Cache: サイト速度を向上。
     
4. バックアップ
   • UpdraftPlus: 定期的なバックアップの作成。

プラグインのインストール方法と注意点

1. インストール手順
   • 管理画面 > プラグイン > 「新規追加」で検索してインストール。
     
2. 注意点
   • プラグインの多用は避け、必要最小限にする。
     
   • 信頼性のある開発者が提供しているものを選ぶ。

---

3-5. WordPressのセキュリティ対策

ユーザー管理の強化

• 強力なパスワードの使用
  • パスワード生成ツールを活用し、推測されにくいパスワードを設定。
    
• ユーザー権限の適切な管理
  • 投稿者や編集者に管理者権限を与えない。

定期的なバックアップの実施

• UpdraftPlusの例:
  • 管理画面 > 設定 > UpdraftPlus でスケジュールを設定。
    
  • クラウドストレージ（Google Drive、Dropboxなど）に保存可能。

WordPressおよびプラグインのアップデート

• 定期的にWordPress本体、テーマ、プラグインを最新バージョンに更新。
  
• 自動更新を設定しておくと便利。

まとめ

このカリキュラムを通して、Webサイトを効率的かつ安全に公開・運用する方法を学ぶことができます。
特にWordPressの導入・カスタマイズは実務でも役立つスキルです。
次のステップとして、さらなるセキュリティ対策やサイトのパフォーマンス向上に挑戦してみてください。