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)をインストールしています。

:::note warn
未インストールの場合

- [Vagrantのインストール](https://developer.hashicorp.com/vagrant/downloads) ※Windowsを選択しAMD64をダウンロードします
- [VirtualBoxのインストール](https://www.virtualbox.org/wiki/Downloads)
- BIOSで「Virtualization Technology」を有効化
- `vagrant plugin install vagrant-vbguest`でvagrant-vbguestのインストール
※Vagrantのインストール済みプラグインは`vagrant plugin list`で確認できます。
:::

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

```ruby
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

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

```bash
sudo yum update -y
```

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

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

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

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

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

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

```bash
php -v
```

### Laravelのインストール

バージョン:9.46.0

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

```bash
cd /vagrant
```

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

```bash
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のインストール

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

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

```bash
cd example-app
php artisan --version
```

### Apache HTTP Serverのインストール

バージョン:2.4.54

①Apache HTTP Serverのインストール

```bash
sudo yum install -y httpd
sudo systemctl start httpd
```

②ホストのブラウザで192.168.33.13にアクセスします。  
ページが表示されたらインストール完了です。
![screen_shot_2023-01-07_150738.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629702/9296b653-69c2-d911-ea72-64c06bf8876c.png)

### MySQLのインストール

バージョン:8.0.31

①MySQL Yumリポジトリの追加

```bash
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のインストール

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

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

```bash
systemctl status mysqld
```

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

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

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

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

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

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

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

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

### Node.jsのインストール

バージョン:16.19.0

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

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

②Node.jsのインストール

```bash
sudo yum install -y nodejs
```

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

```bash
node -v
```

### Laravel Breezeのインストール

①Laravel Breezeのインストール

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

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

```bash
php artisan breeze:install
```

#### Laravel Breezeのセットアップ

##### データベース

①データベースを作成

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

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

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

```diff
- DB_PASSWORD=
+ DB_PASSWORD=MyNewPass4!
```

③テーブルの作成

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

##### フロントエンド

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

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

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

package.json

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

### Apache HTTP Serverのセットアップ

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

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

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

```bash
cp /etc/httpd/conf/httpd.conf /vagrant
```

#### 設定ファイルの変更

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

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

```diff_conf
# 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>
```

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

```diff_conf
- <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>
```

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

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

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

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

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

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

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

```bash
npm run dev
```

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

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

ホストのブラウザで192.168.33.13にアクセスします。
以下の画面が表示されたらWebアプリケーションの構築は完了です。
![screenshot_2023-01-07_152317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629702/bde077a9-6656-b6ce-1e6e-a7ff176a265a.png)

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