ブログサイトを自作した話

ついにできたぁブログサイト

3か月くらい引っ張ってきたブログサイトが完成しました。
いろいろ学べることがあったのでみんなと共有したいと思いますね、

まずは私が構築しているサーバーの構図がどうなっているかをお見せしましょう！
ウェブサイトの構成は次のようになっている↓

構成としては Cloudflare と Apache (2)を組み合わせています。
一応コメント機能やリスト機能を追加する可能性があるので、もともと構築していたDB(postgresql)とも通信できるように構築しました。
今回のブログでは使用しないため一旦飛ばします^^
DBの構築の話はまた後日...

どのように構築したんですかぇ？

どのように構築したのか、という話を端的にいきます。難しかった部分を伝えたいので。
構築する方法は調べればすぐ出てきます(不親切)

サーバー用PCとcloudflare(ドメイン)を用意しましょう。

サーバー用PCを用意しましょう。スペックは用途にもよりますが、WEBサイトぐらいだったらセロリン(celeron)レベルでいいでしょう。メモリは4GBです
私は「BMAX」というミニPCがハードオフで売っていたので購入。
(調べたら公式サイト出てきたので一応載せておきます)

BMAX公式サイト(多分)

PCとかタブレットとか売ってる。

jp.bmaxit.com

cloudflareでドメインを取ります。ドメインを取るだけでしたら年額1500円前後で取れます。.devは2000円ぐらいしました...
(円ドル換算なので気を付けて)
公開せずにLAN内のみでの通信の場合はcloudflare及びcloudflare tunnel(後述)は不要ですので。

Cloudflare

ドメイン取得、管理ができるサービス

www.cloudflare.com/ja-jp/

あとはUbuntu Server LTS版のISOファイルをダウンロードして、Rufasとかでインストールメディア作って、初期設定とかですね。
サーバー構築全般に言えますが固定IPアドレスだったり OpenSSHのインストールだったりは初期設定のうちにやっておくと、後々面倒くさくならないですよ。やっときましょう。やれ。

Ubuntuに使い慣れていない人は、固定IPアドレスを指定するときに苦労するかもしれないので簡単に説明。

shell script

192.168.1.xx/24

Ubuntuではこのような形で指定します。これはプレフィックス型のIPアドレス指定方法です。
カタカナが出てきて難しいと思った方もいらっしゃるかもしれませんが、ご安心を。めっちゃ簡単です。詳しい話サブネットマスクのネットワーク部とホスト部、サブネッティングはここではしないので、知りたい人は調べてください。
windowsでは次のようにネットワークの設定ができます。

plain text

IPv4アドレス: 192.168.1.xx サブネットマスク: 255.255.255.0

先ほどのプレフィックス型は、 IPアドレスとサブネットマスクをひとまとめにしたものです。やり方をご説明します。
サブネットマスクを2進数に変換します。上の例で行くと255.255.255.0なので2進数変換すると、

plain text

サブネットマスク(2進):11111111.11111111.11111111.00000000

この1の桁数を数えて、その桁数を/(スラッシュ)に続けて入力するだけです。今回のサブネットマスクは1が24桁あるので、一番上のプレフィックス型指定の形になります。
どうですか？変換の仕方は簡単でしたでしょう？以上。

apacheインストールと構築ゥ！

apacheの読み方は"アパッチ"です。私はこれを知らず、先日まで"アパッチェ"と呼んでいました。お恥ずかしい(*>ω<*)
本題です。
apacheをインストールします。apacheというのは、簡単に言うと webサイトを立ち上げるためのソフトです。
Nginxというソフトも有名なのですが、apacheのほうが検索上位にあり、利用者も多いので運用しやすいという観点から私はお勧めです。

インストールはたったのこれだけ！コンソールにこれを入力！

shell script

sudo apt install apache2

※rootアカウントの場合はsudoは不要
えっと、終わりですｗ(apacheの後の2というのは、apacheのバージョンです)
...
なんだけど、ここでUbuntu初心者には押さえておかないと今後何もできないコマンドがあります。なんだと思いますか？
そうです(???) systemctl です。理解しましょう。

systemctlというコマンドの説明から...普通に調べてみると...

plain text

modernなLinuxディストリビューションで採用されているシステムおよびサービスマネージャ「systemd」を制御・管理するためのコマンドラインツール

