【Laravel】エックスサーバーで「php artisan ui vue –auth」でログイン認証機能を追加する

2022年1月20日

Contents

1. 本記事について
2. 手順

本記事について

エックスサーバー環境において「php artisan ui vue –auth」コマンドを利用してLaravelを追加する場合の手順を記録したものです。

Laravel導入済みが前提となります。

手順

1. Laravelを導入したディレクトリに移動

カレントディレクトリをLaravel導入先（artisanがあるところ）に変更します。

2. laravel/uiパッケージの導入

以下のコマンドを投入し、composerによりlaravel/uiパッケージをインストールします。

composer require laravel/ui:^1.0 -dev

以下実行結果です。

Warning from https://repo.packagist.org: Support for Composer 1 is deprecated ang.packagist.com/deprecating-composer-1-support/
./composer.json has been created
Loading composer repositories with package information
Warning from https://repo.packagist.org: Support for Composer 1 is deprecated ang.packagist.com/deprecating-composer-1-support/
Updating dependencies (including require-dev)
Package operations: 19 installs, 0 updates, 0 removals
- Installing symfony/translation-contracts (v2.5.0): Loading from cache
- Installing psr/container (1.1.1): Loading from cache
- Installing symfony/polyfill-mbstring (v1.24.0): Loading from cache
- Installing symfony/polyfill-php80 (v1.24.0): Loading from cache
- Installing symfony/deprecation-contracts (v2.5.0): Loading from cache
- Installing symfony/translation (v5.3.13): Downloading (100%)
- Installing nesbot/carbon (2.55.2): Loading from cache
- Installing psr/simple-cache (1.0.1): Loading from cache
- Installing illuminate/contracts (v6.20.44): Downloading (100%)
- Installing doctrine/inflector (2.0.4): Loading from cache
- Installing illuminate/support (v6.20.44): Downloading (100%)
- Installing symfony/finder (v4.4.36): Loading from cache
- Installing illuminate/filesystem (v6.20.44): Downloading (100%)
- Installing symfony/process (v4.4.36): Loading from cache
- Installing symfony/service-contracts (v2.5.0): Loading from cache
- Installing symfony/polyfill-php73 (v1.24.0): Loading from cache
- Installing symfony/console (v4.4.36): Loading from cache
- Installing illuminate/console (v6.20.44): Downloading (100%)
- Installing laravel/ui (v1.3.0): Downloading (100%)
symfony/translation suggests installing symfony/config
symfony/translation suggests installing symfony/yaml
illuminate/support suggests installing moontoast/math (Required to use ordered U
illuminate/support suggests installing ramsey/uuid (Required to use Str::uuid()
illuminate/support suggests installing symfony/var-dumper (Required to use the d
illuminate/support suggests installing vlucas/phpdotenv (Required to use the Env
illuminate/filesystem suggests installing league/flysystem (Required to use the
illuminate/filesystem suggests installing league/flysystem-aws-s3-v3 (Required t
illuminate/filesystem suggests installing league/flysystem-cached-adapter (Requi
illuminate/filesystem suggests installing league/flysystem-sftp (Required to use
illuminate/filesystem suggests installing psr/http-message (Required to allow St
symfony/service-contracts suggests installing symfony/service-implementation
symfony/console suggests installing symfony/event-dispatcher
symfony/console suggests installing symfony/lock
symfony/console suggests installing psr/log (For using the console logger)
illuminate/console suggests installing dragonmantank/cron-expression (Required t
illuminate/console suggests installing guzzlehttp/guzzle (Required to use the pi
illuminate/console suggests installing illuminate/bus (Required to use the sched
illuminate/console suggests installing illuminate/container (Required to use the
illuminate/console suggests installing illuminate/queue (Required to use closure
Writing lock file
Generating autoload files
12 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

3. artisanコマンドを実行

目的の以下のコマンドを実行します。

php artisan ui vue --auth

以下実行結果です。

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

「Please run “npm install && npm run dev" to compile your fresh scaffolding.」とあるように、npmコマンドの投入が促されますが、npmコマンドはエックスサーバーに導入されていませんので、ここで導入します。

4. nodebrewの導入

目的のnpmコマンドはnode.jsに付随するコマンドです。そこで、node.jsを導入します。

そのため、まず、Nodebrewを導入します。以下コマンドを投入します。

wget git.io/nodebrew
perl nodebrew setup

次にnodebrewのコマンドパスを追加します。以下コマンドで~./bash_rcを編集します。

vi ~/.bashrc

編集画面が開くので、PATHの先頭に「$HOME/.nodebrew/current/bin」を追加します。以下例

export PATH="$HOME/.nodebrew/current/bin:/home/xs595510/anaconda3/bin/:$PATH"

変更を反映します。

source ~/.bashrc

ここで、nodebrewが使えるようになっているはずなので、以下のコマンドで確認します。

nodebrew -v
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
LANGUAGE = (unset),
LC_ALL = (unset),
LANG = "ja_JP.UTF-8"
are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
nodebrew 1.1.0

色々警告がでていますが、「nodebrew 1.1.0」が出力されていたら、nodebrewの導入は完了です。

次のどのnodebrewのバージョンを使用するか、設定します。以下のコマンドで、使用できるバージョンを確認します。

nodebrew list

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
LANGUAGE = (unset),
LC_ALL = (unset),
LANG = "ja_JP.UTF-8"
are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
v16.13.2

「v16.13.2」が使用可能と出ていますので、以下で使用する設定します。