この記事の最終更新日: 2023年4月7日

備忘録としてまとめておきます。
DockerでLaravel9,PHP8.2,nginx,MySQLで環境構築
この記事が最高にわかりやすいです。

【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン - Qiita
前置きが長いので、Docker, Git, GitHubの設定が終わってる人はここから始められます。【実際にLaravel開発を始める方へ】本記事はハンズオンということもあり、初歩的な内容かつ最小限の構成になっております。実際に開発を始める...
M1MacBookだと、MySQLを使ったDBサーバの構築などが躓きやすいポイントです。
丁寧な解説に沿って、確実に進めていけば20分以内にここまでの環境構築が終わります。
注意点として、php/Dockerfileの1行目は、
「FROM php:8.0-fpm-buster」から、
「FROM php:8.2-fpm-buster」に変更し、
Laravelをインストールするタイミングで、バージョンを9に指定してください。
「composer create-project –prefer-dist “laravel/laravel=8.*” .」から
「composer create-project –prefer-dist “laravel/laravel=9.*” .」に変更。
React.js TypeScript TailWindCSSの導入(Node.js(npm)を使います。)
これらは参考にさせていただいた記事ですが、
そのままやるとエラーで躓いてしまったりしたので、本記事に再編集してみました。

【環境構築】LaravelでReactとTypescriptを使う方法 - Qiita
今回はLaravelでreactとTypescriptを使えるように開発環境を構築していきます。初学者なので2週間ぐらいかかってしまいましたが誰かの参考になれば幸いです。#開発環境Docker…

[簡単]React x LaravelのSPAで作るチュートリアル①(環境構築編) - Qiita
SPAで作るタスク管理アプリのチュートリアル勉強会に参加したりするとReact.jsとかVue.jsやってみたくて勉強はしてるけど、LaravelとかRailsと、どうつなぎ込んでいいか分からんっ…
TailWindCSSの参考記事はこちら。
本記事はこれらの記事をミックスして再編集したようなものです。
React導入
# appコンテナに入って、UIパッケージ導入
$ docker-compose exec app composer require laravel/ui
# appコンテナに入って、React.js導入 --authで認証機能も追加という意味
$ docker-compose exec app php artisan ui react --auth
# Laravelプロジェクトの存在する(package.jsonが存在する)ディレクトリにてインストール
# 上の記事の通り作っていたらbackendディレクトリ配下
$ npm install
#実行してみる
$ npm run dev
# TypeScript React.jsで必要なパッケージをインストール
$npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev
#tsconfigファイルを作成
$ touch tsconfig.json
#TailWindCSSをインストール
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
#tailwindCSSの設定ファイルを生成
$ npx tailwindcss init
tsconfigファイルを編集
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es2015", //フロント使用予定なのでcommonjsは使用しません
"jsx": "react", // tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定する
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es6",
"lib": [
"es2016",
"dom"
],
"allowSyntheticDefaultImports": true // エクスポートしないモジュールからのインポートを許可する。これでtypescriptでreactをインポートするときにimport React from 'react';を使えるようになる
},
"include": [
"resources/ts/**/*" // TypeScriptのソース配置場所
]
}
welcome.blade.phpを編集
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
</head>
<body>
<div id="app"></div>
</body>
<script src="{{ mix('/js/index.js') }}"></script>
</html>
resouces/ts/index.tsxファイルを生成
import React from 'react';
import ReactDOM from 'react-dom';
const App: React.FC = () => {
return (
<div>
<h1 className="font-bold text-center text-5xl text-yellow-700">
ゆるプロ<span className="text-blue-900">日記</span>
</h1>
</div>
)
}
if (document.getElementById('app')) {
ReactDOM.render(<App />, document.getElementById('app'));
}
tailwind.config.jsを編集
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.tsx',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
LaravelMix(webpack.mix.js) を編集
webpack.mix.js を編集
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.ts('resources/ts/index.tsx', 'public/js')
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
])
.sass('resources/sass/app.scss', 'public/css')
.version();
CSSファイルの修正
resources/css/app.css
ファイルを下記のように修正。
@tailwind base;
@tailwind components;
@tailwind utilities;
ビルドして確認
$ npm run dev
画面を確認して、ゆるプロ日記という文字がtailwindCSSが適用された上で表示されていれば成功です。

大阪のエンジニアが書いているブログ。
コメント