0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた!(その5)

0. 初めに

前回まででプロジェクトのディレクトリ作成及びDockerコンテナ作成が完了しました。
今回は、ついにLaravelをインストールしたいと思います!

1. Laravelインストール

Dockerコンテナ内に移動する

まずは、コンテナを立ち上げていない場合は、Docker Desktopでproject-rootの「start」ボタンを押して、コンテナを立ち上げましょう。

次に、Ubuntuを開いて、以下のコマンドを実行します。

$ docker ps

image.png
コンテナが立ち上がっていることが確認できます。

現状はまだ、ホスト側(あなたのPCのディレクトリ)にいるので、これからDockerコンテナ内の作業ディレクトリの中に入って、作業をします。

$ docker exec -it php-lab bash

こちらのコマンドで、phpのコンテナ内に入ることができます。
php-labの部分は先ほど確認したコンテナ一覧の一番右側のNAMESのところから、phpのコンテナ名(前回docker-compose.ymlで設定した)のところからコピペしています。

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
前回Dockerfileで設定した以下の作業ディレクトリに入ることができました。

Dockerfile
# 作業ディレクトリ
WORKDIR /var/www #←これ!

Composerを使ってLaravelをインストールする

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

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

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

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

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

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

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

先ほどphpのコンテナ内に入ることに成功したら、現在いるディレクトリが正しいことを確認して、以下のコマンドを実行しましょう!

/var/www
$ composer create-project --prefer-dist laravel/laravel=11 .

これで、Laravelのインストールができます!
※ちなみに復習ですが、「.」というのは相対パスで現在位置を表すのでした。
image.png
VS Codeでsrc/配下を見てみると、いろいろとフォルダができています!
これが、Laravelのプロジェクトフォルダです。

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

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のコンテナ内にいる場合は、そのままの位置で以下のコマンドを順に実行します。

/var/www
$ cp .env.example .env
/var/www
$ php artisan key:generate

何をしたかを解説します。

上のコマンドでは、src/配下に.envファイルを作成しました。
「.envファイルは前にも作っただろ!」と思うかもしれませんね...
実は、この前作ったのはproject-root直下の.envで、今作ったのはsrc/の下の.envです。
image.png
よく見ると.envが二つあることが分かります。
新しく作った方は、Laravelの設定ファイルです。
ここにも環境変数と呼ばれる設定を書きます。

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

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

3. localhostアクセス

前回、nginxのコンテナも立ち上げたので、実はもうLaravelのアプリをWebサイトとしてブラウザで開いて見ることができます!
以下を開いてLaravelのページが正しく開けることを確認しましょう!
http://localhost
スクリーンショット 2025-05-07 192855.png
※画像のURLが若干異なりますが、気にしないでください。

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

地元のホストではないですよ!
image.png

※もしエラーで見られない場合は...

最初は、権限系のエラーで画面が見られないことがあると思います。
前回参考にした記事によると、以下のコマンドを実行すると解消されるようです。
一度コンテナの外に出てsrcで実行しましょう

project-root/src
$ sudo chown -R www-data ./sample/storage
project-root/src
$ sudo chown -R www-data ./sample/bootstrap/cache

これでエラーが解消されればよいのですが、僕の場合だと解消されませんでした。
そこで、以下のようにユーザー名を直書きして実行するとうまくいきました。

project-root
$ sudo chown -R <僕のユーザー名> ./sample/storage
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のコンテナに入ります。

$ docker exec -it php-lab bash

入ったら、以下のコマンドでデータベース接続ができているかを確認しましょう!

/var/www
$ php artisan migrate

こうなっていれば、たぶんOK!
もしかしたら、人によって、挙動が変わるかもしれません。
image.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リポジトリ接続」でついに環境構築編も最後です!
もうひと踏ん張りしましょう!

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

これまでの記事一覧

その1: 要件定義・設計編
その2: 環境構築編① ~WSL, Ubuntuインストール~
その3: 環境構築編② ~Docker Desktopインストール~
その4: 環境構築編③ ~Dockerコンテナ立ち上げ~

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?