Portfolio

セミナーで以下のToDoアプリを作成したのですが、環境構築で凄く沼ったため忘れないようにメモする回です。

アプリ開発では Laravel フレームワークを使用しています。

実装コードは以下
・web-todo-app




Laravelに関しては以下です。
・The PHP Framework for Web Artisans

登録について

• 画面上部が「やること」を登録する入力フォームになっています


• 新規登録フォームに文字を入力した状態で「登録する」をクリックすると一覧(画面下部)に表示されます


• 空の状態で「登録」がクリックされるとサーバからエラーメッセージ「エラーが発生しました」が表示されます

一覧について

• 画面下部が投稿された内容を一覧表示する領域になっています


• 「削除」をクリックすると一覧から消えます


• 「チェックボックス」が押されたら斜線を引きます

右上の「Logout」と「hura」について

• 「Logout」をクリックするとログアウトできます


• 「hura」はユーザ名です。


• ログインしたユーザ自身が投稿した To Do 以外は見れないようになっています

ログイン

Laravelのページを開いて右上にある「Login」をクリックします。




以下のページに遷移するのでログインします。ログインするとToDoアプリが表示されます。

新規登録

Laravelのページを開いて右上にある「Register」をクリックします。




以下のページに遷移するので新規登録します。登録するとToDoアプリが表示されます。

1. Laravelプロジェクトの作成

以下のコマンドを実行すると、カレントディレクトリに todo というディレクトリが作成され、その中に Laravel のプロジェクトファイルが生成される。

• docker run --rm -it -v "$PWD":/app -u 1000:1000 composer create-project laravel/laravel todo

composerというパッケージマネージャーを使用してLaravelをダウンロードしている。

コンテナ内のユーザーIDとグループIDを 1000 というユーザー(Ubuntu インストール時に作成されている ubuntu という名のユーザ)で実行するように指定している。

2. Docker の環境構築

以下を Docker で使えるように調整する。

• PHP


• phpMyAdmin


• MySQL

カレントディレクトリに以下のディレクトリを置く

• web-todo-app

ターミナル(ubuntu)で以下のコマンドを順番に実行する。

• docker compose up -d
  (Dockerコンテナ起動)


• docker compose exec php bash
  (PHPコンテナ内に入る)


• php artisan migrate:fresh
  (データベースにsessionテーブルを作成)


• php artisan serve --host 0.0.0.0
  (サーバを起動)
  

別のターミナル(ubuntu)で以下のコマンドを実行する。

• docker run --rm -it -v "$PWD":/home/node/app -w /home/node/app -p 5173:5173 -u 1000:1000 node:16.16.0-alpine sh -c "npm install && npm run dev"
  (Nodeコンテナを起動)

Docker Desktop でコンテナが起動する。



コンテナを停止するときは以下のコマンドを実行する。

• docker compose down

コマンドを確認するとコンテナが停止されていることが分かる。