Laravel Breezeで始めるWebアプリケーション構築

はじめに

日本システム開発株式会社の藤井といいます。
この記事ではWebアプリケーションの構築方法を説明しています。
最終的な目標はブラウザでLaravel Breezeのログイン画面を表示することです。
仮想環境を用意し、そこにミドルウェアを入れ設定を変更します。

コードブロック内の#から始まる行は説明です。

構成

サーバ構成

分類	製品	バージョン
OS	Amazon Linux	2
Webサーバ	Apache HTTP Server	2.4.54
アプリケーションサーバ	PHP-FPM	8.1.12
データベース	MySQL	8.0.31

アプリケーション構成

分類	製品	バージョン
フロントエンド	Node.js	16.19.0
バックエンド	PHP	8.1.12
PHPフレームワーク	Laravel	9.46.0

仮想環境の作成

Vagrant(2.3.4)とVirtualBox(7.0.4)を使います。
Vagrantのプラグインのvagrant-vbguest(0.31.0)をインストールしています。

未インストールの場合

• Vagrantのインストール ※Windowsを選択しAMD64をダウンロードします
• VirtualBoxのインストール
• BIOSで「Virtualization Technology」を有効化
• vagrant plugin install vagrant-vbguestでvagrant-vbguestのインストール
  ※Vagrantのインストール済みプラグインはvagrant plugin listで確認できます。

以下の内容でVagrantfileという名前のファイルを作成し、Vagrantfileのあるディレクトリでvagrant upを実行します。

Vagrant.configure("2") do |config|
  config.vm.box = "bento/amazonlinux-2"
  config.vm.network "private_network", ip: "192.168.33.13"
  config.vm.synced_folder ".", "/vagrant", owner: "vagrant", group: "vagrant"
end

内容としては

• 仮想マシンにbento/amazonlinux-2を使う
• 仮想マシンに192.168.33.13のアドレスを付与
• ホストの「.」と仮想マシンの「/vagrant」を共有

仮想マシンの起動に成功したら、vagrant sshでログインできます。
パスワードはvagrantです。

アプリケーション構築

phpのインストール

バージョン:8.1.12

①すべてのパッケージを更新

sudo yum update -y

②amazon-linux-extrasを使いphpをインストール

sudo amazon-linux-extras enable php8.1
sudo yum clean metadata
sudo yum install -y php-cli

③phpの拡張モジュールをインストール

sudo yum install -y php-xml php-mbstring php-bcmath php-pdo php-mysqlnd php-fpm

phpの拡張モジュールについて
php-xml php-mbstring php-bcmath php-pdoは、Laravelの必須な拡張モジュールです。
php-mysqlndはphpのmysqlドライバです。

④シェルでphpを実行出来たらインストール完了です。

php -v

Laravelのインストール

バージョン:9.46.0

①プロジェクトルートに移動
※「/vagrant」はホストとディレクトリを共有しています

cd /vagrant

②Composerのインストール
※LaravelのインストールにComposerを使います

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

③Laravelのインストール

# example-appという名前でプロジェクトを作成します
php composer.phar create-project laravel/laravel example-app

④シェルでartisan(LaravelのCLI)を実行出来たらインストール完了です。

cd example-app
php artisan --version

Apache HTTP Serverのインストール

バージョン:2.4.54

①Apache HTTP Serverのインストール

sudo yum install -y httpd
sudo systemctl start httpd

②ホストのブラウザで192.168.33.13にアクセスします。
ページが表示されたらインストール完了です。

MySQLのインストール

バージョン:8.0.31

①MySQL Yumリポジトリの追加

sudo curl -OL https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm
sudo yum install -y mysql80-community-release-el7-7.noarch.rpm
sudo yum update -y
rm mysql80-community-release-el7-7.noarch.rpm

②MySQLのインストール

sudo yum install -y mysql-community-server
sudo systemctl start mysqld

③MySQLが起動していたらインストール完了です。

systemctl status mysqld

MySQLのrootユーザのパスワード変更

①rootユーザの初期パスワード確認

# 出力されたメッセージの「root@localhost: 」の後に書いてあります
sudo grep 'temporary password' /var/log/mysqld.log

②rootユーザのパスワード変更

# パスワードを聞かれるので初期パスワードを入力します
mysql -u root -p

# rootユーザのパスワードをMyNewPass4!に変更します
ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyNewPass4!';
exit

