Apache2 Setup Memo

■Apache2インストール
kokaki@skynew:~$ sudo apt install -y apache2

■Apache2ドキュメント・ルート変更
・変更先ディレクトリ作成
kokaki@skynew:~$ mkdir -p www/html

・Apache2デフォルト仮想ホスト(VirtualHost)設定ファイルバックアップ
kokaki@skynew:~$ sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/000-default.conf.org

・Apache2デフォルト仮想ホスト(VirtualHost)設定ファイル編集
kokaki@skynew:~$ sudo vi /etc/apache2/sites-available/000-default.conf

    <VirtualHost *:80>
        ServerName localhost
        ServerAdmin webmaster@localhost
        DocumentRoot /home/kokaki/www/html

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>

・Apache2設定ファイルバックアップ
kokaki@skynew:~$ sudo cp /etc/apache2/apache2.conf /etc/apache2/apache2.conf.org

・Apache2設定ファイル編集
kokaki@skynew:~$ sudo vi /etc/apache2/apache2.conf

    <Directory /home/kokaki/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>

・ファイル所有者変更・パーミッション付与
kokaki@skynew:~$ sudo chown -R www-data:www-data /home/kokaki/
kokaki@skynew:~$ sudo chmod -R 755 /home/kokaki/

■Apache2動作確認
・index.html作成
kokaki@skynew:~$ vi www/html/index.html

    <!doctype html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>Hello!, Ubuntu On WSL</title>
        </head>
        <body>
            <h1>Hello, Ubuntu!</h1>
        </body>
    </html>

・再起動
kokaki@skynew:~$ sudo systemctl restart apache2

http://localhost/

■Apache2 SSL設定
・Apache2デフォルト仮想SSLホスト(VirtualHost)設定ファイルバックアップ
kokaki@skynew:~$ sudo cp /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-available/default-ssl.conf.org

・Apache2デフォルト仮想SSLホスト(VirtualHost)設定ファイル編集
kokaki@skynew:~$ sudo vi /etc/apache2/sites-available/default-ssl.conf

    <VirtualHost _default_:443>
        ServerName localhost
        ServerAdmin kokaki@localhost

        DocumentRoot /home/kokaki/www/html

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        SSLEngine on

        SSLCertificateFile    /etc/ssl/certs/ssl-cert-snakeoil.pem
        SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key

        <FilesMatch "\.(cgi|shtml|phtml|php)$">
            SSLOptions +StdEnvVars
        </FilesMatch>
        <Directory /usr/lib/cgi-bin>
            SSLOptions +StdEnvVars
        </Directory
    </VirtualHost>

kokaki@skynew:~$ sudo a2ensite default-ssl

    Enabling site default-ssl.
    To activate the new configuration, you need to run:
    systemctl reload apache2

kokaki@skynew:~$ sudo a2enmod ssl

    Considering dependency mime for ssl:
    Module mime already enabled
    Considering dependency socache_shmcb for ssl:
    Enabling module socache_shmcb.
    Enabling module ssl.
    See /usr/share/doc/apache2/README.Debian.gz on how to configure SSL and create self-signed certificates.
    To activate the new configuration, you need to run:
    systemctl restart apache2

・再起動
kokaki@skynew:~$ sudo systemctl restart apache2

https://localhost/

■ページを左右に分ける
HTMLレイアウトで左右分割する方法を現役エンジニアが解説【初心者向け】

    <style>
        #child1 {
        background-color: lightblue;
        }
        #child2 {
        background-color: lightgreen;
        }

        @media (min-width: 600px) {
        #parent {
            display: flex;
        }
        #child1 {
            flex-grow: 1;
        }
        #child2 {
            flex-grow: 1;
        }
        }
    </style>

    <div id="parent">
        <div id="child1">子要素１</div>
        <div id="child2">子要素２</div>
    </div>

■TOPに戻るボタン作成
【コピペOK！】HTMLページの「トップに戻る」ボタンの作り方、おすすめデザイン5選

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    rel="stylesheet"
    integrity="sha512-..." crossorigin="anonymous" />

    /* ボタン全体 */
    #page_top {
        width: 50px;
        height: 50px;
        position: fixed;
        right: 10px;
        bottom: 10px;
        background: #e25407;
        border-radius: 50%;
        opacity: 0.6;
    }

    /* Font Awesome */
    #page_top::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f102';
        font-size: 20px;
        color: #ffffff;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    <a href="#" id="page_top" class="page_top_btn"></a>
    <a id="header" href="/">Home</a>

■Apache2が起動しない(80番ポート使用中)
kokaki@skynew:~$ sudo systemctl status apache2

    × apache2.service - The Apache HTTP Server
        Loaded: loaded (/usr/lib/systemd/system/apache2.service; enabled; preset: enabled)
        Active: failed (Result: exit-code) since Wed 2025-01-15 10:36:48 JST; 1min 22s ago
        Docs: https://httpd.apache.org/docs/2.4/
        Process: 1126 ExecStart=/usr/sbin/apachectl start (code=exited, status=1/FAILURE)

    Jan 15 10:36:48 skynew systemd[1]: Starting apache2.service - The Apache HTTP Server...
    Jan 15 10:36:48 skynew apachectl[1128]: (98)Address already in use: AH00072: make_sock: could not bind to address [::]:80
    Jan 15 10:36:48 skynew apachectl[1128]: (98)Address already in use: AH00072: make_sock: could not bind to address 0.0.0.0:80
    Jan 15 10:36:48 skynew apachectl[1128]: no listening sockets available, shutting down
    Jan 15 10:36:48 skynew apachectl[1128]: AH00015: Unable to open logs
    Jan 15 10:36:48 skynew systemd[1]: apache2.service: Control process exited, code=exited, status=1/FAILURE
    Jan 15 10:36:48 skynew systemd[1]: apache2.service: Failed with result 'exit-code'.
    Jan 15 10:36:48 skynew systemd[1]: Failed to start apache2.service - The Apache HTTP Server.
    kokaki@skynew:~$ sudo systemctl restart apache2
    Job for apache2.service failed because the control process exited with error code.
    See "systemctl status apache2.service" and "journalctl -xeu apache2.service" for details.

■Ubuntuで使用中の80番ポートを探す
・httpを探してみる
kokaki@skynew:~$ sudo lsof -i | grep http

    java      250          tomcat   44u  IPv6   1604      0t0  TCP *:http-alt (LISTEN)

・プロセス終了させてみる
kokaki@skynew:~$ sudo kill -9 250
kokaki@skynew:~$ sudo lsof -i | grep http

・80番ポートを探してみる
kokaki@skynew:~$ sudo netstat -ltnp | grep ':80'

■PowerShellで、80番ポート

    Windows PowerShell
    Copyright (C) Microsoft Corporation. All rights reserved.

    新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

    PS C:\Users\pc> netstat -nao | Out-String -Stream | Select-String :80

    TCP         0.0.0.0:80             0.0.0.0:0              LISTENING       4892
    TCP         192.168.0.105:51919    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51951    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51990    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51991    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51992    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51993    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51994    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51995    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51996    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51997    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:51998    119.25.113.170:80      ESTABLISHED     4552
    TCP         192.168.0.105:53471    23.46.155.69:80        TIME_WAIT       0

    ・netstat -nao | findstr -i :80 でもよい

    PS C:\Users\pc>

タスクマネージャー > 詳細で、上記「0.0.0.0:80」のPID「4892」をタスク終了させる。

・Apache2再起動
kokaki@skynew:~$ sudo systemctl restart apache2

2025 kokaki.jp, Office.