Laravelでブログサイトを作る 08. テーブル生成

設計について

設計はデータベース定義にて行っております。
これを、migrationに落とし込み、テーブルを作成します。
Laravelのmigrationについてはコチラを参考に。

親カテゴリmigrationファイル

createするテーブルのカラムについては、upメソッド内で設定します。
主キーを、デフォルトの$table->id();ではなく、increments('id')としています。
これは、$table->id()を使ってしまうと、BIGINT型になってしまうからです。
BIGINTの方が大量の上限値が上ですが、符号ありで考えても
INT型：約21億
BIGINT型：約922京(1000兆の922倍)
なので、個人運営サイトでわざわざBIGINTにするほどではないかなぁ、という考えです。
(とはいえ、ギリギリを詰めなければならない状況でもないので、MEDIUMINT型にもしていません)

対象ファイル：database/migrations/XXXX_XX_XX_XXXXXX_create_parent_categories_table.php

// ...省略...
    public function up()
    {
        Schema::create('parents', function (Blueprint $table) {
            $table->increments('id'); // 主キー(自動採番のINT型)
            $table->text('name'); // カテゴリ名
            $table->integer('number')->index(); // 表示順
            $table->softDeletes(); // ソフトデリートのためにNULL値可能なdeleted_at TIMESTAMPカラム追加
            $table->timestamps(); // NULL値可能なcreated_atとupdated_atカラム追加
        });
    }
// ...省略...

子カテゴリmigrationファイル

対象ファイル：database/migrations/XXXX_XX_XX_XXXXXX_create_child_categories_table.php

// ...省略...
    public function up()
    {
        Schema::create('parents', function (Blueprint $table) {
            $table->increments('id'); // 主キー(自動採番のINT型)
            $table->text('name'); // 子カテゴリ名
            $table->integer('number')->index(); // 表示順
            $table->integer('parent'); // 親カテゴリID
            $table->softDeletes(); // ソフトデリートのためにNULL値可能なdeleted_at TIMESTAMPカラム追加
            $table->timestamps(); // NULL値可能なcreated_atとupdated_atカラム追加
        });
    }
// ...省略...

記事migrationファイル

対象ファイル：database/migrations/XXXX_XX_XX_XXXXXX_create_articles_table.php

// ...省略...

public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->increments('id'); // 主キー(自動採番のINT型)
            $table->text('title'); // 記事タイトル
            $table->text('body'); // 本文
            $table->integer('parent')->index(); // 親カテゴリID
            $table->softDeletes(); // ソフトデリートのためにNULL値可能なdeleted_at TIMESTAMPカラム追加
            $table->timestamps(); // NULL値可能なcreated_atとupdated_atカラム追加

        });
    }

// ...省略...

記事-子カテゴリmigrationファイル

対象ファイル：database/migrations/XXXX_XX_XX_XXXXXX_create_article_children_table.php

// ...省略...
    public function up()
    {
        Schema::create('parents', function (Blueprint $table) {
            $table->increments('id'); // 主キー(自動採番のINT型)
            $table->integer('article')->index(); // 符記事ID
            $table->integer('children')->index(); // 子カテゴリID
            $table->softDeletes(); // ソフトデリートのためにNULL値可能なdeleted_at TIMESTAMPカラム追加
            $table->timestamps(); // NULL値可能なcreated_atとupdated_atカラム追加
        });
    }
// ...省略...

テーブル作成

サーバに接続し、以下のコマンドを実行します。

$ php artisan migrate

先述の4ファイルそれぞれで、MigratingとMigratedが表示され、テーブルが作成されます。
MySQLでテーブル一覧を表示すると、作成されていることが確認できます。

$ mysql -u root -p
Enter password: [コメント]設定したパスワードを入力(過去記事では`NEW_pass_123`を設定)

