🔔 本の下書きプレビューをシェアできるようになりました
Zenn
📘

EC2でneovimを使いながらlaravel11の初期設定を行ってみる(起動からhmrを使ったdashboardのちょっとした改変まで)

2025/01/11に公開
Laravel
Neovim
Vite
blade
Laravel 11
tech

そのうち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に保存しておいた方が遥かに楽なので

.env
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をカスタマイズしていく

最初のプラグインの導入

~/.config/nvim/init.lua
-- 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はやっぱこの界隈ではニッチなので、なんとかする

~/.config/nvim/init.lua
-- 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

ログインするとコメントできます