Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@NAKADAMIA

【最新】Laravel8でサーバーを起動し、ログイン機能を実装しよう!

目標

  • Laravelのインストール
  • MySQLのインストール
  • ログイン機能の実装

Laravel v8.40(最新:2021年5月4日時点)のartisanコマンドでサーバーを立ち上げ、
データベースを作成しログイン機能を実装します。

前提条件

  • composer (v2.0.13)
  • PHP (v8.0.3)
  • Homebrew (v3.1.5)

自身の環境では、以上のツールとバージョンをインストールしています。

まだ、インストールされていない方・バージョンが古い方は、
事前にインストール・アップデートを済ませていただきますようお願いします。

Laravelのインストール

それでは早速、実装していきましょう!

まずは、以下ディレクトリ内でcomposerコマンドを使用し、laravelをインストールします。

/Users/user
Users-PC:~ user$ composer create-project laravel/laravel laravel

インストールしたlaravelディレクトリに移動し、
artisanコマンドを使用することでversion確認をすることができます。

/Users/user/laravel
Users-PC:laravel user$ php artisan -v 
Laravel Framework 8.40.0

laravelディレクトリ直下でサーバーを起動します。

/Users/user/laravel
Users-PC:laravel user$ php artisan serve

以上で、laravelがインストールされたのページにアクセスすることができます。
http://localhost:8000/

MySQLのインストール

続いて、MySQLをインストールします。

好きな場所でHomebrewを活用し、mysqlをインストールします。

Users-PC:laravel user$ brew install mysql

以下コマンドでmysqlファイルのインストール先を確認することができます。

Users-PC:laravel user$ which mysql
/usr/local/bin/mysql

今回/Users/user/laravel/.envファイルの中では、
データベース名は「laravel」で初期設定されているため、
MySQLに「laravel」という名前のデータベースを追加します。

.env
 DB_DATABASE=laravel

因みに、ls -aというlinuxコマンドを使用することで
.envファイルの存在を確認することができます。

/Users/user/laravel
Users-PC:laravel user$ ls -a
.                  .env               .gitignore         app                composer.json      database           package.json       resources          storage            vendor
..                 .env.example       .styleci.yml       artisan            composer.lock      node_modules       phpunit.xml        routes             tailwind.config.js webpack.config.js
.editorconfig      .gitattributes     README.md          bootstrap          config             package-lock.json  public             server.php         tests              webpack.mix.js

laravelディレクトリ直下でmysqlコマンドを使用し、mysqlにアクセスします。

/Users/user/laravel/
Users-PC:laravel user$ mysql -uroot

SQL文でlaravelというデータベースを作成します。

mysql
mysql> create database laravel;
Query OK, 1 row affected (0.00 sec)

SQL文でlaravelというデータベース名があることを確認できます。

mysql
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| laravel            |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

以上でmysqlの設定は終わりです。
しかし、このままページにアクセスした際に.envに記述されているDB_HOST名に誤りがあるため、
以下のようなエラーメッセージが出てしまいます。(正式にいうと誤りではありませんが、接続方法が異なります。)

SQLSTATE[HY000] [2002] Connection refused

スクリーンショット 0003-05-04 2.58.56.png

.envファイルのDB_HOST名を127.0.0.1 → localhostに変更します。

  • localhost・・・ソケットファイルを使用した接続
  • 127.0.0.1・・・TCP/IPを使用した接続
.env
変更前
 DB_HOST=127.0.0.1

変更後
 DB_HOST=localhost

.envファイルやconfig/*.phpファイルを編集した際には、
必要に応じてartisanコマンドを活用し変更した設定を反映させましょう。
(過去に数時間悩んだエラーが、これらによって解決したこともあるため、覚えて損はないかと思われます。)

php artisan config:cache
php aritsan config:clear
php artisan cache:clear
php artisan route:clear
php artisan view:clear

/Users/user/laravel
 Users-PC:laravel user$ php artisan config:cache

jetstreamのインストール&ログイン機能実装

最後に、jetstreamのパッケージをインストールしてログイン機能を実装していきましょう。

それではまず、composerのjetstreamのパッケージをインストールします。

/Users/user/laravel
 Users-PC:laravel user$ composer require laravel/jetstream

artisanコマンドでjetstreamをインストールしましょう。
jetstreamでは、「livewire」と「inertia」のパックを選択してインストールすることができます。

  • livewire これまでのlaravelのbladeを活用するパック
  • inertia Vue.jsやReactといったjavascriptを活用するパック

今回当方では、inertiaをインストールしていきます。

/Users/user/laravel
 Users-PC:laravel user$ php artisan jetstream:install inertia

jetstreamのインストールが完了したら、npmをインストールしてビルドしていきましょう。

/Users/user/laravel
 Users-PC:laravel user$ npm install && npm run dev 

最後にartisanコマンドを実行し、データベースにテーブルを挿入していきましょう!

/Users/user/laravel
 Users-PC:laravel user$ php artisan migrate
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (14.84ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (8.38ms)
Migrating: 2014_10_12_200000_add_two_factor_columns_to_users_table
Migrated:  2014_10_12_200000_add_two_factor_columns_to_users_table (8.48ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (9.86ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (14.20ms)
Migrating: 2021_05_03_160333_create_sessions_table
Migrated:  2021_05_03_160333_create_sessions_table (19.12ms)

上記のようにphp artisan migrateが実行できれば、恐らくログイン機能が実装できていることでしょう!

右上にLogin / Registerが表示されていれば成功です!

スクリーンショット 0003-05-04 3.32.14.png

ご拝読ありがとうございました!

もし、参考になった方がいらっしゃいましたらLGTMボタンのクリックをお願いします!

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
axiaworks
Axia Works合同会社。 アプリの開発をメインにしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?