LEMP環境で、Next.js(TypeScript)とLaravel(PHP)を利用して、勤怠管理アプリを作成してみる。〜環境構築編〜

前回は、PHPとReact(TypeScript)を使って、簡単な掲示板アプリを作成しました。

今回は、そこから発展させて、勤怠管理アプリを作っていきたいと考えています。

PHPは、フレームワークを使わず作成していましたが、今回は、

ルーティング、認証、セッション管理、キャッシュ、メール送信など、多くのWebアプリケーションに必要な機能が備わっているphpのフレームワークである<font color=red>**Laravel**</font>と


React(typescript)のフレームワークであるサーバーサイドのAPIエンドポイントを簡単に構築可能で、バックエンドとフロントエンドを統合したフルスタック開発が可能な<font color=blue>**Next.js**</font>を使用して、

作成していきたいと考えています。

まずは、アプリ名を「attendance」にするので、

ターミナルで、
```
$ mkdir attendance　
```
<font color=red>※ $マークは、コマンドライン(ターミナル)での入力を意味しているので、無視してください。</font>

と入力してください。

そして、attendanceディレクトリ内に勤怠管理アプリを作成するので、ターミナルにて、
```
$ cd attendance
```
とコマンドを打って、入ってください。

Laravelを使うには**PHP**や**Composer**が必要です。

環境が整っていない場合は、こちらのサイトを利用してください。

macの場合だと、

**Homebrew**を使ったインストールをしてみるといいです。

Homebrewがインストールされていない場合、以下を実行してインストールします。

