🙆

面談記録管理アプリ：開発環境構築

2024/10/11に公開

Laravel

tech

はじめに

今回から、本格的に面談記録管理アプリを開発していきたいと思います！

まず、開発環境を構築していきます！今回はXAMPPを使ってLAMP環境で開発していきます！

XAMPPのインストール

LAMP環境を構築するにあたって、XAMPPを使って構築していこうと思います！

XAMPPインストーラーのダウンロード

まず、以下のURLから自身に適したOSのインストーラーをダウンロードします。

以下のコマンドを実行してインストーラーを起動します。

./Download/xampp-linux-x64-8.2.12-0-installer.run

PHP8.2のイントール

XAMPP for LinuxにおけるPHP対応バージョンが8.2なので、PHP8.2をインストールする

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php8.2

私のPCにはすでにphp8.3がインストールされてるのでphp8.2が適用されるようにする。

sudo update-alternatives --install /usr/bin/php php /usr/bin/php8.2 120
sudo update-alternatives --install /usr/bin/php php /usr/bin/php8.3 110
sudo update-alternatives --config php
lternative php (/usr/bin/php を提供) には 2 個の選択肢があります。

  選択肢    パス           優先度  状態
------------------------------------------------------------
* 0            /usr/bin/php8.2   120       自動モード
  1            /usr/bin/php8.2   120       手動モード
  2            /usr/bin/php8.3   110       手動モード

現在の選択 [*] を保持するには <Enter>、さもなければ選択肢の番号のキーを押してください:

php8.2が指定されているのを確認したらEnterキーを押して終了する。
指定されていない場合は、番号キーで適用するバージョンを変更する。

念の為、php8.2になっているか確認します。

php -v
PHP 8.2.22 (cli) (built: Aug  2 2024 15:36:27) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.22, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.22, Copyright (c), by Zend Technologies

Composerのイントール

公式サイトの手順に従いインストールしました。
https://getcomposer.org/download/

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

mvコマンドで/usr/local/binに実行ファイルを移動してグローバル化します。

sudo mv composer.phar /usr/local/bin/composer

Laravelのインストール

以下のコマンドを実行してLaravelプロジェクトを作成します。

composer create-project laravel/laravel laravel11-member-manager

すると、以下のようなエラーが出ました。

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires laravel/pint ^1.13 -> satisfiable by laravel/pint[v1.13.0, ..., v1.17.2].
    - laravel/pint[v1.13.0, ..., v1.17.2] require ext-xml * -> it is missing from your system. Install or enable PHP's xml extension.
  Problem 2
    - phpunit/phpunit[11.0.1, ..., 11.3.1] require ext-dom * -> it is missing from your system. Install or enable PHP's dom extension.
    - Root composer.json requires phpunit/phpunit ^11.0.1 -> satisfiable by phpunit/phpunit[11.0.1, ..., 11.3.1].

どうも、必要なPHPパッケージがインストールされていないようなのでインストールします。

sudo apt-get install php8.2-xml php8.2-mysql

インストール完了後、再度Laravelプロジェクトを作成します。

composer create-project laravel/laravel laravel11-member-manager

無事作成されました！

必要なライブラリーにインストール

Webアプリ作成にあたって必要なライブラリをインストールしていきます。
作業を始めるために、プロジェクトのディレクトリ内に入っておきます。

cd ./~~パス~~/laravel-member-manager/

イントール作業は、作成したプロジェクトディレクトリ内で行います。

laravel/breeze

まず、ログイン機能を実装するためにbreezeをインストールします。

composer require laravel/breeze
php artisan breeze:install

エラーメッセージの詳細な内容を記録し忘れたのですが、php-xmlというパッケージが足りないと言われたのでインストールします。

sudo apt-get install php8.2-xml

先程のコマンドを再度実行してbreezeをイントールします。

composer require laravel/breeze
php artisan breeze:install

以下のコマンドを実行して、Laravelを起動してみます。

php artisan serve

これだけでは画面に何も表示されないので、別のターミナルで、nodejsも起動しておきます。

npm run dev

http://localhost:8000/にアクセスして、以下のような画面が表示されていれば成功です。

もし、SQL関連のエラーが出た場合は、マイグレーションし忘れている可能性があるので、マイグレーションしていきます。

php artisan migrate

breezejpのインストール

次に、breezeを日本語化してくれるbreezejpをインストールします。

最初に、言語ファイルを以下のコマンドを用いて、表に出しておきます。

php artisan lang:publish

次に、breezejpをインストールします。

composer require askdkc/breezejp --dev
php artisan breezejp

laravel riverbのインストール

php artisan install:broadcasting

以下のようなエラーが出ました。

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - pusher/pusher-php-server[7.2.0, ..., 7.2.4] require ext-curl * -> it is missing from your system. Install or enable PHP's curl extension.
    - laravel/reverb[v1.0.0, ..., v1.2.0] require pusher/pusher-php-server ^7.2 -> satisfiable by pusher/pusher-php-server[7.2.0, ..., 7.2.4].
    - Root composer.json requires laravel/reverb ^1.0 -> satisfiable by laravel/reverb[v1.0.0, v1.1.0, v1.2.0].

また必要なPHPパッケージが入っていないようなので、インストールします。

sudo apt-get install php8.2-curl

再度、インストールし直すと、無事インストールできました！

UI周りのライブラリのインストール

以下のコマンドを使って、UI周りで使いたいライブラリをインストールしていきます。

npm install @headlessui/react @heroicons/react daisyui uuid

GitHub連携をする

レポジトリの作成

ブラウザ上でGitHubにアクセスして、レポジトリの新規作成をします。

Git Flowの初期化

以下のコマンドを用いて、GitFlowをセットアップしていきます。

git flow init

以下のような、ブランチの命名について色々聞かれますが、特に規定がなければそのままEnterキーを押して行って設定していきます。

No branches exist yet. Base branches must be created now.
Branch name for production releases: [master] main
Branch name for "next release" development: [develop] 

How to name your supporting branch prefixes?
Feature branches? [feature/] 
Bugfix branches? [bugfix/] 
Release branches? [release/] 
Hotfix branches? [hotfix/] 
Support branches? [support/] 
Version tag prefix? [] 
Hooks and filters directory? [/home/itry/rkaneoka/Project/xampp/laravel11-member-manager/.git/hooks]

セットアップが終わると、ブランチが生成されているはずなので、コマンドを使って確認します。

git branch
* develop
  main

GitHubレポジトリを連携する

ブラウザで作ったレポジトリをローカルのプロジェクトと連携するためにい以下のコマンドを実行します。

git remote add origin https://github.com/アカウント名/リポジトリ名.git

URLはご自身のアカウント名とリポジトリ名を入れて実行してください。
以下のコマンドを実行して、連携できているか確認します。

git remote -v
origin  https://github.com/xxxx/yyyy.git (fetch)
origin  https://github.com/xxxx/yyyy.git (push)

先程接続したURLが表示されていれば成功です。

プロジェクトをプッシュする

ここまでで、GitHubの連携はできたので、現在のプロジェクトをプッシュしてGitHub上に保存します。

git add .
git commit -m "first commit"

ブラウザでレポジトリを確認して、プッシュが成功したか確認します。

無事プッシュできたようです！

おわりに

今回は開発環境構築を行いました！

次回から本格的に開発進めていきます！

ではでは！