miyupaca log

2020-09-05 yps学習記録その6

2020/09/05

Laravel学習本気出す！
となってるときにLaravelをがっつりやる課題がやってきました！

やったこと

  • Laravelでwebアプリを作る

    • 1:bootstrapを導入したTodoアプリの模写
    • 2:Todoアプリにメール認証機能をつくる

今回のお品書き

準備

ssh接続してEC2インスタンスに入ってプロジェクト作成する。

$ cd /var/www/html
$ composer create-project --prefer-dist laravel/laravel myapp2 "7.*"

プロジェクトに移動して色々準備する。

$ cd myapp2

// laravel/ui をインストール
$ composer require laravel/ui
$ npm install
//認証用のビューをbootstrapで入手
$ php artisan ui bootstrap --auth
$ npm install cross-env
$ npm run dev

nginxのコンフィグの中身を今回のプロジェクトに設定する。

$ sudo vi /etc/nginx/conf.d/default.conf

//「location ~ /」と「location ~ \.php$」のrootを以下にする。
// root /var/www/html/myapp2/public;

// 保存して再起動
$ sudo systemctl restart nginx && sudo systemctl restart php-fpm

phpMyAdminを使えるように設定。
シンボリックリンクの設定をやり直し。

$ cd ../yps/public/
$ unlink pma
$ cd -
$ sudo ln -s /usr/share/pma/ /var/www/html/myapp2/public/pma

キャッシュクリア、権限変更などなど。

$ php artisan cache:clear && php artisan config:clear && php artisan route:clear && php artisan view:clear

$ composer clear-cache && composer dump-autoload --optimize

$ sudo chown -R centos:nginx /var/www/
$ sudo chmod -R 777 storage/ bootstrap/cache/

1:bootstrapを導入したTodoリストの模写

こちらの記事に沿って作業してTodoリストを作る。
Laravel 6.x laravel/uiを利用してbootstrap 4を適用する – hrendoh’s tech memo
記事だけだと省略されている部分があるので愚直に進めるとエラーが起きる箇所がある。リポジトリも公開されているので合わせて確認するのが良い。 https://github.com/hrendoh/laravel-ui-bootstrap-tasks

まずはモデルを準備。

//モデルを作成
$ php artisan make:model Task -m

できたマイグレーションファイルに作るカラム情報を書く。
(myapp2/database/migrations/の中)

...
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('subject');
            $table->text('description')->nullable();
            $table->date('due_date')->nullable();
            $table->boolean('completed')->nullable();
            $table->timestamps();
        });
    }
...

mysql cliに入ってデータベース作成。

$ mysql -u root -p

mysql> create database myapp2db;
mysql> exit

.envファイルを編集。

vi .env
-----
DB_DATABASE=myapp2db                  
DB_USERNAME=root
DB_PASSWORD="設定したパスワード"

マイグレートして、テーブルができていればok。

$ php artisan migrate
$ mysql -u root -p -D myapp2db
mysql> show tables;

+--------------------+
| Tables_in_myapp2db |
+--------------------+
| failed_jobs        |
| migrations         |
| password_resets    |
| tasks              |
| users              |
+--------------------+
5 rows in set (0.00 sec)

ちなみにtasks以外のテーブルも同時にできているのは、デフォルトでいくつかファイルが入っているため。
usersテーブルはこの後のメール認証時にそのまま使う。

他の作業も記事通りにやっていった。
記事に載っているままやっていったので以下羅列。

  • TaskControllerというリソースコントローラを作成
  • ルーティングを設定
  • TaskControllerの中身を実装
  • layout.blade.phpを作成
  • task関連のブレードを色々追加(index,show.create,edit)
  • Font Awesomeの追加
  • DatePickerとMoment.jsの追加

以下、記事＋αでやったことや詰まって対応したことをログとして記しておく。

  • 確認用にtaskテーブルにmysql cliから適当にレコード入れた。
$ mysql -u root -p -D myapp2db

mysql> insert into tasks(subject,description,due_date) values('yps1-task6','Laravel-webアプリ作成やりきる','2020-09-05');

