More than 3 years have passed since last update.

0から始めて1で終わるLaravelとJetstream

Last updated at 2022-04-28Posted at 2020-12-05

緒言

　この記事は、真っさらなLinux上でLaravelとJetstreamが動くようにするのが目的です。仮想マシンやDockerなどは使用しません。デフォルトの画面が現れるところまでが範囲ですので、実用には至りません。悪しからず御諒承くださいませ。手順はなるべく丁寧に書いたつもりですが、自明な部分まで事細かに書いてあるのでうんざりするかもしれません。また、バックグラウンドにある重要な概念について説明し出すと際限なくなるので触れられませんでした。

　使用環境は以下の通りです。

[Ubuntu Desktop 20.04.1 LTS][ubuntu]
真っさらなPC
[ubuntu]:https://jp.ubuntu.com/download

　また、以下のような方々を想定して書いております。

言語のPHPと雑誌のPHPとの違いがわかる人
コピー&ペーストやキーボード入力をこなせる人
ちょっとした記述ミスや環境の違いを応用力で修正できる人
　最後だけやたら難易度が高いですが、気にしないでください。
　基本的には、[laravel日本語版][laravel]や[Jetsstream公式][jetstream]をもとに、わかりにくいところを補完していきます。
[laravel]:http://laravel.jp/
[jetstream]:https://jetstream.laravel.com/1.x/introduction.html

手順

第1章　Ubuntuをなんとか入れよう

　まずは、OSをインストールするところから始めます。0から、ですから。熟知している人は読み飛ばしてください。

今回使用するのとは別のPCなどで[ubuntu公式サイト][ubuntu]からインストール用イメージをダウンロードします。今回は、Ubuntu Desktop 20.04.1のLong-Term-Support版を使用しました。閲覧時点で新しい版が出ていれは、そちらを選択した方がいいでしょう。
ダウンロードしたイメージを書き込み可能なDVDメディアかUSBメモリに焼き付けてください。USBメモリを使用する場合はbalena Etcherがよろしいかと。
今回使用するPCに、上記で作成したDVDなりUSBメモリなりを入れて起動します。起動直後にブート順位を設定するためのキー（F2だったりF10だったりF12だったりします）を押して、いま入れたDVD/USBメモリを選択します。
ubuntuのインストールが始まります。最初に試用かインストールかを尋ねられるので、インストールの方を選択します。また、インストールするアプリケーションの種類を問われるのでminimumにしておきます。ブラウザやターミナルもminimumに入っているので御心配なく。タイムゾーンやホスト名、ユーザ名などは適宜入力します。アップデートのダウンロードも選択しておいた方がよいでしょう。
インストールを終了すると、DVDやメモリを取り出すよう指示があるので、そのタイミングで取り外して、再起動します。

第2章　下準備をどうにかしよう

　さて、目の前にはとてもクリーンな環境が整ったわけです。新雪に足跡をつけるようで勿体ないですが、さっそく、これに必要な設定を施しましょう。

　Laravel8のインストールの記述によると、以下の要件を満たす必要があります。

PHP >= 7.3

BCMath PHP拡張
Ctype PHP拡張
Fileinfo PHP拡張
JSON PHP拡張
Mbstring PHP拡張
OpenSSL PHP拡張
PDO PHP拡張
Tokenizer PHP拡張
XML PHP拡張

　また、

Laravelインストール時にComposer
Jetstreamではnpm
データベースとしてsqlite（に限らないのですが、一番楽なので）

が必要となります。
　依存関係などで自動的に入ってしまうものもありますので、とりあえず、左下のメニューアイコンのユーティリティの中からターミナルを呼び出して、このようにインストールしましょう。以下の作業は注記のない限りこのターミナル上で行います。以下、ターミナルのプロンプトを$ で示しますが、これは入力せず、そのあとの部分を入力してください。先頭に$ が入っていない行は応答部分ですので、そのとおり表示されていれば大丈夫です。

$ sudo apt install php7.4 php7.4-bcmath php7.4-mbstring php7.4-xml conposer npm

sudoで始まる場合はパスワードを尋ねられることがあります。第1章で設定したユーザのパスワードを使ってください。終わったら、

