とりあえずphp+nginx+mysqlの環境が完成したので、メインのツール作成をしていきます。まずは、ログインフォームを作成します。先週phpとmysqlを用いて(コピペしながら)自力で実装していたのですが、今回はlaravelを用いて作っていきます。
1.[前準備]Node.jsのインストール
これは使っているPCにインストールします。OSによってインストールの仕方が色々ありますが、私の場合はwindows環境で作っているため、windows向けに書いていきます。macやlinuxの場合はnodebrewを使ったり、aptで入れることができます。
さて、まずはNode.jsにアクセスして、インストーラーをダウンロードします。
インストーラーのダウンロードが終わったら、インストーラーを起動してインストールします。便利なもので自動的にpathを通してくれるようになっています。インストールが終わったらコマンドを打って確認します。
node -v
v14.15.1
npm -v
6.14.8
ここでそんなコマンドは知らないと言われた場合はpathを確認しましょう。システム環境変数のpathを見ます。
C:\Program Files\nodejs
インストール先を変更していなければこれで通るはずです。確認してだめな場合はPCを再起動してからもう一度コマンドを打ってください。
自動的に登録されるpathは
C:\Program Files\nodejs\
と最後にバックスラッシュがありますが、これがあると動かなかったという記事も見かけたので、どうしても通らない場合はやってみてください。
2.Laravelをインストール
まずは作った環境を起動します。
docker-compose up -d
今回は新規にLaravelプロジェクトを作成します。
docker-compose exec app composer create-project --prefer-dist "laravel/laravel=6.*".
ダウンロードとインストールが始まります。終わったらLalavelの導入は完了です。
localhostにアクセスして、Laravelのwelcomeページが表示されるか確認します。
ここで次のような画面が表示された場合は一手間必要です。
2-1.[トラブルシューティング]権限を与える
Permission deniedなので、権限が無いためアクセスを拒否されています。そのため、権限を与えてあげます。まずはphpコンテナ内に入ります。
docker-compose exec app bash
appの部分は自分の環境のサービス名にしてください。コンテナに入ったら、次のコマンドを打ちます。
chmod -R 777 storage/
このあと、もう一度localhostにアクセスしてください。これで表示されるはずです。
3.Laravelを用いてログイン機能を作成する
3-1.composerをインストールする
docker-compose.ymlがあるディレクトリで次のコマンドを実行します。(コンテナ内ではないです)
docker-compose exec app composer install
ちなみにcomposerはPHPのパッケージライブラリ管理ツールです。
3-2.APP_KEYの生成
docker-compose exec app php artisan key:generate
次のように表示されたらOK。
Application key set successfully.
ちなみにartisanはlaravel専用コマンドです。60種類ぐらいあるらしい。
3-3.マイグレーションを実行する
docker-compose exec app php artisan migrate
次のように表示されたらOK。
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (0.15 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table (0.1 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated: 2019_08_19_000000_create_failed_jobs_table (0.06 seconds)
3-4.Laravel/uiのインストール
phpコンテナ内に入ります。そして次のコマンドを実行します。
composer require laravel/ui "1.x" --dev
このコマンドはLaravelのバージョンによって異なります。今回はLaravel6を用いたため、この様になっています。
公式では次のようなコマンドらしいです。
composer require laravel/ui:^1.0 --dev
どちらでも動きます。
ここで、最後のバージョンを忘れるとエラーが出るので気をつけましょう。
Using version ^3.1 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.
Problem 1
- laravel/ui[v3.1.0, ..., 3.x-dev] require illuminate/console ^8.0 -> found illuminate/console[v8.0.0, ..., 8.x-dev] but it conflicts with another require.
- Root composer.json requires laravel/ui ^3.1 -> satisfiable by laravel/ui[v3.1.0, 3.x-dev].
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
3-5.ログイン機能の実装
Laravel/uiがインストールできたら、ログイン機能を実装します。
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.
生成には成功しましたが、npmのパッケージをインストール必要があるようです。
3-6.npm installをする
上のメッセージ通りにコマンドを実行します。
npm install && npm run dev
4.ログイン/会員登録機能を確認する
右上にLOGINとREGISTERと出ています。これで完了です。一応ちゃんと動くかテストしてみましょう。
適当なアカウントを登録してみましょう。登録ができると次のように表示されます。
その後、右上のユーザー名のところをクリックしてプルダウンリストを表示させログアウトします。その次にLOGINで先程登録したアカウントでログインして、同じ画面が出れば完了です。
ものは試しで、登録していないアカウントでログインしてみましょう。
こんな感じで弾かれます。
5.おわりに
先週ログインフォームを作成していましたが、まさかこんなに簡単に作成できるとは思ってませんでした。便利すぎる。
さて、今作っているサービスはバイト先で使うもので、非IT系の人が使うことを前提にしているため、英語メッセージを日本語にする予定です。
とりあえずこれで入り口はできました。あとはメイン部分ですね。
pdfファイルを読み込んで、MySQLに登録し、前のデータとの差分を出力するサービスが作れればローカルでの作業は終わり。
このあとにAWSを使うという未知の作業があるんですけどね。