とありますが、windowsでいうタスクマネージャーとスタートアップのようなもの、簡単に言うと Linuxのサービス(プログラム)を管理するコマンドです。まあ少し違って、ほかにもOS起動順序や依存関係、journalやタイマ実行などもあるのですが一旦ね？
そして、apacheも基本はこのsystemctlを使って操作します。

基本動作

shell script

                                        sudo systemctl start (service)  #(service)を起動
                                        sudo systemctl stop (service)  #(service)を停止
                                        sudo systemctl restart (service)  #(service)を再起動
                                        sudo systemctl status (service)  #(service)の起動状態を確認
                                        sudo systemctl enable (service)  #(service)をPC起動時に自動起動(スタートアップ)を有効
                                        sudo systemctl disable (service)  #(service)をPC起動時に自動起動(スタートアップ)を有効
                                        sudo systemctl daemon-reload (service)  #(service)の設定ファイルを再読み込み
                                    

※rootアカウントの場合はsudoは不要
最初はこの7つを理解しましょう。
今回はapacheを動かしますから、(service)には"apache2"を入れますよ？

shell script

sudo systemctl start apache2

このようにね？

この流れで、cloudflareのドメインを取り、Tunnelを使う人は続けてもう一つインストールしましょう。それは cloudflared というものです。
やり方は同じなのでどんどん行きましょう！

shell script

sudo apt install cloudflared sudo systemctl start cloudflared

cloudflaredを使うと、自動的にwebサイトが暗号化されるのは強みです。
apacheのみでLAN内構成にするとアクセスするときは必ず"http://192.168.1.xx"みたいになるのですが、cloudflare tunnelを使うと"https://"に「勝手に」なります。最高。

あとは諸々の設定(後述)を行って、所定のディレクトリにhtml、その他ファイルを入れれば完成です。

一個皆さんが難しいと思ってるのはHTMLとCSS、JavaScriptなどのフロントエンドの作成という人もいるでしょう。
私もwebのフロントエンドは正直趣味の管轄外で、嫌いなので、AIにお任せですw チャッピー(ChatGPT)へGO!!
とはいえ、結構私独自で作ってたりもしますよ？
そうじゃなかったらこんなピンクと肌色基調のラ〇ホみたいなサイトにはなりませんよ。

???「グラデーションがかっこいいと思ってるのは弱い」
...　全　く　そ　の　通　り　で　あ　る　。

ちょっと難しかったとこまとめ

※HTML、CSSといったフロントエンドは除く。AIベースで仕組みはあまり理解しておりません

apache及びcloudflaredの設定ファイル

見ればわかる。戸惑います。
apache2のシステムファイルは、デフォルトでは"/etc/apache2"というフォルダにあると思いますが、なければapache2で検索をかけてください。

前章で飛ばした諸々の設定をします。設定ファイルをいじります。
テキストエディタはnanoやemacsなど色々ですが、私はvim信者ですのでvim一択です。おすすめですが、操作が少し複雑で、覚えなければならないので強要はしません。

shell script

sudo apt install vi #vimをインストール sudo apt install emacs #emacsをインストール

※nanoはデフォルトなので、インストール済みだと思います

さて、/etc/apache2の中身はどのようになっているのかな...?