mysql> use blog
mysql> show tables;
+------------------------+
| Tables_in_blog         |
+------------------------+
| article_children       |
| articles               |
| children               |
| failed_jobs            |
| migrations             |
| parents                |
| password_resets        |
| personal_access_tokens |
| sessions               |
| team_invitations       |
| team_user              |
| teams                  |
| users                  |
+------------------------+
13 rows in set (0.00 sec)

Modelの編集

app/Models以下にあるファイルを、テーブルの構成に合わせて編集します。
記事(Article.php)をサンプルにします。

1. 論理削除のため、SoftDeletesを追加
2. 主キーのカラム名を追加
3. INSERTやUPDATE時に、入力値を保存するカラムを指定
4. 日時関係のカラムを指定

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes; // 【追加】1.論理削除用

class Article extends Model
{
    use HasFactory;
    use SoftDeletes; // 【追加】1.論理削除用

    // 【追加】2.主キー
    protected $primaryKey = 'id';

    // 【追加】3.入力値用カラム指定
    protected $fillable = ['title', 'body', 'parent'];

    // 【追加】2.日時系カラム
    protected $dates = ['created_at', 'updated_at', 'deleted_at'];
}

Laravelでブログサイトを作る 07. 開発準備

今回のゴール

ローカル環境に編集するファイルを用意し、動作の確認をしつつ開発できる環境を整えます。

開発環境

ホスト

• Windows11
• Phpstorm

開発サーバ

• VartualBox(CentOS)
• Laravel(PHP7.4)

ファイルの作成

各ファイルを作成するコマンドを先に実行し、今後編集するファイルをホスト側に持ってきます。

データベース定義

# [コメント]サーバ内の作業ディレクトリへ移動します
$ cd /home/vagrant/blog

# [コメント]記事migrationファイルとmodelファイルを作成
$ php artisan make:model Article --migration
# [コメント]親カテゴリ
$ php artisan make:model ParentCategory --migration
# [コメント]子カテゴリ
$ php artisan make:model ChildCategory --migration
# [コメント]記事-子カテゴリ
$ php artisan make:model ArticleChild --migration

# [コメント]Controllerは、「記事について」「親カテゴリについて」「子カテゴリについて」で用意
$ php artisan make:controller ParentCategoryController
$ php artisan make:controller ChildCategoryController
$ php artisan make:controller ArticleController

