MENU
  1. ホーム
  2. プログラミング
  3. Laravel
  4. Vue.js & Laravel8 & Docker で開発環境を構築する

Vue.js & Laravel8 & Docker で開発環境を構築する

プログラミング Laravel Vue.js
目次

目標

docker上のサーバーでlaravelを動かし、vueに渡したデータを画面に表示する

前提

前提①パソコンにnodeがインストールされている

こちらのコマンドで確認しましょう

$ node -v
  v16.13.2

もしインストールされていない場合はこちらからインストール

前提②パソコンにcomposerがインストールされている

こちらのコマンドで確認しましょう

$ composer --version
  Composer version 2.0.12

もしインストールされていない場合は（MAC）

$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

これでインストール完了です。

前提③パソコンにDockerがインストールされている

こちらのコマンドで確認しましょう

$ docker -v
  Docker version 20.10.6

もしインストールされていない場合はこちらからインストール

実装

ルートフォルダの作成

まずは以下のコマンドを叩きルートフォルダを作成します。

mkdir laravel_vue_docker
        （ルートのフォルダを作成）
　
cd laravel_vue_docker
        （作成したフォルダの中に移動）

フロントエンド（Vue.js）の環境構築

ルート直下で以下のコマンドを叩きます。

vue create vue
        （vueのフォルダを作成）

今回はvue2を選択します。

以下のコマンドを叩きフロントエンドのサーバーを起動します。

cd vue
        （作成したフォルダの中に移動）

npm run serve
        （フロントエンドのサーバーを起動）

http://localhost:8080 にアクセス

こちらの画面が表示されれば成功

バックエンド（Laravel）の環境構築

ターミナルをもう一つ開き、ルート直下で以下のコマンドを叩きます。

composer create-project "laravel/laravel=8.*" laravel
        （laravelのフォルダを作成）

ファイルを以下のように修正します。

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:mylmdVrnmt8Vv1cOFiYE5mkxlMGwb1FcyUFQ+TtBUiE=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=laravel
- DB_USERNAME=root
- DB_PASSWORD=
+ DB_CONNECTION=mysql
+ DB_HOST=mysql
+ DB_PORT=3306
+ DB_DATABASE=sample
+ DB_USERNAME=user
+ DB_PASSWORD=password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:mylmdVrnmt8Vv1cOFiYE5mkxlMGwb1FcyUFQ+TtBUiE=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=laravel
- DB_USERNAME=root
- DB_PASSWORD=
+ DB_CONNECTION=mysql
+ DB_HOST=mysql
+ DB_PORT=3306
+ DB_DATABASE=sample
+ DB_USERNAME=user
+ DB_PASSWORD=password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
-         // \App\Models\User::factory(10)->create();
+            \App\Models\User::factory(10)->create();
    }
}

インフラ（Docker）の環境構築

以下のコマンドを叩き、ファイルを作成します。

touch docker-compose.yml
mkdir docker
mkdir docker/php
touch docker/php/Dockerfile
mkdir docker/web
touch docker/web/default.conf

作成したファイルに以下のように記載します。

version: '3'
services:
    web:
        image: nginx:1.15.6
        ports:
            - "8000:80"
        depends_on:
            - app
        volumes:
            - ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
            - .:/var/www/html
    app:
        build: ./docker/php
        depends_on:
            - mysql
        volumes:
            - .:/var/www/html
    mysql:
        image: mysql:5.7
        command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
        environment:
            MYSQL_DATABASE: sample
            MYSQL_USER: user
            MYSQL_PASSWORD: password
            MYSQL_ROOT_PASSWORD: password
        ports:
            - "3306:3306"
        volumes:
            - mysql-data:/var/lib/mysqlz
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        environment:
            - PMA_ARBITRARY=1
            - PMA_HOST=mysql
            - PMA_USER=root
            - PMA_PASSWORD=password
        links:
            - mysql
        ports:
            - 9000:80
        volumes:
            - /sessions
volumes:
    mysql-data:
FROM php:7.3-fpm

RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer

RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
# nodejs \
vim

RUN apt-get update \
   && apt-get install -y libpq-dev \
   && docker-php-ext-install pdo_mysql pdo_pgsql
   
RUN curl -sL https://deb.nodesource.com/setup_15.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g

WORKDIR /var/www/html/laravel
server {
   listen 80;

   root  /var/www/html/laravel/public;
   index index.php index.html index.htm;

   access_log /var/log/nginx/access.log;
   error_log  /var/log/nginx/error.log;

   location / {
       try_files $uri $uri/ /index.php$is_args$args;
   }

   location ~ \.php$ {
         fastcgi_split_path_info ^(.+\.php)(/.+)$;
         fastcgi_pass   app:9000;
         fastcgi_index  index.php;

         include        fastcgi_params;
         fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
         fastcgi_param  PATH_INFO $fastcgi_path_info;
     }
}

ルート直下で以下のコマンドを叩きます。

docker-compose up -d --build
        （コンテナをビルド）

docker-compose exec app bash
        （コンテナの中に入る）

php artisan migrate:refresh --seed
        （データベースに接続）
        （※このコマンドはコンテナの中で叩きます）

http://localhost:8000 にアクセス

こちらの画面が表示されれば成功

http://localhost:9000 にアクセスし「sample」→「users」をクリックします。

こちらの画面が表示され、usersにダミーデータが登録されていれば成功です。

独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう。
独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。
カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう
プログラミング Laravel Vue.js
docker Laravel Vue.js
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次