③SQLが実行でき、データベース一覧が表示されれば変更完了です。

# パスワード:MyNewPass4!を入力してください
mysql -u root -p -e 'SHOW DATABASES;'

Node.jsのインストール

バージョン:16.19.0

①Node.js Yumリポジトリの追加

curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -

②Node.jsのインストール

sudo yum install -y nodejs

③シェルでnodeを実行出来たらインストール完了です。

node -v

Laravel Breezeのインストール

①Laravel Breezeのインストール

mv ../composer.phar .
php composer.phar require laravel/breeze --dev

②プロジェクトにLaravel Breezeリソースを追加

php artisan breeze:install

Laravel Breezeのセットアップ

データベース

①データベースを作成

# パスワード:MyNewPass4!を入力してください
mysql -u root -p -e 'CREATE DATABASE laravel'

# laravelが追加されていれば作成完了です
mysql -u root -p -e 'SHOW DATABASES;'

②Laravelの設定ファイル(.env)にパスワードを追記

- DB_PASSWORD=
+ DB_PASSWORD=MyNewPass4!

③テーブルの作成

# database/migrations/下の処理を実行します
php artisan migrate

フロントエンド

①ファイルシステムイベント監視の設定を変更

# Node.jsでファイルの変更を監視しているが、上限が低いため上げる
sudo sed -i '$a fs.inotify.max_user_watches=16384' /etc/sysctl.conf
sudo sysctl -p

②viteがlistenするipアドレスを指定

package.json

"scripts": {
-   "dev": "vite",
+   "dev": "vite --host 192.168.33.13",
    "build": "vite build"
}

Apache HTTP Serverのセットアップ

①設定を初期化できるよう初期設定ファイルを保存

sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.old

②設定ファイルを共有フォルダにコピー

cp /etc/httpd/conf/httpd.conf /vagrant

設定ファイルの変更

エディタを使い設定ファイルを編集します。

①サーバ名とドキュメントルートの変更、初期設定の削除

# 95行目
- #ServerName www.example.com:80
+ ServerName 192.168.33.13:80

# アプリケーションの配信元ディレクトリを設定します
- DocumentRoot "/var/www/html"
+ DocumentRoot "/vagrant/example-app/public"

# /var/wwwディレクトリは使わないため削除します
- <Directory "/var/www">
-     AllowOverride None
-     # Allow open access:
-     Require all granted
- </Directory>

②配信元ディレクトリの設定変更

- <Directory "/var/www/html">
+ <Directory "/vagrant/example-app/public">
    Options Indexes FollowSymLinks

    # .htaccessによる設定の上書きを許可します
-   AllowOverride None
+   AllowOverride All

    Require all granted

    # .phpで終わるファイルはphp-fpmで実行します
+   <FilesMatch "\.php$">
+       SetHandler "proxy:unix:/run/php-fpm/www.sock|fcgi://localhost"
+   </FilesMatch>
</Directory>

③ディレクトリが指定された時に配信するファイルを変更

<IfModule dir_module>
-   DirectoryIndex index.html
+   DirectoryIndex index.php
</IfModule>

④設定設定ファイルを上書きし、Apache HTTP Serverを再起動
※設定ファイルの改行コードがLFであることを確認する

sudo mv /vagrant/httpd.conf /etc/httpd/conf/
sudo systemctl restart httpd

起動に失敗した場合
sudo cp /etc/httpd/conf/httpd.conf.old /etc/httpd/conf/httpd.confで設定を初期化し、
Apache HTTP Serverのセットアップをやり直してください。

フロントエンドリソースの配布

①フロントエンドリソースを配布する簡易Webサーバを起動

npm run dev

フロントエンドリソースについて
開発環境ではnpm run dev、本番環境ではnpm run buildを使います。
開発環境では簡易Webサーバが立ち上がるため常時最新のリソースが配布されます。
本番環境ではコンパイルしたリソースをpublic下に配置するため、高速に配布できます。

Webアプリケーションへのアクセス

ホストのブラウザで192.168.33.13にアクセスします。
以下の画面が表示されたらWebアプリケーションの構築は完了です。

Webアプリケーションについて
右上のregisterからユーザ登録ができます。
ユーザ登録すると簡単なダッシュボードが表示されます。
登録したユーザでログイン画面からログイン可能です。