まずは Docker をインストールする

公式から、Docker.dmgをダウンロードして、インストールする。

インストールが完了したら、ターミナルにコマンドを打ってちゃんとインストールされているか確認する。

$ docker

Hiroki Matsumoto 2021/10/25に更新

Docker に Laravel の環境を構築する

簡単 3 ステップ!

$ git clone https://github.com/ucan-lab/docker-laravel.git
$ cd docker-laravel
$ make create-project

localhostにアクセスして、Laravelの初期画面が表示されたら完了。
http://localhost

Hiroki Matsumoto 2021/12/12に更新

make create-projectコマンドを実行する前に必ずDockerは起動させておく。

Hiroki Matsumoto 2021/10/24

Reactの環境を構築する

順に以下のコマンドを実行する。

$ make npm
$ docker-compose exec app composer require laravel/ui
$ docker-compose exec app php artisan ui react --auth

Hiroki Matsumoto 2021/10/24

一旦ビルド

$ make npm-install
$ make npm-dev

Hiroki Matsumoto 2021/10/24に更新

TypeScriptを導入

node_modulesがあるディレクトリに移動してTypeScriptを導入

$ cd backend
$ npm install ts-loader typescript react-router-dom @types/react @types/react-dom @types/react-router-dom --save-dev

Hiroki Matsumoto 2021/10/24

`webpack.mix.js` を編集

const mix = require("laravel-mix");
mix.ts("resources/ts/App.tsx", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .version();

Hiroki Matsumoto 2021/12/13に更新

必要に応じてroutes/web.phpを修正

Hiroki Matsumoto 2021/10/25に更新

`tsconfig.json` を作成

まずは backend ディレクトリで touch 。
このファイルを編集しないとコンパイルエラーが起こる。

touch tsconfig.json

`tsconfig.json`を編集

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es2015",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "moduleResolution": "node",
        "target": "es6",
        "lib": ["es2016", "dom"],
        "allowSyntheticDefaultImports": true
    },
    "include": ["resources/ts/**/*"]
}

まずは Docker をインストールする

Docker に Laravel の環境を構築する

Reactの環境を構築する

一旦ビルド

TypeScriptを導入

webpack.mix.js を編集

tsconfig.json を作成

tsconfig.jsonを編集

`webpack.mix.js` を編集

`tsconfig.json` を作成

`tsconfig.json`を編集