第一章２ 『sailを使用した環境構築とVueとtailwind CSSのインストール』
2022/02/18 Docker
動作確認済み環境
- macOS Catalina v10.15.7 (Intel)
- macOS Big Sur v11.5.1 (Apple M1)
Docker Desktop をインストールする
Docker Desktop for Mac and Windows | Docker
Getting Started On macOS
この手順に従えばあっという間に環境構築ができる。
これはLaravelについての記事なのでdockerについては書かない。
Laravel – The PHP Framework For Web Artisans
ターミナルで以下を実行する。
|
1 2 |
your/work/dir % curl -s "https://laravel.build/todo-list"| bash your/work/dir % cd todo-list && ./vendor/bin/sail up -d |
この時点で環境構築は終わっているが、mysqlに入っているデータを見るために毎回
docker compose exec mysql bash -c 'mysql -u sail -ppassword'
からの
use todo_list;
select * from todos;
とか打つのめんどくさいのでphpmyadminを使えるようにする。
docker-compose.ymlに以下を追加する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
phpmyadmin: image: phpmyadmin/phpmyadmin links: - mysql:mysql ports: - 8080:80 environment: PMA_HOST: mysql PMA_USER: '${DB_USERNAME}' PMA_PASSWORD: '${DB_PASSWORD}' networks: - sail depends_on: - laravel.test - mysql |
|
1 |
todo-list % ./vendor/bin/sail up -d |
Laravelの画面確認
127.0.0.1:80にアクセスする。
macの外観モードをライトに設定してる人はこの画面。
ダークに設定してる人はこの画面が出てくる。
phpMyAdminの画面確認
127.0.0.1:8080にアクセスする。
エイリアスを追加
./vendor/bin/sail
って毎回打つのも大変なのでエイリアスを追加しとく。
|
1 |
% vim ~/.zshrc |
以下をコピペする。
|
1 |
alias sail='./vendor/bin/sail' |
:wq で保存して抜ける
更新を反映させる。
|
1 |
% source ~/.zshrc |
エイリアスの確認
こんな感じに表示されれば成功。
|
1 2 3 4 5 6 7 8 9 |
todo-list % sail NAME COMMAND SERVICE STATUS PORTS todo-list-laravel.test-1 "start-container" laravel.test running 0.0.0.0:80->80/tcp todo-list-mailhog-1 "MailHog" mailhog running 0.0.0.0:1025->1025/tcp, 0.0.0.0:8025->8025/tcp todo-list-meilisearch-1 "tini -- /bin/sh -c …" meilisearch running (healthy) 0.0.0.0:7700->7700/tcp todo-list-mysql-1 "/entrypoint.sh mysq…" mysql running (healthy) 0.0.0.0:3306->3306/tcp todo-list-phpmyadmin-1 "/docker-entrypoint.…" phpmyadmin running 0.0.0.0:8080->80/tcp todo-list-redis-1 "docker-entrypoint.s…" redis running (healthy) 0.0.0.0:6379->6379/tcp todo-list-selenium-1 "/opt/bin/entry_poin…" selenium running 5900/tcp |
タイムゾーンの設定
今回はtodoに期限を設定してるのでタイムゾーンを日本時間にしておかないとわけわからなくなるので設定しておく。
config/app.phpを編集。
|
1 2 3 |
'timezone' => 'UTC', ↓ 'timezone' => 'Asia/Tokyo', |
ロケールの設定
これやるとhtmlのlangがenからjaになって「日本語に翻訳しますか？」とか聞かれなくなる。
config/app.phpを編集。
|
1 2 3 |
'locale' => 'en', ↓ 'locale' => 'ja', |
Vueのインストール
|
1 2 3 4 |
todo-list % sail composer require laravel/ui todo-list % sail artisan ui vue todo-list % sail npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps todo-list % sail npm install && sail npm run dev |
Tailwind CSSのインストール
ターミナルで以下を実行。
|
1 2 |
todo-list % sail npm install -D tailwindcss postcss autoprefixer todo-list % sail npx tailwindcss init |
tailwind.config.jsを以下のものに書き換える。
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [], }; |
resources/css/app.cssを以下のものに書き換える。
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
webpack.mix.jsを以下のものに書き換える。
|
1 2 3 4 5 6 |
const mix = require("laravel-mix"); mix.js("resources/js/app.js", "public/js") .vue() .postCss("resources/css/app.css", "public/css", [require("tailwindcss")]) .version(); |
ターミナルで以下を実行。
|
1 |
todo-list % sail npm install && sail npm run dev |