【开发记录】使用laravel 做书签网站

摘要

正在生成中……

安装 sail docker开发环境

curl -s https://laravel.build/bookmarks | bash
cd bookmarks && ./vendor/bin/sail up

修改 .env 设置适合我的开发环境, 前面添加：

#for macOS dev
WWWUSER=501
WWWGROUP=20
#SAIL_XDEBUG_MODE=off
APP_PORT=10080
VITE_PORT=15173
FORWARD_DB_PORT=13306
FORWARD_REDIS_PORT=16379
FORWARD_MEILISEARCH_PORT=17700
FORWARD_MAILPIT_PORT=11025
FORWARD_MAILPIT_DASHBOARD_PORT=18025
#end for macOS dev

为了避免跟之前项目的vite开发端口冲突，因为都要在宿主机监听，我修改了默认端口到 15173，同时为了在orbstack开发方便，在 labels 设置了主机名。

docker-compose.yml修改如下

    laravel.local:
        labels:
            - dev.orbstack.domains=${APP_NAME}.local
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-15173}:${VITE_PORT:-15173}'
...

重新编译镜像，传入部分参数如 WWWGROUP

docker compose build laravel.local

进入laravel.local容器，安装必要的js模块，如vite

docker compose  exec -it laravel.local /bin/bash
npm install
npm run dev

启动成功

  VITE v5.0.12  ready in 341 ms

  ➜  Local:   http://localhost:15173/
  ➜  Network: http://198.19.204.7:15173/
  ➜  press h + enter to show help

  LARAVEL v10.41.0  plugin v1.0.1

  ➜  APP_URL: http://bookmarks.local

但是这里有点问题, 我只想让它在 bookmarks.local 的端口15173监听，可以修改 vite.config.js ，加入server的配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: 'bookmarks.local', // 这里设置监听的IP
        //port: 15173 // 这里设置监听的端口，如果不对，要修改一下
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

使用docker compose 启动

docker compose  exec -it laravel.local npm run dev

安装livewire，生成独立配置文件

composer require livewire/livewire
php artisan livewire:publish --config

发现没有安装tailwindcss，使用vite 和laravel的安装 参考：https://www.tailwindcss.cn/docs/guides/laravel

npm install -D tailwindcss postcss autoprefixer
#生成配置文件tailwind.config.js和postcss.config.js
npx tailwindcss init -p

安装breeze 做用户注册登录

composer require laravel/breeze
php artisan breeze:install
npm install && npm run dev

我选择 livewire 和 volt 的选项

生成 breeze 的相关表

php artisan migrate

注册控制台报错：

livewire.js?id=11c49d7e:6889 Uncaught (in promise) TypeError: Alpine.navigate is not a function

原因是Breeze自带了自己的Alpine安装，与livewire的Alpine有冲突，打开resources/js/app.js，删除相关内容。

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

运行 npm run build

参考： laravel - Livewire V3: Keep getting Uncaught TypeError: Alpine.navigate is not a function - Stack Overflow

安装一些有用的laravel package

• debug 条

composer require barryvdh/laravel-debugbar --dev

我总结了一篇其用法的文章

• 检查n+1查询

composer require beyondcode/laravel-query-detector --dev

• 一个laravel的简单备份组件，文档 https://spatie.be/docs/laravel-backup/v8/introduction

composer require spatie/laravel-backup
#生成备份组件配置
php artisan vendor:publish --provider="Spatie\Backup\BackupServiceProvider"
#备份
php artisan backup:run

默认备份文件放在 storage/app/bookmarks/ 目录下。 加入计划任务

// app/Console/Kernel.php
protected function schedule(Schedule $schedule)
{
   $schedule->command('backup:clean')->daily()->at('01:00');
   $schedule->command('backup:run')->daily()->at('01:30');
}

• 另一个调优和debug工具 telescope,不同的是它还有日志

composer require laravel/telescope
php artisan telescope:install
php artisan migrate

打开 telescope 控制台 , 可以开启黑暗模式

// app/Providers/TelescopeServiceProvider.php
    /**
     * Register any application services.
     */
    public function register(): void
    {
        Telescope::night();