- 投稿日：2021-04-28T18:59:02+09:00
Laravel 8 のtailwindcssにGoogle fontsを入れてみた。
筆者の立ち位置 php & Laravelの初学者 現場での開発経験なし 独学で地域活性化支援のアプリ制作を行うため、Laravelを学んでいる 今回のやりたいこと Laravel 8（Jetstream適用済み）のtailwindcssでGoogle Fontsを使いたい。 きっかけ 明朝体で文章を書きたかったのですが、認証で使用する『Jetstream』でtailwindcssを使用しており、このCSSではデフォルトfont-familyに日本語対応のフォントが見当たらず。。。 追加しなくちゃなぁ、ということであれこれ調べました。 今回の環境 Macのローカル環境 macOS Big Sur(バージョン 11.2.3) MacBook Pro (Retina, 13-inch, Late 2013) 事前準備 すでにLaravel 8が利用できる環境になっていること パッケージ管理ツールであるnpmが使えること まだの場合は後述の参考を参照のこと。 導入 今回は２種類の導入方法について触れておきます。正直、どっちでもいい気がしますが、実際にLaravelで開発をされている方はどちらなのか、興味津々です。 リンクタグによる導入 importによる導入 リンクタグによる導入 bladeファイルのヘッダにタグを挿入し、styleを設定する方法。 index.blade.phpのコメントアウト業に説明書きを付与しております。 Qiitaの仕様なのか、拡張子.blade.phpだと色が変わらないのでちょっと寂しい。 厳密に言えば、.bladeは拡張子じゃないけれど。 index.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Google fontsで使いたいフォントを選択し、linkタグをコピー＆ペーストする。 --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet"> <!-- スタイルを設定する --> <style> p { font-family: 'Noto Serif JP'; } </style> <title>Document</title> </head> <body> <p>pタグ全般にfont-family: 'Noto Serif JP'が適用されるよ！</p> </body> </html> style部分をtemplete化すると、もうちょっと導入しやすいのかも。tailwindcssのお得感はなくなってしまうところがちょっと残念。 importによる導入 tailwindcssで使用しているapp.cssファイルに組み込んで使用する方法。 開発側のapp.cssにimportデータを記載する。 WebApp ├ resources ├ css └ app.css app.css // 今回新たにGoogle fontsで取得したimportのurlをコピー＆ペースト @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); // app.cssにデフォルトでimportされている項目 @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; tailwind.config.jsファイルにfont-familyを宣言する。 tailwind.config.js (中略) theme: { extend: { fontFamily: { sans: ['Nunito', ...defaultTheme.fontFamily.sans], // theme - extend - fontfamily 配下に 『Notoserif』とクラス名をつけて宣言しました。 Notoserif: ['Noto Serif JP'], }, }, }, 本番側のapp.cssに反映させる 開発環境のresources/css/app.cssに追記した内容を本番環境のpublic/css/app.cssへ反映させる。 WebApp ├ public ├ css └ app.css このファイルは直接いじらず、パッケージ管理で使用するnpmを使用して開発環境で設定した行を反映させる処理を行う。 % npm install && npm run dev blade.phpでタグを挿入し、css/app.cssを呼び出す。 VS Codeなどで新たにblade.phpを作成してhtml:5を展開した場合、リンクタグによるapp.cssの宣言が入っていないので、忘れずに書くこと。laravelでpublicフォルダ内のファイルを呼び出すときはasset()を使うのがおすすめ。 index.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 本番環境のapp.cssを呼び出す --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <title>Document</title> </head> <body> <!-- tailwind.config.jsで宣言したクラスを、適用したいタグに付与する。 --> <p class="Notoserif">クラス名”Notoserif”のpタグに対してfont-family: 'Noto Serif JP'が適用されるよ！</p> </body> </html> 以上で、Google Fontsが使えるようになります。（いや、なったはず？！） 同じ操作をしてうまく行かなかった方、ぜひ情報交換したいです。 #駆け出しエンジニアと繋がりたい 参考 事前準備 composerのインストール laravelのインストール via composerの項目を参照（Docker使わないから） テストアプリケーションの作成 % laravel new WebApp "WebApp"の部分は、お好きな名前をつけましょう。 初期設定 .envの更新 config/app.phpの更新 sqliteファイルの作成 動作確認 今回はローカル環境でのテストなのでDB_CONNECTION=sqliteに設定。 configフォルダ内のapp.phpには時刻設定（日本人ならtimezoneとlocaleを修正）。 databaseフォルダ内に新たなファイルdatabase.sqliteを作成。 この時点でmigrateしておくと、親切。 % php artisan migrate あとは適宜、良きに計らってくんなまし。 tailwindcss Jetstreamの導入 そもそも認証機能を使いたくてJetstreamを入れたら、tailwindcss使ってたというのが今回のネタにたどり着いた原因でもあるので、tailwindcss単体の導入と言うよりは、認証機能の追加ということでJetstreamの導入について触れておきます。 % php artisan jetstream:install livewire --teams % php artisan migrate % npm install && npm run dev
- 投稿日：2021-04-28T15:55:06+09:00
LaravelのログをCloudWatch Logsに投げる
CloudWatchFullAccess権限を持っているIAMユーザを作成 こちらの記事を参考にしてください。作成した時に生成されたアクセスキーとシークレットアクセスキーをenvファイルに記述しましょう。あと、LOG_CHANNEL=cloudwatchとしておきましょう。 .env LOG_CHANNEL=cloudwatch AWS_ACCESS_KEY_ID=xxxxxxxxxxxxxxxxxxxx AWS_SECRET_ACCESS_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxx AWS_DEFAULT_REGION=ap-northeast-1 ライブラリインストール 下記のコマンドを打ちましょう。composer経由でインストールします。これをインストールすると、依存関係で aws/aws-sdk-php、monolog/monologもインストールされます composer require maxbanton/cwh コード まずはこのクラスを作ります。 App\Logger\CloudWatchLogger.php <?php namespace App\Logger; use Aws\CloudWatchLogs\CloudWatchLogsClient; use Maxbanton\Cwh\Handler\CloudWatch; use Monolog\Logger; class CloudWatchLogger { /** * Create a custom Monolog instance. * * @param array $config * @return \Monolog\Logger */ public function __invoke(array $config) { $sdkParams = $config["sdk"]; $tags = $config["tags"] ?? [ ]; $name = $config["name"] ?? 'cloudwatch'; // Instantiate AWS SDK CloudWatch Logs Client $client = new CloudWatchLogsClient($sdkParams); // Log group name, will be created if none $groupName = config('app.name') . '-' . config('app.env'); // Log stream name, will be created if none try { $instance_id = file_get_contents("http://169.254.169.254/latest/meta-data/instance-id"); // <- ※１ } catch (\Exception $e) { $instance_id = null; } $streamName = $instance_id ?? config('app.hostname', 'localhost'); // <- ※２ // Days to keep logs, 14 by default. Set to `null` to allow indefinite retention. $retentionDays = $config["retention"]; // Instantiate handler (tags are optional) $handler = new CloudWatch($client, $groupName, $streamName, $retentionDays, 10000, $tags); // Create a log channel $logger = new Logger($name); // Set handler $logger->pushHandler($handler); return $logger; } } config/logging.php の 'channels' => [ ] に、以下を追加します。 config/logging.php 'cloudwatch' => [ 'driver' => 'custom', 'via' => App\Logger\CloudWatchLogger::class, // <- 上で作成したロガークラス 'sdk' => [ 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 'version' => 'latest', 'credentials' => [ 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY') ] ], 'retention' => env('CLOUDWATCH_LOG_RETENTION', 7), // <- ログ保存期間（null の場合は無制限） ], 実際にログを吐き出すようにしましょう。CloudWatch Logsより確認できたら完了です。 public function index() { Log::error('エラーが発生しました'); } 参考文献 ・https://idealive.jp/blog/2019/07/22/laravel-amazon-cloud-watch-logs/
- 投稿日：2021-04-28T14:59:58+09:00
Laravelで入れ子構造のform
Laravel Collectiveで入れ子構造のformの書き方 前提 バージョン：Laravel6、HTML5 Laravel Collective 導入済み 実装方法 HTML5ではinputタグにform属性を追加することで任意のformに対応させることができる。 ①formにidを付ける Form::openの引数でidを設定する。 {!! Form::open(['route' => 'ルート指定', 'method' => 'メソッド指定', 'id' => 'id指定']) ②inputにform属性を付ける Form::**の引数でform属性にformタグのidを指定する。 {!! Form::text('変数名', '初期値', ['form' => 'formのidを指定']) !!} {!! Form::submit('表示名', ['form' => 'formのidを指定']) !!} ③中身を任意の場所に置く formタグ自身は入れ子にできないため、中身だけを任意の場所に置く。 サンプル 簡単なサンプル。 このサンプルでは入れ子にする意味は特にないが、入れ子構造はフォーム内にリセット・検索・抽出など機能を持つ要素を配置したいときに役立つ。 コード demo.blade.php <body> <!-- formタグ自身は入れ子にできないので外側に配置 --> {!! Form::open(['route' => 'demo1', 'method' => 'post', 'id' => 'form1']) !!} {!! Form::close() !!} <!-- 本体となるform --> {!! Form::open(['route' => 'demo2', 'method' => 'post', 'id' => 'form2']) !!} <!-- 入れ子にしたいformの中身 --> <div> {!! Form::label('text1', 'フォーム1') !!} {!! Form::text('text1', '', ['form' => 'form1']) !!} {!! Form::submit('送信1', ['form' => 'form1']) !!} </div> <!-- 本体となるformの中身 --> <div> {!! Form::label('text2', 'フォーム2') !!} {!! Form::text('text2', '', ['form' => 'form2']) !!} {!! Form::submit('送信2', ['form' => 'form2']) !!} </div> {!! Form::close() !!} <p>フォーム1の送信結果：{{ $text1 }}</p> <p>フォーム2の送信結果：{{ $text2 }}</p> </body> web.php Route::get('/demo', 'DemoController@demoget')->name('demo'); Route::post('/demo1', 'DemoController@demo1')->name('demo1'); Route::post('/demo2', 'DemoController@demo2')->name('demo2'); DemoController.php public function demoget() { return view('demo',[ 'text1' => '未送信', 'text2' => '未送信' ]); } public function demo1(Request $request) { $text1 = $request->text1; return view('demo',[ 'text1' => $text1, 'text2' => '送信なし' ]); } public function demo2(Request $request) { $text2 = $request->text2; return view('demo',[ 'text1' => '送信なし', 'text2' => $text2 ]); } 実行結果 ~/demoにgetアクセス 上記入力の状態で「送信1」 上記入力の状態で「送信2」
- 投稿日：2021-04-28T13:19:50+09:00
「DockerでNuxt.jsとLaravelの環境を作りたい」と思い立ったので、4つのコマンドで実行できるようにしたよ
はじめに はじめまして！ 最近Nuxt.jsとLaravelで開発することが増えてきたので、Dockerで環境を作りました。 意外とヒットする記事がないので書いてみることにしました。 環境 Dockerfile PHP(7.4-fpm-buster) Nginx(1.18-alpine) MySQL(5.7) Node.js(14.15.3-alpine) 作れる環境 Nuxt.js Laravel TypeScript Vue3.0(Composition-API) Storybook Github コードはすべてGitHubに上げています。 詳しく確認されたい方はこちらをご確認ください。 それでは環境を作っていきましょう！ ターミナル $ git clone git@github.com:ssk9597/Docker-Laravel-Nuxt-Nginx-MySQL.git $ cd Docker-Laravel-Nuxt-Nginx-MySQL $ make nuxt $ make backend この4つのコマンドで、Nuxt.jsとLaravelの環境ができました。 ただこのままでは、Nuxt.jsとLaravel間での通信ができないため一部ファイルの修正が必要です。 それでは修正していきましょう！ ファイルの修正 frontend フロントエンドは2つのファイルの修正をします。（一応検証のためにpages/index.vueも修正します。） nuxt.config.jsの修正 frontend/nuxt.config.js const environment = process.env.NODE_ENV || 'development'; require('dotenv').config(); export default { modules: [ '@nuxtjs/axios', '@nuxtjs/proxy', '@nuxtjs/dotenv', ], proxy: { '/api': environment === 'development' ? process.env.API_URL : 'https://www.example.org', }, axios: { baseURL: process.env.API_URL, browserBaseURL: process.env.API_BROWSER_URL, credentials: true, }, }; .envの修正 .env API_URL=http://web/api API_BROWSER_URL=http://localhost:10080/api pages/index.vueの修正で検証 frontend/pages/index.vue <template> <div> <h1 class="title"> {{ text }} </h1> </div> </template> <script> export default { async asyncData({ $axios }) { const text = await $axios.$get('/'); return { text, }; }, data() { return { text: '', }; }, }; </script> api api側は検証のために1つファイルを修正します。 api/routes/api.php <?php Route::get("/", function () { return "Hello World!"; }); これで完了です。 こうなります。 しっかり通信できてますね！ ここからは任意で追記していきましょう！ TypeScript TypeScriptの導入はファイルの追記も必要になります。 ターミナル $ make typescript ファイルの修正 shims-vue.d.tsに追記 frontend/shims-vue.d.ts declare module '*.vue' { import Vue from 'vue'; export default Vue; } tsconfig.jsonに追記 frontend/tsconfig.json { "compilerOptions": { "target": "ES2018", "module": "ESNext", "moduleResolution": "Node", "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], "esModuleInterop": true, "allowJs": true, "sourceMap": true, "strict": true, "noEmit": true, "experimentalDecorators": true, "baseUrl": ".", "paths": { "~/*": ["./*"], "@/*": ["./*"] }, "types": ["@nuxt/types", "@types/node"] }, "files": ["shims-vue.d.ts"], "include": [ "components/**/*.ts", "components/**/*.vue", "layouts/**/*.ts", "layouts/**/*.vue", "pages/**/*.ts", "pages/**/*.vue" ], "exclude": ["node_modules", ".nuxt", "dist"] } Composition-API Composition-APIの導入も、ファイルの追記が必要になります。 ターミナル $ make composition-api ファイルの修正 プラグインの追加 frontend/plugins/composition-api.ts import Vue from 'vue'; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi); nuxt.config.jsに追加 frontend/nuxt.config.js export default { plugins: ['@/plugins/composition-api'], }; Storybook Storybookの導入はコマンドだけでOKです。 ターミナル $ make storybook // 再起動したいとき $ make re-storybook これでフルパッケージの環境が作れます！ だいぶ簡単ですね。 ここからはたくさんコードを書いて開発していきましょう！！
- 投稿日：2021-04-28T12:16:14+09:00
【Redis】DockerのLaravel環境にRedisとphpredisを導入する
初めに Laravelの日本語ドキュメントをもとにDockerのLaravel環境にRedisを導入しようとしたところ、細かいところで追加の操作が必要だったので導入方法を備忘録として残しておきます。 環境 Docker v20.10 Laravel v6.20 Redis v6.2 phpredis v5.3 ディレクトリ構造 ├── laravel ├── infra │ └─ php │ └─ Dockerfile └── docker-compose.yml docker-compose.ymlにredisコンテナを定義する docker-compose.yml version: "3.8" volumes: php-fpm-socket: services: app: build: ./infra/php volumes: - php-fpm-socket:/var/run/php-fpm - ./laravel:/work/laravel redis: image: "redis:latest" ports: - "16379:6379" appコンテナでphpredisを有効化する phpredisのパッケージをpecl経由でインストールしappコンテナで有効化します。 Dockerfile FROM php:7.4-fpm-buster RUN apt update && \ apt -y install && \ pecl install redis && \ docker-php-ext-enable redis WORKDIR /work/laravel ここで気を付けなければならない点は、pecl install redisをした時点ではphpredisが有効になっていません。 この状態でlaravelのRedisファサードを使用しても PHP Error: Class 'Redis' not found in /path/to/laravel/vendor/laravel/framework/src/Illuminate/Redis/Connectors/PhpRedisConnector.php on line 75 のように\Redisクラスが見つからないというエラーが発生します。 なので、pecl install redisを実行した後、忘れずにdocker-php-ext-enable redisを実行しましょう。 .envのREDIS_HOSTを設定する .envのREDIS_HOSTにRedisコンテナ名を指定します。 .env APP_NAME=Laravel ... REDIS_HOST=redis app.phpのエイリアスからRedisを削除 app.php <?php return [ // 'aliases' => [ 'App' => Illuminate\Support\Facades\App::class, // 'Redis' => Illuminate\Support\Facades\Redis::class, // これを削除かコメントアウトする // ], ]; laravelからRedisにデータを追加できるか確認 まずはappコンテナからRedisにデータを追加します。 $ docker-compose exec app bash :/work/laravel php artisan tinker >>> use Illuminate\\Support\\Facades\\Redis; >>> Redis::set("str", "test"); redisコンテナのRedisに上記のデータが保存されていたら設定完了です。 $ docker-compose exec redis bash :/data redis-cli > keys * 1) "laravel_database_str" # デフォルトで"laravel_database"がプレフィックスとして付加される > get laravel_database_str "test"
- 投稿日：2021-04-28T10:29:30+09:00
Laravel Sail が絶妙に使いづらかった件
お疲れ様です。 新しくプロジェクトを構築しようと思い、新し目のソリューションのLaravel Sailを利用してみました。 使ってみた結果、良い点もありましたが絶妙に使いづらかったので、整理のためにまとめます。 公式： https://readouble.com/laravel/8.x/ja/sail.html 良い点 ローカル環境が爆速で構築できる すでにDockerを利用している人なら数ステップでローカル環境が構築できます。 docker-compose.yml等を書く必要がありません。 使いづらい点 全体的に、プロジェクト作者のためだけの設定になっているように思います。 これをリモートリポジトリにpushし、他の人がcloneする際に問題が発覚します。 ./vendor/bin/sail が .gitignore で無視されている vendor配下はデフォルトで.gitignoreに記載されているので、git cloneした人はsailコマンドを打つことができません。 また、./vendor/bin/sailの他に./vendor/laravel/sailも必要です。 他の開発者にもLaravel Sailを利用してもらうなら（普通はそうしたいと思いますが）、 vendorの一部のファイルの無視設定をやめるため、vendor配下に以下のファイルを追加するなどの対応をする必要があります。 つまり依存パッケージ(sail)をリモートリポジトリにpushできるようにしてしまっているのでいまいちです。 （これをやらずに最初はdocker-compose upしてもらうようにすれば良いか…?？） ./vendor/.gitignore /* !.gitignore !/bin/ /bin/* !/bin/sail !/laravel/ /laravel/* !/laravel/sail composerのscriptが実行された前提になっている プロジェクトをcloneした人は自前で以下のコマンドを打つ必要があります。 （もちろんMakefileなどで管理するのでも良い） （composer createでプロジェクトを作成した人は、composerのscriptが実行されるので何もしなくてもOK） cp .env.example .env 上記が無いと、コンテナ構築の際に.envの設定を読めないため、 コンテナを作り直さないとrole "root" does not exist docker(PostgreSQLの場合)とか言われてDBに接続できなくなったりします。 upする前に必ず.envを用意してください。 ./vendor/bin/sail composer run-script post-create-project-cmd #または ./vendor/bin/sail php artisan key:generate --ansi 上記が無いと、No application encryption key has been specified.とか言われてLaravelが実行できません。 composer installされている前提でwebサーバーが動く プロジェクトをgit cloneしてきたらまず、依存パッケージをインストールするため、composerをinstallしないとLaravelが動きません。 そのためにsail upしますが、webサーバーはcomposerがinstallされていないとエラーを吐いて接続できなくなります。 up -> composer install -> 接続 としたいですが up -> composer install -> down -> up -> 接続 としないと接続できません。