mysql> insert into tasks(subject,due_date) values('美味しいご飯を食べる','2020-09-07');

mysql> select * from tasks;
+----+--------------------------------+----------------------------------------+------------+-----------+------------+------------+
| id | subject                        | description                            | due_date   | completed | created_at | updated_at |
+----+--------------------------------+----------------------------------------+------------+-----------+------------+------------+
|  1 | yps1-task6                     | Laravel-webアプリ作成やりきる          | 2020-09-05 |      NULL | NULL       | NULL       |
|  2 | 美味しいご飯を食べる           | NULL                                   | 2020-09-07 |      NULL | NULL       | NULL       |
+----+--------------------------------+----------------------------------------+------------+-----------+------------+------------+
2 rows in set (0.00 sec)

(phpMyAdminやサービスから直接も追加できるはず。必須ではない。)

  • (検証中)fontawesomeを追加したのにアイコンが出ない。

_variables.scssに以下の記述を追加した。

$fa-font-path: "../webfonts";

参考：https://qiita.com/tana08/items/f540bdc63b37c4c9e8f1
→こちらなくても表示が確認できたのでnpm run devのし忘れとかの可能性が。。。 検証中です。一応作業ログとして残しておく。

ここまでやって模写が完了٩( ‘ω’ )و

2:Todoアプリにメール認証機能をつける

Laravel5.7以降は標準で認証機能がついているらしい。
ただ、そのまま利用するとメール確認しなくてもユーザ登録が完了してしまうので、メール認証を確実に通るようにする。

参考：【Laravel】ユーザ登録時にメール認証する(v5.7以上)

やったこと

  • Taskモデルの変更

  • ルーティングの修正

    • Auth::routes([‘verify’ => true]);

  • TaskControllerのコンストラクタ追加

    • ミドルウェア認証を verifiedにする
    • ちなみにルーティングの方でも制御できるみたい

  • ブレードでゲストの時は登録とログイン、ログイン時はログアウトのリンクを表示

    • @guest、@if (Route::has(‘register’))あたりを利用
    • 元のサンプルのブレードから引っ張ってこれました
  • RouteServiceProviderのHOME定数を更新して/tasksに飛ぶようにする

結構試行錯誤しつつ、こんな感じでやっていた。
上の記事以外にも参照していたページを覚えている範囲で掲載。

参考
https://readouble.com/laravel/7.x/ja/verification.html https://readouble.com/laravel/7.x/ja/authentication.html https://qiita.com/usaginooheso/items/d965f95191739f9335e8 https://qiita.com/nekyo/items/03e50b4d0dd6f09287d6 http://webxreal.com/laravel-auth/

メール認証にはmailtrapというツールを使用した。

メールの絡む開発にはmailtrapがおすすめ - Qiita

実際のアドレスを使わずに手軽にテストできるのでおすすめ！

そのほかやったこと

・オブザーバーでTaskテーブルのログを取る

https://readouble.com/laravel/7.x/ja/eloquent.html#observers https://qiita.com/tmf16/items/c88f5f3930d38e87856f

Taskテーブルにオブザーバーを設定して、何か変更があった時にログが残るようにしました。

//オブザーバーの作成
php artisan make:observer TaskObserver --model=Task

RouteServiceProvider.phpにLog出力されるように記載。

  public function created(Task $task)
  {
      //
      \Log::debug("TaskObserver: created");
  }

他のメソッドにも同じようにやる。実装後にタスクに変更を加えるとstorage/logs/laravel.logに出力されるようになる。

[2020-09-05 08:39:54] local.DEBUG: TaskObserver: created
[2020-09-05 08:40:13] local.DEBUG: TaskObserver: updated  
[2020-09-05 08:40:17] local.DEBUG: TaskObserver: deleted

気づきなど

  • 少しずつLaravelの構成がわかり始めた一方で、ブレードの継承をうまく使えなかったり、モデルに必須な記載を忘れるなど基礎面が弱いことを改めて実感しました。
  • ypsの課題を中心に荒削りでLaravelに触れてきたので、基礎学習を行いながらアプリのカスタマイズをやってレベルアップを目指します！

miyupacaの学習記録ブログです。