ダッシュボードへようこそ

ここでは管理画面の内容が表示されます。

\n@endsection"}]},{"type":"paragraph"},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"7. 開発サーバーの起動と確認"}]},{"type":"paragraph","content":[{"type":"text","text":"開発用サーバーを起動します。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"bash","filename":null,"codeBlock":null},"content":[{"type":"text","text":"# Laravelアプリの起動\ndocker compose up -d\n\n# appコンテナに入る\ndocker compose exec app sh\n\n# sassのインストール\nnpm install sass sass-loader\n\n# Viteの開発サーバーを起動\nnpm run dev"}]},{"type":"paragraph","content":[{"type":"text","text":"ブラウザで"},{"type":"text","marks":[{"type":"code"}],"text":"http://localhost"},{"type":"text","text":"にアクセスし、変更が即座に反映されるか確認します。"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"8. Font Awesomeの導入"}]},{"type":"codeBlockWithFilename","attrs":{"language":"bash","filename":null,"codeBlock":null},"content":[{"type":"text","text":"npm install @fortawesome/fontawesome-free "}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"SASSファイルでのインポート"}]},{"type":"codeBlockWithFilename","attrs":{"language":"scss","filename":null,"codeBlock":null},"content":[{"type":"text","text":"// app.scss\n@import \"@fortawesome/fontawesome-free/css/all.css\";"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"アイコンの使用例"}]},{"type":"codeBlockWithFilename","attrs":{"language":null,"filename":null,"codeBlock":null},"content":[{"type":"text","text":" "}]},{"type":"paragraph"},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"9. まとめ"}]},{"type":"paragraph","content":[{"type":"text","text":"これで、Laravel、Docker、Vite、SASSを使用した開発環境が整いました。"}]},{"type":"paragraph","content":[{"type":"text","text":"この環境を使うことで、リアルタイムでのホットリロードが可能になり、効率的なWeb開発が進められます。"}]}]}

DockerでLaravel 11とViteを使った最新開発環境を構築完全ガイド