6
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?

More than 3 years have passed since last update.

【Laravel】Dockerコンテナ内でのユーザー認証導入

Posted at

初めまして!
スクールではRuby on Railsを学習。
就活の関係でPHPの学習始めたばかりです。
初めて1からLaravelで作成するので記録を残します。

DockerでLaravelの開発環境を作成

これに関してはこちらの記事を参考にというかもうそのまま使わせて頂きました!
大変わかりやすかったです。
ありがとうございました!

ユーザー認証導入

ユーザー登録やログイン機能の実装です。
Railsだとdeviseで簡単にできるイメージでしたが結構つまりました。
Dockerというのが理解が追いついていないので難しかったです。

目標物
Laravelの標準のユーザー認証機能の導入
スクリーンショット 2021-01-25 13.56.50.png

まずコンテナ内に入ります

ターミナル
% docker-compose exec app bash

コンテナ内でユーザー認証導入のコマンドを入力します

コンテナ
composer require laravel/ui

ここで下記のエラーが発生しました。

Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes)

調べると「メモリ不足なのでインストールできないよ」とのこと。
なので

コンテナ
COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui

上記のコマンドは一時的に容量を無制限にするコマンドのようです。
こちらの記事を参考にさせていただきました!ありがとうございます。

vue.jsを元にしたテンプレートの認証機能を追加します

コンテナ
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.

これでvue.jsを書く初期状態が完成。
app/Http/Controllers/Authにはバックエンドでの認証機能関係のファイルが追加されます。
resources/views/authにはフロントエンド関係のviewファイルが追加されます。

ここまでで一旦は認証機能の導入が終わりましたが、まだ表示が崩れたままです。

画面を整えるためNode.jsのパッケージ管理ツールをインストールします。

コンテナ
npm install && npm run dev

そうすると

npm: command not found

とエラー。
Node.jsのインストールしてなかったからみたいです(それはそうですね)
公式からインストールし再実行するも変わらず。
インストールの確認のためコンテナから出て
which nodeと入力すると/usr/local/bin/nodeと出力され
npm -vと入力すると6.14.10と出力されるがコンテナ内で行うと出てこないのでコンテナ内にNodeが存在しないことが原因と分かりました。

コンテナ内に反映させるため,php/DockerfileのWORKDIRの前に以下を追加します。

COPY --from=node:12.20 /usr/local/bin /usr/local/bin
COPY --from=node:12.20 /usr/local/lib /usr/local/lib

コンテナから抜けてビルドし直します。

docker-compose up -d --build

このあと再度コンテナ内に入りnpm install && npm run devで無事完了。
public/jspublic/cssに新しいファイルが生成されます。

リアルタイムでコンパイルさせる

phpのコンテナ内で

npm run watch-poll

を実行することでコードを書きながらでもリアルタイムでjsがコンパイルされ画面が反映されます。

完成

以上です!
ご指摘などございましたらよろしくお願い致します!

6
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
6
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?