```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
その後、HomebrewでPHPをインストールするには、

```
$ brew install php
```

と入力してください。
```
$ php -v
```
と入力して、

![AD_4nXcLf4tceXeNGq4r1vNW9Wn38c0CpXAx_6JLmBKMLPLoqGSiKhByXBMZuHXjQcFzW2WsmyTLegyftWMA2KvAedorDwO-4Yq7_7zy8db5dMQUSvjQVteIme52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/9787cfa6-594f-0b0a-afdb-2d2851812419.png)

上の画像のようなメッセージが帰ってくれば、インストール成功です。

# 1. Composerのインストール方法

全OS共通手順

Composerインストールスクリプトのダウンロード:

ターミナルまたはコマンドプロンプトで以下を実行:

```
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
```

**スクリプトの検証（オプション）:**

<font size="1">インストールスクリプトが改ざんされていないことを確認 </font>

```
$ php -r "if (hash_file('sha384', 'composer-setup.php') === 'インストールページで確認したハッシュ値') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
```

Composerをグローバルにインストールしたいので、

```
$ php composer-setup.php --install-dir=/usr/local/bin --filename=composer
```
とコマンドを打ってください。

インストールスクリプトの削除をするために、

```
$ php -r "unlink('composer-setup.php');"
```
と入力してください。

```
$ composer -v
```
と入力して、

![AD_4nXfG6jPw9PriCfKMVCn3Ugmt0XKu0j-A6kjrsNEiVdcAUb4yyKwDwjx7Y3onjwRqxw2P-m-XxqOoRLVFztxbAjx_RpJy1hswreFCSYSWwAKF1RY_U9H_k6KY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/6c5bf2da-926d-d707-814b-01f86d287691.png)


上の画像のようなメッセージが出れば、インストール成功です。

今回は、プロジェクト名を「laravel」にするので、
```
$ composer create-project --prefer-dist laravel/laravel laravel(プロジェクト名)
```
と、コマンドを打ってください。すると、

![AD_4nXerXl83MJzsO5HDdE2g7fhyIHmWXz_kjpRom0JwJ4vO4lIvFPGy8MnLNyoChTHSYnSlrK22mpAP-JXIDHZ1BPmqjQTC2T4dU4JTnSoxjnwQ9HlhXlIsQEIb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/be082a58-1c95-e6da-c4d5-7d6b27a891b3.png)




上の画像のようなメッセージが表示されると思います。

このようなメッセージが出れば成功です。

それでは、Laravelを動かしてみましょう。

プロジェクトディレクトリに移動

```
$ cd laravel
```

### アプリケーションキーの生成 ###
```
$ php artisan key:generate
```
### データベースのマイグレーション ###
必要に応じて、以下のコマンドでデータベーススキーマを作成します。
```
$ php artisan migrate
```
### サーバーの起動 ###
Laravelの開発サーバーを起動します。
```
$ php artisan serve
```
それでは、ブラウザで、http://localhost:8000と入力して、

![AD_4nXe70u7HQr1f6aeDYLNuUHa1M5vuI0pSVjl1GRIdstweSutct-yDIUW8gAP-kfVrwOFQuP_4Jfy_3HP3JJErIKnFKpIHkAnfX91CXUjmgPGs-flPDF6hu039.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/c277b116-9449-7de5-f2a1-0a93e079522d.jpeg)


という画面が出れば、成功です。

# 2. Next.jsプロジェクトを作成 #

Next.jsはNode.jsを必要とします。

以下の手順でNode.jsをインストールしてください：

Node.js公式サイト から最新のLTS（長期サポート版）をダウンロードしてインストールします。

インストール後、以下のコマンドでインストール確認を行います。
```
$ node -v
$ npm -v
```

プロジェクトを作成するには、以下のコマンドを実行します

```
$ npx create-next-app@latest frontend
```
コマンドの実行中に以下の選択肢が表示される場合があります。（2025年現在の例）

TypeScriptを使用しますか？
Yes または No を選択。
ESLintを設定しますか？
コード品質チェックのため Yes を選択することを推奨。
srcディレクトリを使用しますか？
プロジェクト構造を整理するため Yes を選択することを推奨。
importの構文にエイリアスを設定しますか？
必要であれば Yes を選択。

![AD_4nXfxVzfEjbsyCQYMkw_sjmQumqFp4JItNJtRT5bN6RIjxkCl4n7GXXMmjgDJYEEb5JnZbHS7B791WC9H-tWqXlWcdDi8yA1DPqI8vaUFzhUx4SVwxdafy74J.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/20c10857-63a1-bb3b-b14e-9ecd034ed819.png)
![AD_4nXeEwtjaifYcUcCID_hoE7W7CImZuzo9iW8svsMwMX-QRj8PJdwQJyZ1TvVku-F99eLy1IBcioBjpae4U2NvJp-AMgzTIx9WhMxhtGJO0-1KuyB87kQJ4K3l.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/ab0acc16-bba7-fa53-05f3-22ebc2e1afa1.png)



上のような画像が表示されれば、インストール成功です。


プロジェクトが作成されると、次のディレクトリ構造が生成されます。
```
frontend/
├── README.md
├── node_modules/
├── package.json
├── public/
├── src/ (srcディレクトリを選択した場合)
│   ├── pages/
│   ├── styles/
│   └── ...
└── .next/
```

それでは、Next.jsアプリケーションを動かしてみましょう。

このNext.jsアプリケーションを実行するには、以下のコマンドを実行します。

```
$ npm run build
```

このコマンドが成功すると、.next ディレクトリにプロダクションビルドが作成されます。


ビルドが成功した後に、

```
$ npm start
```
というコマンドを実行します。

そして、ブラウザで、http://localhost:3000と入力して、


![AD_4nXf3cnC-qz7DdRYaJNBo8j1grSdVehXGWvXNHLu_9OpmaUlQjj2GIfREUSmH9NeIBUuSvsECUj-bFz4AXq6X6GlE7uPu-kPvjEMqFPqHVwZYOU5dTDEcf4EZ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945016/bd74e3d9-45aa-cd9c-5477-a1f3f70a2e7c.jpeg)



という画面が出れば、成功です。


次は、手動ではなく、Dockerを起動させて、LEMP環境を作り、フロントエンド、バックエンド両方のブラウザを動かせるようにしていきます、↓

https://qiita.com/makkyo-git/items/b2a637e28c9050cce3df