$ php -r "phpinfo();"

で、上記のPHPのモジュールが入っているかどうか確認してください。もし、「xxx PHP拡張」が足りない場合は

$ sudo apt install php7.4-xxx

で、追加しておきましょう。

第3章　Laravelのインストールをあれこれしよう

　まずは、Laravelのインストーラのインストールから始めます。

$ composer global require laravel/installer

　ちゃんと入っているか確かめてみましょう。

$ ls /home/{ユーザ名}/.config/composer/vendor/bin

　{ユーザ名}には第1章で設定したユーザ名が入ります（ほかにユーザを作ってそちらでログインしているのであればそちら。以下同）。これで、

laravel

と出てくれば正しくインストールされています。

　ただ、この場所にはPATHが通っていない（≒ここに命令があるよ、というリストに入っていない）ので、足してあげる必要があります。その方法は大別して

exportを使う（その場限り）
/home/{}/.bashrc ファイルに書き足す（そのユーザ限り再起動しても可）
/etc/environment ファイルに書き足す（全ユーザに適用される）

の3つがあります。ここでは、一番乱暴な3番目の方法を使ってみましょう。ここではviエディタを使います。

sueo vi /etc/environmentと入力します。
中身はPATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin"のように書かれているのを確認します。
右矢印で最後の"までカーソルを動かし、aキーを押します。
:/home/{ユーザ名}/.config/composer/vendor/binを入力します。最初の:を忘れぬように。
Escキーを押します。
Z（大文字）キーを2回押します。

　万一、間違えた操作のあとEscを押してしまったら、uでアンドゥできます。操作不能で訳がわからなくなったらEscキーを押したあと:q!を入力してEnterキーを押してください。保存せずに終了するので、1からやり直してください。
　　viについての詳細はviコマンド（vimコマンド）リファレンスにわかりやすく説明されています。上記手順の意味については、こちらを御覧いただくとよろしいかと思います。

　この設定を有効にするために以下のとおり再起動します。

$ sudo shutdown -r now

　このあたりで一息つくためお茶でも飲むとよろしいかと思います。

第4章　Laravelの設定をどうこうしよう

　気を取り直して先に進みましょう。ここから、Laravelのプロジェクトを作成し設定を行います。
　記念すべき第１回のプロジェクトなので、考えに考え抜いて命名してください。ここではtestとします。ターミナルを起動するとホームディレクトリ/home/{ユーザ名}/が出てきます。念のため確認しましょう。

$ pwd
/home/{ユーザ名}

　そして、以下のように入力します。

$ laravel new test

_                              _
| |                            | |
| |    __ _ _ __ __ ___  _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|
Creating a "laravel/laravel" project at "./test"

　　　（中略）

Application key set successfully.
Application ready! Build something amazing.

　となって、新しいプロジェクトができあがりました。testというディレクトリが作られたので、確認してみます。

$ ls

　で、いくつかのディレクトリが表示されますが、その中にtestがあればよしとします。

　次はデータベースへの接続設定です。いままでデータベースのインストールはしてきませんでしたが、気にすることはありません。SQLiteというデータベースは、単一ファイルだけにデータを格納するので、わざわざ構築する必要はありません。また、Laravelが、というかPHPがSQLiteを操作できるの（第2章で追加したPDO PHP拡張）で、動作させることができます。
　まずは、コマンドでそのディレクトリに移動します。その上で、第3章でも使用したviエディタを使って環境設定ファイルを書き直します。

$ cd test
$ vi .env

　編集前のの状態は以下のとおりです。

.env

　　（中略）
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=temp
DB_USERNAME=root
DB_PASSWORD=
　　（後略）

　これを次の手順のとおり改めます。

↓キーでDB_CONNECTION=mysqlの行まで移動する。
$キーで文の末尾まで移動する。
Delキーを5回押して「mysql」を消す。
aキーを押して編集モードに入り「sqlite」と入力しEscキーを押して編集モードを終える。
^キーを押して行頭に戻る。
↓キーでDB_HOST=127.0.0.1行の行頭に移動する。
iキーで編集モードに入る。
DB_HOSTの前に#を入力し、escキーで編集モードを終える（忘れないこと）。
以下、DB_PASSWORD=の行まで繰り返し
Zを2回押します。

