EC2でneovimを使いながらlaravel11の初期設定を行ってみる(起動からhmrを使ったdashboardのちょっとした改変まで)
そのうちbookに移行させる予定
目標
EC2起動する
まあ何かしないと初まらないからな、こういうやつは。星の数ほどあるチュートリアルの中で、本稿の独特なのはEC2をゼロから起動してゼロコンフィグから全て設定することだとは思う。
small
以上のスペックじゃないと多分動かなそう。との時は黙ってvimを使うという選択を取ろう
nvim入れる
sudo apt update
sudo apt -y upgrade
snapd入れる
bookwarmだと入るバージョンが古い為
sudo apt install -y snapd
sudo snap install nvim --classic
--classicはsandbox外にもアクセスできる。
$ sudo snap install nvim --classic
2025-01-11T02:40:21Z INFO Waiting for automatic snapd restart...
nvim v0.10.3 from neovim-snap (neovim-snap) installed
localeを整えておく
sudo apt install -y locales-all
dockerとgit
sudo apt install -y docker-compose git
docker.io
などは依存が勝手に解決されて入る
グループに追加
sudo adduser admin docker
一度ログアウトし、再度ログインすること。
以上
基本的にこれだけ。システムを可能な限りクリーンに保ちたいので、phpやらwebサーバーやらは一切導入しない
laravelの構築
基本的にlaravelは
- composer create-project
- laravel new
したりしてprojectを作れるのだが、これらは結局composerを使っているので大抵の場合phpがシステムに入ってないと辛い。laravel.buildを利用すればそういうのは必要がなく、curlだのwgetだのがあればいける。ここではcurlを使う
curl -s "https://laravel.build/example-app?with=mysql" | bash
https://laravel.com/docs/11.x#choosing-your-sail-services
ここに書いてあるように
-
mysql
: 定番のリレーショナルデータベースで安定性とスケーラビリティが高い。 -
redis
: 超高速なインメモリデータストアでキャッシュやセッション管理に最適。 -
meilisearch
: 軽量で高速な全文検索エンジン、シンプルな設定が魅力。 -
mailpit
: 開発環境向けのSMTPサーバーで、メール確認が簡単。 -
selenium
: ブラウザ自動操作の標準ツール、テストやスクレイピングに最適。
という5つのサービスからどれを組合せるか選ぶことができるのだが、これらは後から追加できるのでmysql
のみを選択。何か1つは必要みたいだ
実行中
初回は結構時間かかる。
このように
Get started with: cd example-app && ./vendor/bin/sail up
しろといって終了するので実行する
sailを起動
./vendor/bin/sail up
するだけなのだが、これをするとターミナルを取られちゃうので
./vendor/bin/sail up -d
してdetachする方法がある。ただ、これはproductionではいいかもしれんけど開発してると何がおきてるかよくわからなくなるので、screenとかで起動するか、sshを複数起動して1つをsailに割り当てるか、など工夫が必要と思う。以下はMobaXterm
でsshを複数起動した例
ポートを変更する
いよいよ編集作業
nvim .env
defaultで、このような色付きになっている。vimが触れる人はこれでもう十分作業できるとは思う。ここでは.envの編集程度でnvimのconfigをするのはダルいので適当にAPP_PORT
を加えていく
APP_PORT=8000
を書き加えた。これで再度sailを起動すると
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'laravel.sessions' doesn't exist
このようになる。これはsessionの保存がdefaultでDBになったからというのとDBの初期化をしていないからだ
DBの初期化を行う
./vendor/bin/sail artisan migrate:fresh --seed
を実行
またセッションはDBに保存するのはステートレスアプリのproductionでは考えられるんだろうけどスキーマがヨレヨレの段階での開発はfileに保存しておいた方が遥かに楽なので
SESSION_DRIVER=file
としておく
key:generate
./vendor/bin/sail artisan key:generate
なお、これは地味に
こんなのでもよかったりするから、個人的にはkey:gen
とか打ってる事が多い。いずれにせよ1回だけ打つものだし、laravel.buildでセットアップした場合は .envにすでに書き込まれている、が、.env.exampleには書き込まれていない から注意が必要。
これで大体動作する
breezeを入れる
laravelで認証するにあたってはほとんど鉄板
sailを使う場合、以下のようにする
./vendor/bin/sail composer require laravel/breeze --dev
その後
./vendor/bin/sail artisan breeze:install
でインストールする。
今回はフルスタックの場合大抵bladeが使われてるんだろうから、bladeを使ってみよう
このように、フロントはvite
を使って書き換えられているが、これに関してはまあちょっと置いておく。
いずれにしても、このようにログインのリンクが提供されるはずだ。
ログインしてみる
ここから
- Email: test@example.com
- Password: password
でログインできる
ログインした後の画面
Dashboardを書き換えていく
その前に
git init
git add .
git commit -m "Install Laravel Breeze for authentication scaffolding"
みたいにしてcommitしておくとよい
実際に書き換えていく
ここでまたnvimを使ってみよう
nvim resources/views/dashboard.blade.php
色々と苦しいが、ここで以下のように書き加えた
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -10,6 +10,9 @@
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
{{ __("You're logged in!") }}
+ <p class="mt-4 text-sm text-gray-700">
+ Laravelでフルスタック開発を始めましょう!
+ </p>
</div>
</div>
</div>
ここでブラウザーをリロードすると*
となるが、さすがにブラウザーをいちいちリロードしてるのは旧世代感が強い
HMR(Hot Module Replacement)をセットアップしていく
まずviteはvite.config.jsを評価するため、これを変更していく
nvim vite.config.js
殺風景なのでいよいよnvimをカスタマイズしていく
最初のプラグインの導入
-- lazy.nvim のパスを設定
local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
if not vim.loop.fs_stat(lazypath) then
vim.fn.system({
"git",
"clone",
"--filter=blob:none",
"https://github.com/folke/lazy.nvim.git",
"--branch=stable", -- 最新の安定版を使用
lazypath,
})
end
vim.opt.rtp:prepend(lazypath)
-- lazy.nvim を使用してテーマと nvim-treesitter を設定
require("lazy").setup({
-- Gruvbox テーマ
{
"ellisonleao/gruvbox.nvim",
priority = 1000, -- 優先度を高くしてテーマを適用
config = function()
require("gruvbox").setup({
contrast = "soft", -- Gruvbox のコントラスト設定 ("hard", "soft", "medium")
})
end,
},
-- Tokyonight テーマ
{
"folke/tokyonight.nvim",
priority = 1000, -- 優先度を高くしてテーマを適用
config = function()
-- Tokyonight 特有の設定を行いたい場合はこちらに記載
end,
},
-- nvim-treesitter
{
"nvim-treesitter/nvim-treesitter",
build = ":TSUpdate", -- Treesitterのアップデート
config = function()
require("nvim-treesitter.configs").setup({
ensure_installed = { "javascript", "typescript" }, -- 使用する言語
highlight = {
enable = true, -- シンタックスハイライトを有効化
},
})
end,
},
})
-- 初期テーマを Gruvbox に設定
vim.cmd("colorscheme tokyonight")
nvimを開き直すとこのようにプラグインが導入されていく
これはqコマンドで閉じれるが :qa! とかで抜けて
再度
nvim vite.config.js
すると、こうなる
vim.cmd("colorscheme tokyonight")
すればこうなる
ここから先は好みに依存するので探ってもらうとして、色がわかりやすくなったので
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
hmr: {
host: '35.78.169.208', // 【修正すること】クライアントが接続するHMR用のホスト名
port: 5173, // クライアントが接続するHMR用のポート番号
},
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true, // Bladeファイルなどの変更を検知
}),
],
});
admin
このようにする。手順通りにやっていればEC2のグローバルIPアドレスのベタ打ちになるがこれをcommitするのは流石にいささかアレなのでやめておくとしても最初はとにかく動かしてみるのがポイント
そしたら、
./vendor/bin/sail npm run dev
する
すると、このようにまたしても端末が取られてしまう
3つくらいなんとかして開く
bladeを何とかする
bladeはやっぱこの界隈ではニッチなので、なんとかする
-- lazy.nvim のパスを設定
local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
if not vim.loop.fs_stat(lazypath) then
vim.fn.system({
"git",
"clone",
"--filter=blob:none",
"https://github.com/folke/lazy.nvim.git",
"--branch=stable", -- 最新の安定版を使用
lazypath,
})
end
vim.opt.rtp:prepend(lazypath)
-- lazy.nvim を使用してテーマと nvim-treesitter を設定
require("lazy").setup({
-- Gruvbox テーマ
{
"ellisonleao/gruvbox.nvim",
priority = 1000, -- 優先度を高くしてテーマを適用
config = function()
require("gruvbox").setup({
contrast = "soft", -- Gruvbox のコントラスト設定 ("hard", "soft", "medium")
})
end,
},
-- Tokyonight テーマ
{
"folke/tokyonight.nvim",
priority = 1000, -- 優先度を高くしてテーマを適用
config = function()
-- Tokyonight 特有の設定を行いたい場合はこちらに記載
end,
},
-- nvim-treesitter
{
"nvim-treesitter/nvim-treesitter",
build = ":TSUpdate", -- Treesitterのアップデート
config = function()
require("nvim-treesitter.configs").setup({
ensure_installed = { "javascript", "typescript" }, -- 使用する言語
highlight = {
enable = true, -- シンタックスハイライトを有効化
},
})
end,
},
-- vim-blade
{
"jwalton512/vim-blade", -- Blade専用のハイライトプラグイン
ft = "blade", -- Bladeファイルのみにロード
},
})
vim.cmd("colorscheme tokyonight")
のようにしてvim-bladeを読みこませたらばresources/views/dashboard.blade.phpをもう一度開く。すると
このようになる。
HMRが効いているかどうかテスト
冒頭と同じ画像だが
課題
とりあえず最低限動いているだけでいろいろあやうい。次回はnvimにフォーカスして、もう少しマニアックな設定を施せればと思う。
Discussion