はじめに
こんにちは、ゆきおです。
久しぶりにLaravel触ってみるかーとふと思い立って、ライブラリを適当に試してみることにしました。
今回はAPIライブラリであるSanctumを試すついでに、Sailでプロジェクトを作成してViteでVue.jsも導入してSanctumを試してみたいと思います。
長くなりそうなので環境構築から書いていきます。
Laravel Sailでプロジェクトを作成する
Laravel SailはDocker経由で簡単にLaravelプロジェクトを作成できちゃう便利機能です。
まずWindowsユーザーの方はWSL2とUbuntuをインストールしておく必要があります。
Docker、WSL2、Ubuntuの三点セットをインストールしましょう。
インストール出来たら、PowerShellからUbuntuを起動し以下のコマンドを叩きます。
curl -s "https://laravel.build/simple-crud-app" | bash
”simple-crud-app”はプロジェクト名です。お好きなものを設定してください。
また、ここでバージョン指定などもオプションでできたような気がします。
指定しなければ最新（LTS?）のバージョンで作成されるようです。
これでしばしほっておいてパスワードを入力すると
「Thank you! We hope you build something incredible. Dive in with: cd simple-crud-app && ./vendor/bin/sail up」
というふうに出てきます。
これでプロジェクトは作成できたのでここからはプロジェクトフォルダの中で作業します。
エイリアスを設定する
cdでプロジェクトに入ってから、例えばSail環境では ./vendor/bin/sail upでサーバーを立てることができます。
またartisanコマンドも./vendor/bin/sailを付ける必要があるのですこしめんどくさいです。
なのでエイリアスというものを設定して、「sail」だけで実行できるようにします。
まずは以下のコマンドを叩いて結果を見てみましょう
echo $SHELL
/bin/bash または /usr/bin/bash が出力される場合：Bash
/bin/zsh または /usr/bin/zsh が出力される場合：Zsh
この出力でエイリアスの設定が少し変わります。
# Bashの場合
echo 'alias sail="./vendor/bin/sail"' >> ~/.bashrc
# Zshの場合
echo 'alias sail="./vendor/bin/sail"' >> ~/.zshrc
次に
# Bashの場合
source ~/.bashrc
# Zshの場合
source ~/.zshrc
これでエイリアスが設定出来ていると思うので 「sail up」 と入力してみてサーバーが起動したらOKです。
これ以降は「sail ○○」でインストールなど行います。
ただし基本的にどのコマンドもSailを起動していないと使えないので、「sail up -d」 を叩いてから各コマンドを実行するというのを覚えておきましょう。
-dオプションをつけることでSailを起動したうえで他のコマンドを叩くことができます。
ということでSailを起動し、Sanctumのインストールとマイグレーションを行いましょう
sail composer require laravel/sanctum
sail artisan migrate
Vue.jsを導入する
せっかくなのでLaravelと一緒によく使われるVue.jsも入れておきましょう。
まずはnpmをインストールします
sail npm install
しばしインストールが走ります。
終わったらVue3をインストールしましょう。
sail npm install vue@3 @vitejs/plugin-vue
これらが終わったらプロジェクト内のvite.config.jsにインポートします。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});
そしたらresources/js内に「App.vue」ファイルを作成します。
<template>
<div id="app">
<h1>Hello, Vue.js with Vite!</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
次に同じフォルダにある「app.js」を編集します。
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
最後にresource/viewsにあるwelcome.blade.phpからApp.vueを呼び出すようにします。
ちなみにデフォルトだとログイン画面のようなものが生成されています。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
これでターミナルから以下のコマンドを叩いてViteのサーバーを起動し、ローカルホストにアクセスしたら 「Hello, Vue.js with Vite!」 と出ているかなと思います。
sail npm run dev
おわり
これで環境構築は一通り終わりです。
次からはSanctumを使ってなんか適当にAPI実装してみようと思います。
最後に「sail down」でサーバーをシャットダウンしておきましょう。