plain text

                                        /etc/apache2
                                        |`--apache2.conf
                                        |`--ports.conf
                                        |`--envvars
                                        |`--magic
                                        |`--conf-available
                                        |   `--charset.conf
                                        |   `--security.conf
                                        |`--conf-enabled
                                        |   `--
                                        |`--sites-available
                                        |   `--000-default.conf
                                        |`--sites-enabled
                                        |   `--000-default.conf->(symlink)
                                        |`--mods-available
                                        |   `--
                                        `--mods-enabled
                                            `--
                                    

なるべくディレクトリが分かりやすいようにしたのですが、どうでしょうか。
直接書き込む重要なファイルは、上2行目と3行目のconfファイルです。やりましょう。
編集は必ずスーパーユーザー(sudo) でね。sudoが面倒だったらsudo su -を打てばrootユーザーになります。

まずは apache2.conf ファイル。ここには、 apacheの基本設定ができるようになっています。
テキストエディタで開くと様々な設定が書かれていますが、特に編集すべき部分は web公開するディレクトリとその設定を書く欄です。
よくスクロールすると、こんなテキストがあります。

configuration file

                                        # Sets the default security model of the Apache2 HTTPD...
                                        # ...
                                        <Directory />
                                            AllowOverride None
                                            Require all denied
                                        </Directory>
                                    

これは公開されているディレクトリの権限などがあります。
4行目、AllowOverrideは、サイトにパスワードを付けたときに、その中のディレクトリもパスワードを付けるかの設定です。(再帰的かどうか)
パスワードを付けない人は特に設定する必要がありません。Noneにしましょう。一応使う人はAllなどにすると設定できます。
5行目、Requireは、アクセスの許可を設定できます。deniedが全拒否、grantedが全許可です。ほかにもip,host,exprなどありますが、拒否許可だけ覚えておきましょう。

新しく公開するディレクトリを設定する場合はここに同じように追加します。

configuration file

                                        <Directory /var/www/>
                                            Options FollowSymLinks
                                            AllowOverride None
                                            Require all granted
                                        </Directory>
                                    

Optionsによってほかの設定もできます。例えば、

FollowSymLinks...シンボリックリンク(windowsでいうショートカット)をwebサイトでたどることを許可
Indexes...htmlファイルが無かった時に、ディレクトリの一覧を表示させる

などあります。私もこの2つ以外は使ってないのでわかりませんが、知りたい人は調べてください。
そして今回は/var/wwwというフォルダをwebサイトのトップにしたいので、Requireをall grantedにしましょう。ディレクトリを変えたい人はDirectoryの右にパスを入力。

そしてもう一つは ports.conf です。このファイルは名前通り、公開するポートを設定します。
次のようになっています。

configuration file

                                        Listen 8080
                                         
                                        <IfModule ssl_module>
                                            Listen 443
                                        </IfModule>
                                        ...
                                    

とありますが、設定すべきは1行目です。公開したいポートをListenに続いて入れるだけです。簡単です。
私は8080番から8081,8082...と公開していますが、80番でもよいでしょう。
別で公開したいポートがあれば、Listenを複数行書けばいいだけです。
新しくwebサイト作って、ファイル入れて設定したけど公開されない...と思ったらここにポートを入力してなかったりします。(俺はそれで4時間ぐらい悩んでましたw)気を付けましょう。

あと一つ忘れがちなのはサイトの有効化です。
サイトの設定をして、各種ファイルを置いたら有効化をしないと、仮想ホストが立てられません。
次のコマンドを打ってください。

shell script

sudo a2ensite (サイト設定ファイル.conf)

ここも忘れているとめんどくさいです。しかしこれは、sites-availableフォルダ内を見ればわかるので比較的わかりやすいです
systemctl reload apache2を忘れずにね(-_-)

ここも色々難しかったのですが、問題はこのあと、 cloudflaredの設定です
最初にインストールはしていると思うので、そこからの手順を説明します。
・cloudflareにログイン

shell script

cloudflared tunnel login

実行するとブラウザが開くので、cloudflareのドメインを取ったアカウントでログインしましょう。

・トンネルを作成

shell script

cloudflared tunnel create (トンネルの名前を自由に決める)

実行すると、ユーザーのホームディレクトリの次の位置にjsonファイルが生成されます。

shell script

~/.cloudflared/(トンネルID).json

トンネルIDは自動発行です。長くて覚えづらいですが、控えておくと良いです。

ここまでは初回のみ実行なので良いのですが、ここからは各ドメインごとに行うので、忘れてしまいがちです。

・DNSにトンネルを紐づける
自分が取ったドメインとトンネルを紐づけしないと、サイトにはアクセスできません。サーバー側で設定。

shell script

cloudflared tunnel route dns (トンネル名) (ドメイン)

おめでとうございました。これで晴れて開通です。
これのどれかに打ち忘れがあると厄介ですが、そんな時は cloudflareのサイト側でトンネルを確認するとどうなっているかが分かるので参考に。

まとめ

apache側の設定ファイルを確認する
cloudflareの設定を確認する

補足

今回初めてブログを書いてみましたが、こんなにも書くのは難しいのだと感じました。
これからいろいろ書いてみて、ブログに慣れたいと思います。
ほかのブログもどうぞよろしくお願いします。^^