「Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう」をWindows+Dockerでやってみた

はじめに

表題通り、かの有名なチュートリアルを用いて、Dockerの環境構築~アプリ制作の導入まで試してみたいと思います。

Laradockを使っていない点もこの教材のポイントですね！

✅ゴール
Dockerの理解を深める

✅環境
Windows/Docker

✅参考教材
💻Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう入門Laravelチュートリアル

※当記事では上記の記事を教材と呼ばせていただきます(土下座)。

Docker学んでみた

アプリ制作

※Dockerの起動にHyper-Vの有効化が必要です。

①Dockerのためのディレクトリを構築

mkdir vuesplash
mkdir vuesplash/database
mkdir vuesplash/web
touch vuesplash/Dockerfile
touch vuesplash/docker-compose.yml
touch vuesplash/install-composer.sh
vi vuesplash/Dockerfile // ターミナルでファイルを編集する場合
~~~~各種ファイル編集後
cd vuesplash
docker-compose up -d // Dockerを起動
>> Creating vuesplash_vuesplash_web_1      ... done
>> Creating vuesplash_vuesplash_database_1 ... done
docker-compose exec vuesplash_web bash // コンテナ内にログイン
root@06e61bc5b9b3:/var/www/html/vuesplash# composer create-project --prefer-dist laravel/laravel . // 教材。webディレクトリにLaravelプロジェクトを作成する。現在7.11.0
root@06e61bc5b9b3:/var/www/html/vuesplash# composer create-project "laravel/laravel=6.*" // versionを指定してインストール。これだと6.18.14

②サーバー起動

※webディレクトリとvuesplashディレクトリが紐づいている。

root@06e61bc5b9b3:/var/www/html/vuesplash# ls
README.md  artisan    composer.json  config    package.json  public     routes      storage  vendor
app        bootstrap  composer.lock  database  phpunit.xml   resources  server.php  tests    webpack.mix.js
root@06e61bc5b9b3:/var/www/html/vuesplash# php artisan serve --host 0.0.0.0 --port 8081
Laravel development server started: http://0.0.0.0:8081
[Sun May 17 07:03:48 2020] PHP 7.4.1 Development Server (http://0.0.0.0:8081) started

http://localhost:8081/へアクセス

③コンテナの停止

docker stop $(docker ps -q) // これで一括停止

躓いた点

✅指定したバージョンがインストールできない

6.8をインストールしたつもりが。。。

root@06e61bc5b9b3:/var/www/html/vuesplash# composer create-project "laravel/laravel=6.8"
root@06e61bc5b9b3:/var/www/html/vuesplash# php artisan --version
>> Laravel Framework 6.18.14

これも同じ結果。

root@06e61bc5b9b3:/var/www/html/vuesplash# composer create-project "laravel/laravel=6.*"
root@06e61bc5b9b3:/var/www/html/vuesplash# php artisan --version
>> Laravel Framework 6.18.14

一旦このバージョンでできるところまでやってみよう。

また、上記コマンドだとweb/laravelディレクトリに生成されてしまったのでweb直下にプロジェクトが来るように移動した。

✅Docker環境を共有したい場合

※(前提)上記のフォルダをプッシュしたリポジトリを作成。

git clone https://github.com/chobi1125/vuesplash.git // git clone
cd vuesplash
docker-compose up -d // Docker起動
docker-compose exec vuesplash_web bash // 仮想環境へ
composer install // venderが生成
cp .env.example .env // envの作成
php artisan key:generate // キーの生成
http://localhost:8081/ // アクセス

おわりに

Dockerの環境構築をしてみました。

もう少しアプリ制作もしたいと思っているので、随時更新していきます。

これを一通り終えたら次はLaravel(+Vue.js)でSNS風Webサービスを作ろう！でLaradockの環境構築に挑戦しようと思っています。

備忘録

Laravelの.gitignoreデフォルト

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log