【Docker&Node.js】Laravel9, PHP8.2, nginx, MySQL, React.js, TypeScript, TailwindCSSで環境構築【Apple Silicon M1Pro対応】

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

【Docker&Node.js】Laravel8,PHP8,nginx,MySQL React.js,TypeScript,TailwindCSSで環境構築【M1 M1Pro M1Max対応】

備忘録としてまとめておきます。

DockerでLaravel9,PHP8.2,nginx,MySQLで環境構築
React.js TypeScript TailWindCSSの導入（Node.js(npm)を使います。）
ビルドして確認

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が適用された上で表示されていれば成功です。

daigoro

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