今、自分のWebページを作成するために、Raspberry piからサーバを作っています。公開しようか迷っていますが、結構大変なので、とりあえず他の人があまり上げていない。Apacheにgithubを連携する部分を先に記録していこうと思います。一から構築できるように、本記事ではApacheを建てるところから解説していきます。といっても、すでに記事がある場合は引用させていただくと思いますが、ご了承ください。
Apacheとは
Apacheは、オープンソースのWebサーバーソフトウェアで、インターネット上のWebページを提供するために使われます。PHPやHTMLなどのコンテンツを処理し、ユーザーに届ける役割を担っています。設定が柔軟で、世界中の多くのWebサイトで使用されています。
(by chatgpt)
同じようなのにnginxというものがあるらしくて迷いましたが、Apacheの方が昔からある上、調査がしやすいのでApacheにしました。詳しい違いはこのサイトを参照ください。
使用環境
- Raspberry pi 5
- Almalinux 9.5
Apacheの構築
動的なコンテンツを含むWebサイトを作りたいため、Apacheと同時にphpもインストールしてみます。Almalinuxでは、デフォルトでphp8.0が入っていますが、昨今の環境では8.1以上のバージョンを求められることがあるらしいので、下記コマンドを使用してphp8.1に変更します。
sudo dnf module reset php
&&
sudo dnf module enable "php:8.1" -y
次に以下のコマンドを実行してApacheとPHPを同時に導入していきます。(長いので間違えたら各々調べるか指摘してください・・・)
sudo dnf -y install httpd-devel mod_ssl php php-cli composer php-devel php-pdo php-mysqlnd php-mbstring php-gd php-pear php-pecl-apc-devel zlib-devel php-zip libzip npm
ここまでで、Apacheのインストールおわったらデフォの位置にindex.htmlが生成できており、SSL証明書を導入することで利用することができるそうですが、証明書を発行するのが面倒で後回しにしたいので一旦、無効にします。
sudo mv /etc/httpd/conf.d/ssl.conf /etc/httpd/conf.d/ssl.conf_
上記で行っているのは、ファイル名を変更にしてApacheに読み込ませないようにしています。こうすることによって、Apacheを利用したページにアクセスできるようになります。ただ、SSL証明を無効にしているので、httpsとしてアクセスできないので、実際に公開する際はSSL証明書を有効にすることをお勧めします。自分も公開するまでに、SSL証明を作成したいと思います。
先にSSL証明書を作成したいという方はググってみてください。（これに関しては自分もまだ調査してないのでご了承ください）
そうしたら、以下のコマンドを入力して、PHPとApacheを起動します。
sudo systemctl enable php-fpm --now
&&
sudo systemctl enable httpd --now
起動したら、今度はファイアウォールでhttp及びhttpsに対してアクセスできるように設定します。
sudo firewall-cmd --add-service={http,https}
sudo firewall-cmd --runtime-to-permanent
ここまでできたら、Webサーバを構築したIPアドレスをブラウザに入力すると、以下のような表示が出てきます。
ちなみに、PHPの動作を確認する場合は、
sudo echo '<?php phpinfo();?>' | sudo tee /var/www/html/php.php
でPHPファイルを作成します。そうしたら、ウェブブラウザで先ほどのIPアドレスの後ろに/php.phpを入力します。phpの構成内容がずらずら出てきたらちゃんと表示できていると思います。
以降、基本的にhtmlファイルや画像ファイル等は/var/www/html配下で操作することになります。そして、PHPの挙動は/etc/php.iniの内容、Apacheの挙動は/etc/httpd/conf/httpd.conf上で操作することができます。これらは、覚えておくとスムーズに作業できるようになるので、ぜひ覚えておきましょう。
なお、設定変更した際は、それぞれ再起動しないと反映されないので注意が必要です。
sudo systemctl restart php-fpm
&&
sudo systemctl restart httpd
SSH接続先のプログラムを手元のPCのVSCodeで操作する
ここで、ひと段落ということで、SSH接続先のプログラムを手元のPCのVSCodeで操作する設定方法を解説します。多分これをみている多くの人は、SSH接続を使って操作していると思います。ターミナルなどのコマンドラインで編集しても良いですが、VisualStudioCode（以下VSCode）から編集できたら、とても編集しやすいですよね。自分もそう思いました。というわけでこれについて説明します。ssh接続出来ればめちゃ簡単にできるので、ぜひやってみてください。
まず、VSCodeを開いて「Remote Development」をインストールします。
インストールできたら左の欄に、下から二番目のPCに地球マークの書いてある項目ができているはずなので、そこをクリックします。
項目を開いたら、SSHの部分にマウスカーソルをおくと設定マークが出てくるはずなのでクリックします。
クリックしたら上の検索欄に/.ssh/configで検索し、そこに
Host 任意のサーバ名
HostName IPアドレス
User ユーザ名
configを編集できたら、右上からターミナルを表示します。表示されたら、いつも通り、接続したいIPアドレスをSSH接続します。接続できたら、先ほどのSSH欄に任意で設定したHost名が書いてあるものが出てくるはずなのでまたマウスカーソルを置いて、右の四角いマークをクリックします。
クリックすると、自動でSSH接続されたタブが新たに出現しますので、ssh接続する際に入力するPWを入力します。そうすると普通と同じように開くボタンを押してファイルを漁ることで編集できるようになります。めちゃ便利ですよね！！
Githubに連携する
それでは、いよいよGithubに連携していじれるようにしたいと思います！今回自分が行った方法は、ApacheのファイルをVSCodeを経由してGithubに接続していきたいと思います。少し手順が多いので、少し小分けにして説明していきたいと思います。
1. GithubにSSHキーを登録する
まず、接続元のAlmalinux上にSSHキーを作成していきます。
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
メアドの部分は自分のメールアドレスを入力してください。あまり関係ないかもしれませんが、Githubに登録してあるものだといいかもしれません。作成できたら
cat ~/.ssh/id_rsa.pub
を入力し、作成したSSHキーの公開鍵を表示します。表示されたものを全てコピーして。Githubの指定された場所に貼り付けていきます。Githubのサイト を開いて、Setting→SSH and GPG Keysの項目を開きます。開いたら右上のNew SSH Keysをクリックします。
Titleは任意の名前、Keyは先ほどコピーした公開鍵の内容を入力し、一番下の緑のボタンをクリックします。
キーの登録ができたら、Almalinux上で
ssh -T git@github.com
を入力し「Hi ! You've successfully authenticated.」と表示されれば成功です！もし失敗したらエラーの内容をググれば結構出てくるので、頑張って解決してみてください・・・。
2.gitクローンを接続する
新しいディレクトリを作成してGithubにクローンする方法と、Almalinux上にある既存のディレクトリをクローンする方法があるみたいですが、自分は前者の方法で成功したので、その方法で説明します。
まず、Githubで新しいリポジトリを作成します。公開非公開で変わるかは分かりませんが、自分は公開設定にしました。後リポジトリ名を入れるだけでそれ以外はデフォルト設定のまま作成しました。新しく作成したリポジトリを開いて右上のCodeからSSHのタブで赤い枠で囲まれているのをコピーします。
コピーしたら、ディレクトリをおきたいところまでcdで移動して
git clone git@github.com:<your-username>/<your-repo>.git
を入力します。そうしたら、新しく作成したリポジトリ名でフォルダができているはずです。
連携ができたら早速コミットしてみましょう。作成したフォルダの中にindex.htmlとphp.phpをコピーして、index.htmlの中身を変更して保存しましょう。すると。左のアイコンの真ん中にマークが着くと思います。そこを開いて、何かしらメッセージを入れてコミットの右の下矢印をクリックして「コミットしてプッシュ」を押してください。そうしたら、新しく作ったGithub上のリポジトリに変化が起こっているはずです。
まとめ
いかがでしょうか？？最後のGithubの連携は自分も手こずりすぎて細かく記録できておらず、説明が大雑把になってしまいました・・・。もし、修正箇所や意見があればできる限り修正します。これは、自分への備忘録も含めているので、そこはご了承を・・・。今、自分のWebサーバを建てるべくラズパイに頑張って向き合ってて、それも記録に残したいんですが、結構大変で無理かも。まあ、同じようなことやってる方がいれば参考にしていただければと。