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

ITインフラ

この記事の最終更新日: 2022年2月10日

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

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

DockerでLaravel9,PHP8.1,nginx,MySQLで環境構築

この記事が最高にわかりやすいです。

【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン - Qiita
前置きが長いので、Docker, Git, GitHubの設定が終わってる人はここから始められます。 概要 docker(docker-compose)でLEMP環境(PHP/nginx/MySQL)を構築し、Laravelの新...

M1MacBookだと、MySQLを使ったDBサーバの構築などが躓きやすいポイントです。

丁寧な解説に沿って、確実に進めていけば20分以内にここまでの環境構築が終わります。

注意点として、php/Dockerfileの1行目は、

「FROM php:8.0-fpm-buster」から、

「FROM php:8.1-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 20.10.5 docker-...
[簡単]React x LaravelのSPAで作るチュートリアル①(環境構築編) - Qiita
SPAで作るタスク管理アプリのチュートリアル 勉強会に参加したりするとReact.jsとかVue.jsやってみたくて勉強はしてるけど、LaravelとかRailsと、どうつなぎ込んでいいか分からんって人が多いみたいやな。 転職...

TailWindCSSの参考記事はこちら。

本記事はこれらの記事をミックスして再編集したようなものです。

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

コメント

タイトルとURLをコピーしました