　　編集後は以下のとおりです。

.env

　　（中略）
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=temp
#DB_USERNAME=root
#DB_PASSWORD=
　　（後略）

以上で、SQLiteに接続する準備ができましたが、もう一つ行う作業があります。SQLiteは単一ファイルのデータベースと申しましたが、そのファイルを作ってあげなければなりません。デフォルトのデータベース置き場がありまして、そこに空ファイルを置いておけば大丈夫です。
　現在位置を確認して、

pwd
/home/{ユーザ名}/test

以下のように入力します。

$ touch database/database.sqlite

　これでLaravel関係の設定はおしまいです。

第5章　Jetstream をのらりくらりとインストールしよう

$ composer require laravel/jetstream

　インストールにはかなり時間がかかります。「おまえのComposerは古いのじゃ。いまはComposer 2.0の時代じゃ。」と怒られますが、どうしようもないので平謝りしつつ無視します。これはこのあと何回か出てくるので同様に対処しましょう（補記：composer公式からコマンドラインでインストールできるようです。古いバージョンを削除してからお試しください）。

Package manifest generated successfully.
73 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

と表示されれば成功です。次にlivewireというプログラム群をインストールします。

$ php artisan jetstream:install livewire

　これも少し時間がかかります。

Livewire scaffolding installed successfully.
Please execute the "npm install && npm run dev" command to build your assets.

　出てきた指示どおりにビルドします。

$ npm install && npm run dev

　こちらも時間がかかります。

DONE  Compiled successfully in 56857ms                              10:43:22 PM

      Asset      Size  Chunks            Chunk Names
/css/app.css  4.38 MiB  /js/app  [emitted]  /js/app
  /js/app.js  669 KiB  /js/app  [emitted]  /js/app

　以上のメッセージが出たら以下のように入力します。

$ php artisan migrate

　これは数秒で終わります。もし、エラーが出てしまったら、第4章の.envの部分が正しくない可能性がありますので確認してみてください。

　そして最後に、タイムゾーンと言語を設定します（12/7追記）。

app.php

<?php
return [
　　（かなり略）
    /*
    |--------------------------------------------------------------------------
    | Application Timezone
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default timezone for your application, which
    | will be used by the PHP date and date-time functions. We have gone
    | ahead and set this to a sensible default for you out of the box.
    |
    */
   'timezone' => 'UTC',
　　（中略）
    'locale' => 'en',
　　（中略）
    'fallback_locale' => 'en',
　　（中略）
   'faker_locale' => 'en_US',
　　（後略）

この「timezone」の行のUTCのUのところまでカーソルを持ってきて、3xと打つかもしくはxを3回押すと「UTC」という文字が消えます。その位置でaキーを押し「Asia/Tokyo」と入力してEscを押します。引き続き、同様の手順で「locale」「fallback_locale」を「ja」に、「faker_locale」を「ja_JP」にして」ください。完成形は以下のとおりです。シングルクォーテーションやカンマのミスがないか確認してください。

app.php

　　（最初からかなり略）
   'timezone' => 'Asia/Tokyo',
　　（中略）
    'locale' => 'ja',
　　（中略）
    'fallback_locale' => 'ja',
　　（中略）
   'faker_locale' => 'ja_JP',
　　（後略）

　長々と続けてきましたが、これで完成です。お疲れさまでした。

第6章　出来上がりをおそるおそる見てみよう

　さて、ここまでで作り上げた環境がきちんと動くか見てみましょう。本来ならWebサーバ上で動かしますが、今回はお試しということで、PHPの機能を活用した簡易サーバで見てみましょう。

$ php artisan serve

　これでブラウザ上の「127.0.0.1:8000」というアドレスで以下のような初期画面が出てきます。注目していただきたいのは、右上のLoginとRegisterというリンクです。いまはできたばかりでユーザがおらず、ログインもできないので、まずはユーザを登録すべくRegisterを押してみましょう