実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（環境構築編④）~Laravelインストール~

# 実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その５）

## 0. 初めに
[前回](https://qiita.com/ArakiPhp/items/01cca09c7b9ea75ea1a6)まででプロジェクトのディレクトリ作成及びDockerコンテナ作成が完了しました。
今回は、ついにLaravelをインストールしたいと思います！

## 1. Laravelインストール
### Dockerコンテナ内に移動する
まずは、コンテナを立ち上げていない場合は、Docker Desktopでproject-rootの「start」ボタンを押して、コンテナを立ち上げましょう。

次に、Ubuntuを開いて、以下のコマンドを実行します。
```Ubuntu:
$ docker ps
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/ef2f6778-1122-4e05-8191-1eb1499a6d7e.png)
コンテナが立ち上がっていることが確認できます。

現状はまだ、ホスト側（あなたのPCのディレクトリ）にいるので、これからDockerコンテナ内の作業ディレクトリの中に入って、作業をします。
```Ubuntu:
$ docker exec -it php-lab bash
```
こちらのコマンドで、phpのコンテナ内に入ることができます。
php-labの部分は先ほど確認したコンテナ一覧の一番右側のNAMESのところから、phpのコンテナ名（前回docker-compose.ymlで設定した）のところからコピペしています。
```YAML:docker-compose.yml
php:
    build:
      context: ./docker-config/php
      args:
        USER_NAME: ${USER_NAME}
        GROUP_NAME: ${GROUP_NAME}
        USER_ID: ${USER_ID}
        GROUP_ID: ${GROUP_ID}
    container_name: "php-lab" # ←ここで設定しましたよ！
    ports:
      - 5173:5173
    volumes:
      - ./src:/var/www
    user: ${USER_NAME}
```

もし、docker-compose.ymlで違う名前を設定している場合は、それをコピペしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/1b0a47ce-a342-4803-9c04-b5a2ae955a0f.png)
前回Dockerfileで設定した以下の作業ディレクトリに入ることができました。
```Dockerfile:Dockerfile
# 作業ディレクトリ
WORKDIR /var/www #←これ！
```

### Composerを使ってLaravelをインストールする
今回は、**Composer**という依存関係管理ツールを使って、Laravelをインストールしたいと思います。

「依存関係管理ツール」と聞くと難しそうに聞こえます。
簡単に言うと、Laravelで開発をするのに必要なライブラリなどを管理することができます。「ライブラリ」という言葉も難しいですね💦

今インストールしたいLaravelというのは、phpという言語の**フレームワーク**と呼ばれているものです。
Laravelのようなフレームワークは、Web開発でよく使われる様々な機能（例えば、データベースへの接続、画面の表示、ユーザーの管理など）を、あらかじめ便利な部品として用意してくれています。これらの部品の一つ一つが、**ライブラリ**と呼ばれることが多いです。

ライブラリは、phpのコードの集まりで、便利な機能を実現しており、再利用が可能（一から作らなくてもよい）です。

例えるなら、フレームワークは料理をするためのキッチン付きの作業台、ライブラリは包丁やまな板、調味料などの道具のようなものです。作業台（フレームワーク）には基本的な設備が整っていて、道具（ライブラリ）を使うことで、様々な料理（Webアプリケーション）を効率的に作ることができます。

Composerは、Laravelが動作するために必要となるたくさんのライブラリを、インターネット上から自動的にダウンロードしてきてくれます。
さらに、これらのライブラリ同士がどのように連携しているか（依存関係）も管理してくれるため、「このライブラリを使うためには、このバージョンの別のライブラリが必要」といった複雑な問題を自動的に解決してくれます。

難しいかもしれませんが、要はcomposerを用いると、Laravelをスムーズにインストールすることができるということです！

先ほどphpのコンテナ内に入ることに成功したら、現在いるディレクトリが正しいことを確認して、以下のコマンドを実行しましょう！
```bash:/var/www
$ composer create-project --prefer-dist laravel/laravel=11 .
```
これで、Laravelのインストールができます！
※ちなみに復習ですが、「.」というのは相対パスで現在位置を表すのでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/0996efd6-e0b6-498f-b855-63bcc0f3166e.png)
VS Codeでsrc/配下を見てみると、いろいろとフォルダができています！
これが、Laravelのプロジェクトフォルダです。

では、なぜこれでsrc/にLaravelがインストールされるのかと言いますと、ボリュームでDockerコンテナ内の作業ディレクトリとホスト側のsrc/がマウントされるようにdocker-compose.ymlに設定したからでした！

```YAML:docker-compose.yml
php:
    build:
      context: ./docker-config/php
      args:
        USER_NAME: ${USER_NAME}
        GROUP_NAME: ${GROUP_NAME}
        USER_ID: ${USER_ID}
        GROUP_ID: ${GROUP_ID}
    container_name: "php-lab"
    ports:
      - 5173:5173
    volumes:
      - ./src:/var/www # ←ここでマウントを設定しました！
    user: ${USER_NAME}
```
「:」の左右にそれぞれホスト側のディレクトリとコンテナ内のディレクトリを書くことで、接続している感じです。

## 2. アプリキー生成
次に、アプリキーというものを生成します。
phpのコンテナ内にいる場合は、そのままの位置で以下のコマンドを順に実行します。
```bash:/var/www
$ cp .env.example .env
```
```bash:/var/www
$ php artisan key:generate
```
何をしたかを解説します。

上のコマンドでは、src/配下に.envファイルを作成しました。
「.envファイルは前にも作っただろ！」と思うかもしれませんね...
実は、この前作ったのはproject-root直下の.envで、今作ったのはsrc/の下の.envです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/0e58bd5f-3d57-494c-b2b3-70cc322f52f0.png)
よく見ると.envが二つあることが分かります。
新しく作った方は、Laravelの設定ファイルです。
ここにも環境変数と呼ばれる設定を書きます。

ちなみにですが、envというのはたぶん、**environment**(環境)という英単語の略です。
Laravel全般にかかわる環境を設定することができます。

下のコマンドでは、アプリキーを生成しています。
これは、いくつかの用途に使用されますが、とりあえず、セキュリティのためのものと思ってください。これを設定しておかないとアプリがうまく動かなことがあります。
.envファイルを開いてみると、「APP_KEY=」みたいな感じで追加されていると思います。

## 3. localhostアクセス
前回、nginxのコンテナも立ち上げたので、実はもうLaravelのアプリをWebサイトとしてブラウザで開いて見ることができます！
以下を開いてLaravelのページが正しく開けることを確認しましょう！
http://localhost
![スクリーンショット 2025-05-07 192855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/79de9813-3b76-4987-b42d-6fd7441f1e35.png)
※画像のURLが若干異なりますが、気にしないでください。

おめでとうございます！
「Webサイトととして」表示するとは言いましたが、正確にはこれはローカルホストと言って、環境構築したPCでしか見られません。
なので、URLを共有して誰か他の人に見せたりすることはまだできません。(>_<)

地元のホストではないですよ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/3d5fc1eb-0a2f-4511-b26c-f7f07ad7399f.png)

### ※もしエラーで見られない場合は...
最初は、権限系のエラーで画面が見られないことがあると思います。
[前回参考にした記事](https://note.com/kiamotomonic/n/n4236e7cbc76c)によると、以下のコマンドを実行すると解消されるようです。
一度コンテナの外に出てsrcで実行しましょう
```Ubuntu:project-root/src
$ sudo chown -R www-data ./sample/storage
```
```Ubuntu:project-root/src
$ sudo chown -R www-data ./sample/bootstrap/cache
```
これでエラーが解消されればよいのですが、僕の場合だと解消されませんでした。
そこで、以下のようにユーザー名を直書きして実行するとうまくいきました。
```Ubuntu:project-root
$ sudo chown -R <僕のユーザー名> ./sample/storage
```
```Ubuntu:project-root
$ sudo chown -R <僕のユーザー名> ./sample/bootstrap/cache
```
もしかしたら、人によって結果が変わるかもしれません。
いろいろと試してみてください。

## 4. MariaDB設定
あと少しです！
データベースと接続できるようにしましょう！

src/.envの一部を修正します。
```.env src
DB_CONNECTION=mysql
DB_HOST=mariadb-lab
DB_PORT=3306
DB_DATABASE=development
DB_USERNAME=admin
DB_PASSWORD=secret
DB_CHARSET=utf8mb4
DB_COLLATION=utf8mb4_unicode_ci
```
データベースの名前やユーザー名、パスワード等をLaravel側で設定しています。
一応、project-rootの方の.env内の記述と同じか確認しましょう。
```.env
MYSQL_DATABASE=development
MYSQL_ROOT_PASSWORD=secret
MYSQL_USER=admin
MYSQL_PASSWORD=secret
```
できたら、phpのコンテナに入ります。
```Ubuntu:
$ docker exec -it php-lab bash
```
入ったら、以下のコマンドでデータベース接続ができているかを確認しましょう！
```bash:/var/www
$ php artisan migrate
```
こうなっていれば、たぶんOK！
もしかしたら、人によって、挙動が変わるかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075450/1e77a5e3-d936-4d0d-93f3-0801f7a75523.png)


先ほど、このコマンドは「データベース接続ができているかを確認する」ためのコマンドと言いましたが、厳密には違います。
これはLaravelのマイグレーションという便利機能で、テーブルを作成してくれる機能です。詳しくは、実装編で解説しますので、今は「なんかやってんな」くらいでOKです！

また、さっきからちらほら「artisan」というコマンドが出てきていますが、これはLaravel専用のコマンドで、頻繁に使います！
実装編でも色々出てくると思いますので、その時にマイグレーションと合わせて解説します！

## 5. その他設定
これで最後です！お疲れのところすみません💦
src/.envを一部変更して、各種設定を行います。
```:src/.env
APP_NAME=lab-review # 変更
APP_ENV=local
APP_KEY=ここは秘密です♡
APP_DEBUG=true
APP_TIMEZONE=Asia/Tokyo # 変更
APP_URL=http://localhost

APP_LOCALE=ja # 変更
APP_FALLBACK_LOCALE=ja # 変更
APP_FAKER_LOCALE=ja_JP # 変更

APP_MAINTENANCE_DRIVER=file
APP_MAINTENANCE_STORE=database

BCRYPT_ROUNDS=12

LOG_CHANNEL=daily # 変更
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

# 修正
DB_CONNECTION=mysql
DB_HOST=mariadb-lab
DB_PORT=3306
DB_DATABASE=development
DB_USERNAME=admin
DB_PASSWORD=secret
DB_CHARSET=utf8mb4
DB_COLLATION=utf8mb4_unicode_ci

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database

CACHE_STORE=database
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

VITE_APP_NAME="${APP_NAME}"

```

## 6. まとめ・次回予告
今回も長かったですね💦
Composerを使って、Laravelをインストールして、ローカルホストで表示できるようにしました！また、データベースと接続できるようにしました！！

次回の「Gitリポジトリ接続」でついに環境構築編も最後です！
もうひと踏ん張りしましょう！

最後まで読んでくださってありがとうございました!!

## これまでの記事一覧
・[その１: 要件定義・設計編](https://qiita.com/ArakiPhp/items/3406a08b3291a32e315b)
・[その２: 環境構築編① ~WSL, Ubuntuインストール~](https://qiita.com/ArakiPhp/items/f3ae293bd155b3ef2f06)
・[その３: 環境構築編② ~Docker Desktopインストール~](https://qiita.com/ArakiPhp/items/802a5c78ec8d5a049d09)
・[その４: 環境構築編③ ~Dockerコンテナ立ち上げ~](https://qiita.com/ArakiPhp/items/01cca09c7b9ea75ea1a6)