Zenn
Open3

Docker で Laravel + Remix 環境を構築する

Kosuke.MKosuke.M

最近業務上で既存のLaravelの環境にフロントエンドとしてRemixを導入する機会があった。
自分はRemixどころかReactの経験すらあまりないので、これを機に一から環境を構築して理解を深めていこうと思う。

想定している環境は以下の通り。

  • PHP 8.3
  • Laravel 11
  • React 18
  • Remix v2
  • Docker
Kosuke.MKosuke.M

まずはプロジェクトのディレクトリを作成する。

mkdir laravel-remix-sample
cd laravel-remix-sample/

APIとなるLaravelのプロジェクトを作成する。

composer create-project laravel/laravel api
cd api
php artisan serve


Laravel 初期画面

ここまでは良さそう。
php artisan serve 自体は今後は使われない（はず）。

今回、このLaravelのプロジェクトはAPIに特化してもらうので、
後々余計なライブラリが導入されるのを防ぐために、package.json等のjs関連のファイルは削除しておく。

rm -f package.json postcss.config.js tailwind.config.js vite.config.js
Kosuke.MKosuke.M

プロジェクトのルートディレクトリ上でフロントエンド用のディレクトリを作成する。

mkdir frontend
cd frontend

公式の通りにRemixをインストールしていく。

% npm create remix@latest frontend/

Need to install the following packages:
create-remix@2.14.0
Ok to proceed? (y) y


> npx
> create-remix frontend/


 remix   v2.14.0 💿 Let's build a better website...
      ◼  Directory: Using frontend/ as project directory

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./frontend
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

すごい簡単。
起動してみる。

cd frontend/
npm run dev


Remix 初期画面

この画面が出たら一旦OK。