ミニPCをWeb公開するまで

# 概要。
ミニPCを仮想化し、仮想ゲストを構築した。その仮想ゲストをWordPressのサーバにし、Webサイトに公開するまでの手順をここで記載する。


## 1. UbuntuをWordPress化。
以下の手順のSSL対応を省略して、WordPressのインストールを行う。ここでは特に新規での情報はない。

https://majimoney.com/install-wordpress/

## 2. ドメインの購入。

色々比較したが、自分はお名前.comで購入した。

https://www.onamae.com/?banner_id=1078_stlt_onamaecom&_ga=2.163741112.645369421.1729339731-1737008567.1729339731&_gac=1.115914228.1729339731.Cj0KCQjwsc24BhDPARIsAFXqAB1Yw2Ajw2NkdPLnwnfP2fc8Yq05avhAEiD6hzpoHf7yh-hSucyqn18aAvt2EALw_wcB&_gl=1*1bawsre*_gcl_aw*R0NMLjE3MjkzMzk3MzEuQ2owS0NRandzYzI0QmhEUEFSSXNBRlhxQUIxWXcyQWp3Mk5rZFBMbnduZlAyZmM4WXEwNWF2aEFFaUQ2aHpwb0hmN3loLWhTdWN5cW4xOGFBdnQyRUFMd193Y0I.*_gcl_au*MTU2MjEzNTU1Ny4xNzI5MzM5NzMx

## 3. CloudFlareの設定
以下の手順がわかりやすい。これを最後まで実行して、WebサーバとPCを繋ぐところまで進める。

https://zenn.dev/waddy/articles/g-domains-cloudflare-tunnel

この時、一点詰まった。

https://developers.cloudflare.com/dns/manage-dns-records/troubleshooting/records-with-same-name/

ドメインの名前と一緒になってしまうといけないという事で、サブドメイン+ドメイン名をつけた。

そして、CloudFrontとWebサーバ間の間をHttpsにするために、以下の手順を実行した。

```
Cloudflareでオリジン証明書の発行
Cloudflareのダッシュボードにログインし、対象のドメインを選択します。
「SSL/TLS」タブに移動し、次に「オリジンサーバー」タブをクリックします。
「証明書の作成」ボタンをクリックし、次の設定を確認して証明書を作成します:
有効期限: デフォルトでは15年間の証明書を選べます。
ホスト名: ドメイン名（例: mydomain.com）およびワイルドカード（例: *.mydomain.com）を指定可能です。
証明書（Certificate）と秘密鍵（Private Key）が表示されるので、それを保存します。後でApacheの設定で使います。
証明書: origin.pem
秘密鍵: origin.key
2. Apache（httpd）に必要なモジュールの確認
ApacheでHTTPS通信を行うために、SSLモジュールが有効になっているか確認します。次のコマンドを使用してモジュールを有効にします。

dnf -y install mod_ssl

3.オリジン証明書と秘密鍵の配置
Cloudflareからダウンロードした証明書（origin.pem）と秘密鍵（origin.key）を安全なディレクトリに保存します。たとえば、/etc/ssl/certs/と/etc/ssl/private/ディレクトリに配置します。
bash
コードをコピーする
sudo mkdir -p /etc/ssl/certs /etc/ssl/private
sudo mv origin.pem /etc/ssl/certs/
sudo mv origin.key /etc/ssl/private/
sudo chmod 600 /etc/ssl/private/origin.key
```

4 ApacheのSSL設定
ApacheのSSL設定ファイルを編集します。通常は、/etc/httpd/conf.d/ssl.conf（CentOSなどの場合）や/etc/apache2/sites-available/default-ssl.conf（Ubuntuなどの場合）にあります。
SSL設定を以下のように記述します。SSLCertificateFileとSSLCertificateKeyFileには、Cloudflareの証明書と秘密鍵のパスを指定します。

```
<VirtualHost *:443>
    ServerAdmin webmaster@mydomain.com
    ServerName mydomain.com
    DocumentRoot /var/www/html

    SSLEngine on
    SSLCertificateFile /etc/ssl/certs/origin.pem
    SSLCertificateKeyFile /etc/ssl/private/origin.key

    # 他の設定（必要に応じて）
    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

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

その後、FWの443を開ける。
```
sudo ufw allow 443
sudo ufw reload
```
7. Apacheの再起動
最後に、Apacheを再起動して設定を反映させます。

```
sudo systemctl restart apache2
```

https://developers.cloudflare.com/ssl/origin-configuration/origin-ca/


正しいSSL証明書なら、これでサブドメイン+ドメインでアクセスする事ができるのだが、今回は自己証明書のため、以下のエラーが起こる。

https://community.cloudflare.com/t/one-of-my-cloudflare-tunnels-is-returning-a-bad-gateway-error/483145

解決策は以下の通り。
```
I got this working by going into the Tunnel setup and enabling no-tls-verify on the tunnel.
```

![スクリーンショット 2024-10-20 19.13.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/1b37b3de-7591-4697-0b2e-05f408e92f24.png)


これで、サブドメイン+ドメインでアクセスできるようになる。


#  参考サイトまとめ


https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/create-remote-tunnel/


https://zenn.dev/takajun/articles/fbd783e459c722

https://speakerdeck.com/arkw/cloudflare-tunneldezi-zhai-sabawogong-kai-sitemita?slide=26



概念的な意味ではこれがわかりやすい。（次回以降の汎用性の高さを考えて。）

https://qiita.com/kniwase/items/519c4ea6c96b665b161e

https://zenn.dev/matsubokkuri/articles/cloudflare-service#%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%8C%E8%B6%85%E9%80%9F%E3%81%84