# [コメント]ファイルをホストOSとの共有領域へ移動(ここでコピーしたファイルをgit管理する)
$ cp composer.json /vagrant/
$ cp composer.lock /vagrant/
$ cp -r config /vagrant/
$ cp -r routes /vagrant/
$ cp -r resources /vagrant/
# [コメント]上記コマンドで作成したファイルを移動
$ mkdir -p /vagrant/database/migrations
$ cp database/migrations/*create_articles_table.php /vagrant/database/migrations
$ cp database/migrations/*create_parent_categories_table.php /vagrant/database/migrations
$ cp database/migrations/*create_child_categories_table.php /vagrant/database/migrations
$ cp database/migrations/*create_article_children_table.php /vagrant/database/migrations
$ mkdir -p /vagrant/app/Models/
$ cp app/Models/Article.php /vagrant/app/Models/
$ cp app/Models/ArticleChild.php /vagrant/app/Models/
$ cp app/Models/ChildCategory.php /vagrant/app/Models/
$ cp app/Models/ParentCategory.php /vagrant/app/Models/
$ mkdir -p /vagrant/app/Http/Controllers/
$ cp app/Http/Controllers/ArticleController.php /vagrant/app/Http/Controllers/
$ cp app/Http/Controllers/ParentCategoryController.php /vagrant/app/Http/Controllers/
$ cp app/Http/Controllers/ChildCategoryController.php /vagrant/app/Http/Controllers/

以上で、ローカルの作業領域にファイルがそれぞれ存在するようになりました。

ホスト→ゲストのDocumentRoot内への共有

続いて、編集したファイルがそのままゲストの「/home/vagrant/blog」に展開されるようにします。
Phpstormの方法を解説していますが、他のIDEやエディタにも同様の機能を有しているものはあると思うので、「絶対にPhpstormでなきゃダメ」ではないはずです。

• 1. 設定ウィンドウを開く(Ctrl + Alt + S)
• 2. 「Build,Execution,Deployment」をクリック
• 3. 「Deployment」をクリック
• 4. 「SSH configuration」横の「...」をクリック

• 5. 「Host」「User name」「Password」を入力
  • 「Test Connection」ボタンを押し、接続確認しておきます

• 6. 「Autodetect」をクリック
  • 左側の欄に/home/vagrantが表示されます

• 7. 「Mappings」タグをクリック
• 8. 「Deployment path」にblog/を入力
• 9. 「Apply」をクリックして適用

• 10. 「Options」をクリック
• 11. 「Upload...」の値を、以下のいずれかに設定します
  • Always(常に)
  • On explicit save action(Ctrl+S)(Ctrl+S押した時)

更新コマンド集約シェルの作成

上記のホスト→ゲストのDocumentRoot内への共有の動作確認がてらに、キャッシュクリアのコマンドをひとまとめにしたshファイルを作成します。
名前は、update.shとしています。

#!/bin/sh

php artisan cache:clear
php artisan config:clear
php artisan config:cache
php artisan route:clear
php artisan view:clear
php artisan clear-compiled
php artisan optimize
composer dump-autoload
rm -f bootstrap/cache/config.php
sudo -- sh -c "systemctl restart httpd"

こちらのファイルを作成し、Ctrl+Sを叩くと、仮想サーバのDocumentRoot配下にupdate.shファイルが確認できるはずです。

$ ls /home/vagrant/blog/

Laravelでブログサイトを作る 06. Laravelに認証機能を導入

はじめに

前回の作業を完了し、http://192.168.56.10/にアクセスすると、Laravelのwelcome画面が表示されることを前提に進めます。

導入

認証には、Laravel Jetstreamを使用します。
インストールは、composerとnpmを使用して行います。

# [コメント]サーバ内の作業ディレクトリへ移動します
$ cd /home/vagrant/blog

# [コメント]インストール実行
$ composer require laravel/jetstream
$ php artisan jetstream:install livewire --teams
$ npm install
$ npm run dev

# [コメント]必要なテーブルを作成します
$ php artisan migrate

ユーザの登録

http://192.168.56.10/registerにアクセスすると、登録画面が表示されます。

名前、メールアドレス、パスワードを入力し、「REGISTER」ボタンをクリックすれば登録は完了です。

http://192.168.56.10/loginからログインできるか試してみましょう。

2要素認証

2要素認証（メールアドレスとパスワードの知識要素と、スマートフォンを使った所有要素）でのログイン制御が可能です。それも、かなり簡単に。

1. アプリインストール【スマートフォン側で作業】

公式が案内している、「Google Authenticator application」をスマートフォンにインストールします。
Android：Google認証システム
iPhone：Google Authenticator
名前は違いますが、どちらも同様のアプリ、のはずです。（私がiPhoneを所有していないので、そちらは未確認です）
インストールしただけではまだ何もできないので、そのままスマートフォンは一旦置いておきます。

2. サイトのユーザ設定を変更【PC側で作業】

ログイン後、ダッシュボードの右上から「Profile」を選択します。

「Two Factor Authentication」のところで、ENABLEをクリックします。

3. アプリを起動し、QRコード読み込み【スマートフォン側で作業】

アプリを起動し、「QRコードをスキャン」を選択します。
後は、上記2の後に表示されたQRコードを、カメラで読み取ります。

「アカウント追加」ボタンを押しておけば、アプリにこのサイトが記憶されます。
これで、準備は完了です。

4. ログインしてみる【PC側で作業】

試しに、一度ログアウトして、もう一度ログインします。
メールアドレスとパスワードを入力してログインボタンを押すと

コードの入力画面が表示されます。

ここに、アプリで表示される6桁の数字を入力することで、初めてログインが完了するようになりました。

ユーザの登録をできないようにする

今回制作するのは、自分だけが管理画面にアクセスできれば良いので、登録画面へのアクセスをできなくしてしまいます。
config/fortify.phpの最後の方にある、Features::registration(),の行をコメントアウトしてしまいます。
すると、登録画面にアクセスしても、404 NOT FOUNDになります。
他のメニューも、必要に応じてコメントアウトしても構わないでしょう。

    'features' => [
        //Features::registration(), // 登録。今回コメントアウトするもの。
        Features::resetPasswords(), // パスワードリセット。
        // Features::emailVerification(), // メール認証。デフォルトでコメントアウト済み。
        Features::updateProfileInformation(), // プロフィール更新。
        Features::updatePasswords(), // パスワードの更新。
        Features::twoFactorAuthentication([ // 2段階認証
            'confirmPassword' => true,
        ]),
    ],

Laravelでブログサイトを作る 05. Laravel開発環境の用意

はじめに

Windows11環境に、VirtualBox+Vagrantを使用して環境を作成します。
上記の環境構築方法については前回を御覧ください。

仮想環境に導入するもの

• CentOS 7.9
• PHP 7.4
• MySQL 8.0
• composer 2.1
• git 1.8.3.1
• nodejs 16.13.1

Vagrantfile

vagrantを利用して仮想サーバを作成します。
今回使用するVagrantfileは以下になります。

Vagrant.configure("2") do |config|
    # Box名
    config.vm.box = "CentOS7"

    # ホストオンリーの設定にIPを指定します。ブラウザからアクセスする時等は以下のIPです。
    config.vm.network "private_network", ip: "192.168.56.10"

    # メモリ（数値は自分の環境と相談）
    config.vm.provider "virtualbox" do |vb|
        vb.customize ["modifyvm", :id, "--memory", "1024"]
    end

    # Windows側のファイルを、仮想サーバに認識させる
    # 作業ディレクトリのファイルを、仮想サーバ内では`/vagrant`として扱うようにする
    config.vm.synced_folder ".", "/vagrant", mount_options:['dmode=777','fmode=777']

    # 初回起動時に実行
      config.vm.provision "shell", inline: <<-SHELL
        # タイムゾーン・言語設定の変更
        timedatectl set-timezone Asia/Tokyo
        localectl set-locale LANG=ja_JP.utf8

        # 更新
        yum -y update
        yum -y update kernel
      SHELL

    # 再起動（vagrant-reloadプラグイン必須）
    config.vm.provision "reload"

    # 初回に実行するコマンド(環境を構築する)
    config.vm.provision "shell", inline: <<-SHELL
        # apacheインストール
        yum -y install httpd

        # 邪魔なapache設定を削除
        rm /etc/httpd/conf.d/welcome.conf

        # PHPインストール
        yum -y install epel-release
        rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
        yum -y install --enablerepo=remi,remi-php74 php php-devel php-bcmath php-mbstring php-pdo php-gd php-xml php-mcrypt php-mysql

        # PHP設定調整
        sed -i -e "s/memory_limit = 128M/memory_limit = 1024M/g" /etc/php.ini
        sed -i -e "s/;date.timezone =/date.timezone = Asia\/Tokyo/g" /etc/php.ini
        sudo chmod 777 /var/lib/php/ssession/

        # MySQLインストール
        yum -y localinstall https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
        yum -y install mysql-community-server

        # MySQL認証方式の指定
        echo 'default-authentication-plugin = mysql_native_password' >> /etc/my.cnf

        # apache/MySQL自動起動設定
        systemctl enable httpd.service
        systemctl enable mysqld

        # ファイアウォール停止
        systemctl stop firewalld
        systemctl disable firewalld

        # composerインストール
        php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
        php composer-setup.php
        php -r "unlink('composer-setup.php');"
        mv composer.phar /usr/local/bin/composer

        # gitインストール
        yum -y install git

        # unzipインストール
        yum -y install unzip

        # Node.js(npm)インストール(yumで古いバージョンを取得→nで新しいものを取得→古い方を削除)
        yum -y install nodejs npm
        npm install -g n
        n stable
        yum -y remove nodejs npm
    SHELL

    # 再起動
    config.vm.provision "reload"
end

サーバ内作業

vagrant sshでサーバ内に入って、以下の作業を行えば開発環境の構築は完了です。

$ pwd
/home/vagrant

# [コメント] apache設定の調整
$ sudo sed -i -e "s/User apache/User vagrant/g" /etc/httpd/conf/httpd.conf
$ sudo sed -i -e "s/Group apache/Group vagrant/g" /etc/httpd/conf/httpd.conf
$ sudo sed -i -e "s/DirectoryIndex index.html/DirectoryIndex index.php index.html/g" /etc/httpd/conf/httpd.conf
$ sudo sed -i -e "s/\/var\/www\/html/\/home\/vagrant\/blog\/public/g" /etc/httpd/conf/httpd.conf
$ sudo sed -i -e "s/AllowOverride None/AllowOverride All/g" /etc/httpd/conf/httpd.conf

# [コメント] Laravelインストーラ取得
$ composer global require laravel/installer
$ echo "export PATH=~/.config/composer/vendor/bin:$PATH" >> ~/.bash_profile
$ source ~/.bash_profile

# [コメント] Laravelプロジェクト作成
$ laravel new blog

# [コメント] デフォルトパスワードを表示
$ sudo grep "A temporary password is generated" /var/log/mysqld.log | sed -s 's/.*root@localhost: //'

# [コメント] rootパスワードを設定、データベース作成
# [コメント] パスワードを求められるので、一手前で表示させたデフォルトパスワードを使用する
$ mysql -uroot -p --connect-expired-password -e "ALTER USER 'root'@'localhost' IDENTIFIED BY 'NEW_pass_123'; flush privileges;CREATE DATABASE blog;"

# [コメント] ENVにMySQLパスワードを設定
$ sed -i -e "s/DB_PASSWORD=/DB_PASSWORD=NEW_pass_123/g" /home/vagrant/blog/.env

# [コメント] apache再起動
$ sudo systemctl restart httpd

動作確認

http://192.168.56.10/にアクセスし、Laravelのwelcome画面が表示されたら無事、構築完了です。

Laravelでブログサイトを作る 04. 仮想環境の立ち上げ

主目的

Windows11環境で、VirtualBoxとvagrantを使えるようにする。

使用PC

acer Spin 5

事前にインストール済みのもの

Git for Windows
※コマンドを打つためにGit Bashが欲しくてインストールしています。

仮想化支援機構の有効化

BIOS起動

1. スタートボタンを右クリックし、「設定」をクリックします
2. 左メニューの「システム」を選択します
3. 下の方にある「回復」をクリックします
4. PCの起動をカスタマイズするの項目にある「今すぐ再起動」をクリックします
5. 再起動するかを問われるので、「今すぐ再起動」をクリックします
   これで、再起動後にBIOSが立ち上がります。

設定変更

Advancedにある、「Intel VD○」をEnabledにします。
変更後、Escキーを押して設定を保存し、再起動します。

VirtualBox と Vagrant のインストール

VirtualBox

ダウンロードページ：https://www.virtualbox.org/wiki/Downloads
バージョンは、導入時の最新だった6.1.30です。
ダウンロードページから、Windows hosts（使用しているOS）を選択。
ダウンロード完了後、インストーラを起動し、案内に従えばインストール完了。

Vagrant

ダウンロードページ：https://www.vagrantup.com/
こちらは、導入時バージョン2.2.19です。
こちらも、ダウンロード後はインストーラからインストールします。

Vagrantを使って仮想環境立ち上げ

Boxの入手

Boxとは？

乱暴に言うと「OSのisoイメージ」みたいなもの。
CentOS7のBoxを使えば、CentOS7の仮想サーバを作れます。
当然ながら、環境構築したBoxを自分で作ることもできます。

Boxの追加

vagrant boxリストから使いたいOSのBoxを探し、取得します。
Searchにキーワードを入力すれば絞り込めるので、ProviderがVirtualBoxの、希望のバージョンのURLをこの後に使います。
一度追加すれば、以降は何度でも作れます。

コマンドはvagrant box add [URL] --name [名前(自由入力)]です。
例えば、CentOS7を使いたい場合は、Windows PowerShellを起動し、

vagrant box add CentOS7 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.1.0/centos-7.0-x86_64.box

作業ディレクトリの作成とVagrantfileの起動

今回は、C:\workspace\blogで作業します。適宜読み変えて頂くようお願いします。

個人的な好みから、Git Bash（Git for Windows導入時に）で作業しています。

# [コメント]作業ディレクトリを作成し、そこへ移動
$ mkdir -p /c/workspace/blog
$ cd /c/workspace/blog

# [コメント]Vagrantfileの作成（初期化）
$ vagrant init CentOS7

# [コメント]起動
$ vagrant up

ここでエラーが出ました

SSH auth method: private keyのところで、以下のメッセージを出力して止まってしまいました。

Timed out while waiting for the machine to boot. This means that
Vagrant was unable to communicate with the guest machine within
the configured ("config.vm.boot_timeout" value) time period.

If you look above, you should be able to see the error(s) that
Vagrant had when attempting to connect to the machine. These errors
are usually good hints as to what may be wrong.

If you're using a custom box, make sure that networking is properly
working and you're able to connect to the machine. It is a common
problem that networking isn't setup properly in these boxes.
Verify that authentication configurations are also setup properly,
as well.

If the box appears to be booting properly, you may want to increase
the timeout ("config.vm.boot_timeout") value.

メッセージは、「タイムアウトしちゃったから、原因を特定して対処してね。正常なはず、って時はタイムアウト時間の設定値を伸ばしてね」ということ。
これが発生するのは、Windowsの場合はHyper-Vが有効になっている可能性が考えられます。
コマンドプロンプトを管理者権限で立ち上げます。

# [コメント] 現在の設定状況を確認します。「Auto」が表示される場合、有効な状態です。
> bcdedit /enum | find "hypervisorlaunchtype"
hypervisorlaunchtype    Auto

# [コメント] Hyper-Vを無効化します。
bcdedit /set hypervisorlaunchtype off

# [コメント] Windowsを再起動します。
> shutdown /r /t 0

# [コメント] 再起動後、もう一度設定状況を確認すると、きちんと無効になっています。
> bcdedit /enum | find "hypervisorlaunchtype"
hypervisorlaunchtype    Off

仮想サーバの確認

vagrant sshコマンドを利用して、SSH接続します。正常に接続できることをもって、起動確認とします。
なお、パスワードは「vagrant」です。

$ vagrant ssh
vagrant@127
127.0.0.1's password: 
Last login: XXX XXX XX XX:XX:XX XXXX from XXX.XXX.XXX.XXX
Welcome to your Vagrant-built virtual machine.
[vagrant@localhost ~]$

確認環境の破棄

今回立ち上げた環境は、あくまで「仮想サーバを作れるか」を確認するためのものですので、今後は不要になります。
なので、破棄しておきます。

# [コメント] `Ctrl + D`でログアウト
[vagrant@localhost ~]$ Abgemeldet.
Connection to 127.0.0.1 closed.

# [コメント] 停止
$ vagrant halt

# [コメント] 破棄
$ vagrant destroy

プラグインインストール

今後使用することになるvagrantのプラグインをインストールします。

1. vagrant-reload
   • 環境を自動構築する際に再起動を可能とするためのプラグイン
2. vagrant-vbguest
   • ホストとゲストの、GuestAdditionsのバージョンを自動で合わせてくれるプラグイン

$ vagrant plugin install vagrant-reload
$ vagrant plugin install vagrant-vbguest