【初心者向け】Laravel Docker AWS(EC2) 私的Webアプリを0から簡単にデプロイする方法を紹介②Docker編

概要　

何度もいいますが、知らない単語が出た瞬間ググってください！！！！！
①の全体像編がこちらにあるのでこちらを一読してからだと理解がスムーズかと！！！

https://sg-report.com/laravel-docker-awsec2-web1/
今回で作成するは具体的にいうと赤いとこ

Dockerのメリット、なぜプロのエンジニアは使うのか

①MACを汚さずに環境とプロジェクト、プログラムを作れる！
どういうことかって？？？
Dockerを使わずにプロジェクトをつくるとどうなるかみてみよう！！

こんな風にバージョン違いだったり他のPCの環境に依存してしまう！！

Dockerを使うプロジェクトをつくるとどうなるかみてみよう！！

Dockerを使えばDockerの中に環境をインストールしてプロジェクトごとgithub上にのっけるイメージ
Docker内に必要な環境をインストールするから
Macに必要な環境をインストールしなくて良い！！

まずはいろいろ準備（GitとかDockerをインストールとか）

以下デフォルトのターミナル使ってるよ！
①githubアカウントの作成
https://github.com
②Gitの初期設定
すみません。。「Mac git初期設定」でググってください汗
最終的に下記のように表示されればokです。

MacBook-Pro% git config --list | grep user
user.name=[githubname]
user.email=67626524+[githubname]@users.noreply.github.com

③GithubSSH接続設定
これも「Mac Github SSH接続」とかでググってね！エラーとかがでたらまたそのエラー文をぐぐるんや！！！

MacBook-Pro% ssh -T github.com
Hi [githubの名前]! You've successfully authenticated, but GitHub does not provide shell access.

こんなかんじにsuccessfullyの文字が出れば大体いける！

④ docker, docker-compose（起動したり停止できたりするやつ）のインストール
Docker for Macをインストール
https://docs.docker.com/docker-for-mac/install
インストール確認（なにかインストールしたら必ずインストールされてるか確認！）

MacBook-Pro% docker --version
Docker version 20.10.0, build 7287ab3
MacBook-Pro% docker-compose --version
docker-compose version 1.27.4, build 40524192

Docker起動確認

これで準備完了なはず！！

Dockerプロジェクトを作る！！

github動作確認まで

①プロジェクト(ディレクトリ）を作成する
私はホームディレクトリに「LaravelProjext」をつくってその中に「docker-test」ディレクトリを作成！！このへんはご自由に！！！

MacBook-Pro % mkdir LaravelProject
MacBook-Pro % cd LaravelProject
MacBook-Pro LaravelProject % mkdir docker-test
MacBook-Pro LaravelProject % cd docker-test 
MacBook-Pro docker-test % 

②リモートリポジトリを作る
作り方は「giuhubリモートリポジトリ　作成」でググろう！！
「DockerLaravelTestProject」を作成

②リモートリポジトリにテストプッシュ！Gitが機能しているかの確認

//README.mdファイルを作成
MacBook-Pro docker-test % echo "README import First" >> README.md
//git管理できるようにする
MacBook-Pro docker-test % git init
//ステージングにaddする！
MacBook-Pro docker-test % git add . 
//commitする！！
MacBook-Pro docker-test % git commit -m "first commit README"
//push先のリモートリポジトリをGithubに！！（SSHで接続　※URLはSSH）
MacBook-Pro docker-test % git remote add origin git@github.com:SugiKoki/DockerLaravelTestProject.git
//リモートリポジトリ先を確認！しっかりgithubのプロジェクトになっている
MacBook-Pro docker-test % git remote -v
origin  git@github.com:SugiKoki/DockerLaravelTestProject.git (fetch)
origin  git@github.com:SugiKoki/DockerLaravelTestProject.git (push)
//gitのブランチを確認
MacBook-Pro docker-test % git branch
* master
//gitのブランチ（master)にプッシュ
MacBook-Pro docker-test % git push -u origin master

③VScodeで確認する

しっかりディレクトリの中に書かれていることを確認！！これで作業できる！！！！

最終ゴールの確認

ファイル構成はこんな感じをめざすよ！！

backendの中が実際にプログラミングするところ！！

アプリケーションサーバー（app)を作る（入れる）

①docker-compose.yml を作成する

MacBook-Pro docker-test % touch docker-compose.yml

VScodeでディレクトリを開いて以下のようにする

以下が内容

version: "3.8"
services:
  app:
    build: ./infra/php
    volumes:
      - ./backend:/work
  web:
    image: nginx:1.18-alpine
    ports:
      - 10080:80
    volumes:
      - ./backend:/work
      - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf
    working_dir: /work
  db:
    build: ./infra/mysql
    volumes:
      - db-store:/var/lib/mysql
volumes:
  db-store:

上のappってとこがアプリケーションサーバー
真ん中のwebってとこがwebサーバー
下のdbがデータベースサーバー

作りたい環境をここで設定してこれに合わせてDockerにインストールしていく！！！

②./docker/php/Dockerfile を作成する

MacBook-Pro docker-test % mkdir -p infra/php
MacBook-Pro docker-test % touch infra/php/Dockerfile

下記のコードを Dockerfile へ。

FROM php:7.4-fpm-buster
SHELL ["/bin/bash", "-oeux", "pipefail", "-c"]

ENV COMPOSER_ALLOW_SUPERUSER=1 \
  COMPOSER_HOME=/composer

COPY --from=composer:1.10 /usr/bin/composer /usr/bin/composer

RUN apt-get update && \
  apt-get -y install git unzip libzip-dev libicu-dev libonig-dev && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/* && \
  docker-php-ext-install intl pdo_mysql zip bcmath

COPY ./php.ini /usr/local/etc/php/php.ini

WORKDIR /work

ここで行っていること
Composerコマンドのインストール
Laravelで必要な
bcmath, pdo_mysql が不足しているのでインストール

③./docker/php/Dockerfile を作成する

MacBook-Pro docker-test % touch infra/php/php.ini

以下のコードをphp.iniへ

zend.exception_ignore_args = off
expose_php = on
max_execution_time = 30
max_input_vars = 1000
upload_max_filesize = 64M
post_max_size = 128M
memory_limit = 256M
error_reporting = E_ALL
display_errors = on
display_startup_errors = on
log_errors = on
error_log = /dev/stderr
default_charset = UTF-8

[Date]
date.timezone = Asia/Tokyo

[mysqlnd]
mysqlnd.collect_memory_statistics = on

[Assertion]
zend.assertions = 1

[mbstring]
mbstring.language = Japanese

ウェブサーバー(web)を作る（入れる）

①docker/nginx/default.conf を作成する

MacBook-Pro docker-test % mkdir infra/nginx
MacBook-Pro docker-test % touch infra/nginx/default.conf

以下のコードを貼り付ける！！

server {
    listen 80;
    server_name example.com;
    root /work/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

データベース(db)サーバーを作る（入れる）

①./docker/mysql/Dockerfile を作成する

MacBook-Pro docker-test % mkdir infra/mysql
MacBook-Pro docker-test % touch infra/mysql/Dockerfile

以下のコードを貼り付ける！

FROM mysql:8.0

ENV MYSQL_DATABASE=sg_db \
  MYSQL_USER=sg \
  MYSQL_PASSWORD=sg \
  MYSQL_ROOT_PASSWORD=sg \
  TZ=Asia/Tokyo

COPY ./my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 644 /etc/mysql/conf.d/my.cnf

ここは任意なので好きにしてもらって結構！
データベースを接続するときの名前とパスワードだから
忘れないようにおぼえておこう！

  MYSQL_USER=sg \
  MYSQL_PASSWORD=sg \
  MYSQL_ROOT_PASSWORD=sg \

②docker/mysql/my.cnf を作成する

MacBook-Pro docker-test % touch infra/mysql/my.cnf

以下のコードを貼り付ける

[mysqld]
# character set / collation
character_set_server = utf8mb4
collation_server = utf8mb4_0900_ai_ci

# timezone
default-time-zone = SYSTEM
log_timestamps = SYSTEM

# Error Log
log-error = mysql-error.log

# Slow Query Log
slow_query_log = 1
slow_query_log_file = mysql-slow.log
long_query_time = 1.0
log_queries_not_using_indexes = 0

# General Log
general_log = 1
general_log_file = mysql-general.log

[mysql]
default-character-set = utf8mb4

[client]
default-character-set = utf8mb4

これで３つのコンテナが完成！！！！しっかり最終的なディレクトリ構成になりましたか？？？

3-6.Docker起動！（中身の確認）

①dockerを動かしたいときに使うよ！

MacBook-Pro docker-test % docker-compose up -d --build
・・・・
Successfully built 9813d5181de8
Successfully tagged docker-test_db:latest
Creating docker-test_app_1 ... done
Creating docker-test_db_1  ... done
Creating docker-test_web_1 ... done
MacBook-Pro docker-test % 

上の感じにdoneとでたらそれらはOKということ！
・動かした状態でどう動いてるのか確認！

MacBook-Pro docker-test % docker-compose ps
      Name                     Command               State           Ports        
----------------------------------------------------------------------------------
docker-test_app_1   docker-php-entrypoint php-fpm    Up      9000/tcp             
docker-test_db_1    docker-entrypoint.sh mysqld      Up      3306/tcp, 33060/tcp  
docker-test_web_1   /docker-entrypoint.sh ngin ...   Up      0.0.0.0:10080->80/tcp

ちなみにリスタートしたりしたかったら、一度止めたかったらdown!

MacBook-Pro docker-test % docker-compose down
//一度止めたらまた起動しよう
MacBook-Pro docker-test % docker-compose up -d --build

Dockerに入れたそれぞれサーバー（コンテナ）内に入れたのバージョン確認する方法

・appサーバー

MacBook-Pro docker-test %  docker-compose exec app bash
//PHPのバージョン確認
root@5ce9c9fa1435:/work# php -V
//composerのバージョン確認
root@5ce9c9fa1435:/work# composer -v
//インストール済みの拡張機能一覧の確認
root@5ce9c9fa1435:/work# php -m
//dockerから出る
root@5ce9c9fa1435:/work# exit 

・webサーバー

MacBook-Pro docker-test % docker-compose exec web nginx -v

・DBサーバー

MacBook-Pro docker-test % docker-compose exec db bash
//mysqlのバージョン確認
root@6bcf6de7e31e:/# mysql -V
//dockerから出る
root@6bcf6de7e31e:/work# exit 

これでDocker環境構築終了だ！！！さあLaravelを入れてプログラミングしていきます！！！

定期的にGitコミットはしていったほうがよいですよ！

MacBook-Pro docker-test % git add .
MacBook-Pro docker-test % git commit -m  "laravel commit"
MacBook-Pro docker-test % git push

3-7.Laravelをインストールする(appサーバー上でやります）

①appに入って、Laravelをインストール

MacBook-Pro docker-test % docker-compose exec app bash
root@5ce9c9fa1435:/work# composer create-project --prefer-dist "laravel/laravel=8.*" .
//laravelバージョン確認
root@5ce9c9fa1435:/work# php artisan -V
Laravel Framework 8.21.0
root@5ce9c9fa1435:/work# exit 

②Laravel ウェルカム画面の表示
http://127.0.0.1:10080
にアクセス！！！

・VScode確認するとbackendこんな感じになっているはず！

プログラミングしてみる！！(html,blade.phpファイルを作って表示できるか確認！）

HTML(.blade.php)を表示してみよう！！MVCモデルで進めていきます！

①backend/resources/viewsのなかに
helloディレクトリを作成
helloディレクトリの中にhello.blade.phpを作成

中身はこれとする。貼り付けてOKです！

<html>
    <body>
        <h1>HELLO Laravel<h1>
    </body>
</html>

②URLから呼び出すコントローラーを設定！
・backend/routes/web.phpを修正

以下のコードをbackend/routes/web.phpに追加する！

/// URL/helloのとき「HelloController」を呼び出す
Route::get('hello', 'App\Http\Controllers\HelloController@index');

③backend/app/http/Controllers/の中に
HelloController.phpを作成する

以下のコードをbackend/app/http/Controllers/の中に
HelloController.phpに追加する！

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\KrononUser;
use Faker\Provider\ar_JO\Person;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class HelloController extends Controller
{
    public function index()
    {
        return view('hello.hello');
    }
}

④URLにアクセスして表示！！！
http://127.0.0.1:10080/hello

データベースに接続してみる！！！！

ソースコード上で backend/.env のDB接続設定を修正する。

①以下のコードに変更！！DBサーバー作った時のに合わせながら！

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=sg_db
DB_USERNAME=sg
DB_PASSWORD=sg

②backend/.env.example も同様に変更する

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=sg_db
DB_USERNAME=sg
DB_PASSWORD=sg

ちなみにgitcloneした際はここからやれば動きます

③Laravelインストール

app コンテナにはいってからいろいろ

MacBook-Pro docker-test % docker-compose exec app bash
//コンポーザーをインストールする
root@36ffabe3ffc9:/work# composer install
//.env.exampleを.envファイルにコピーする
root@36ffabe3ffc9:/work# cp .env.example .env
//このコマンドでアプリケーションキーを生成できます。
root@36ffabe3ffc9:/work# php artisan key:generate
Application key set successfully.

//デフォルトで入っているマイグレーションを実行！！デフォルトのテーブルがDBに反映される
root@36ffabe3ffc9:/work# php artisan migrate
Migration table created successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (40.88ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (37.06ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (35.00ms)

これでデフォルトですが、DBにテーブルなどが入りました！！

④データベースの確認（デフォルト）

MacBook-Pro docker-test % docker-compose exec db bash 
//設定したUSERでmysqlにログイン
root@d94d20dd2212:/# mysql -u sg -p
//設定したPASSWORDを入力.envに書いた！！
Enter password: 
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| sg_db              |
+--------------------+
2 rows in set (0.01 sec)
mysql> use sg_db
Database changed
mysql> show tables;
+-----------------+
| Tables_in_sg_db |
+-----------------+
| failed_jobs     |
| migrations      |
| password_resets |
| users           |
+-----------------+

⑤migrationをつくってアプリに反映する！！

/backend/database/migration/2021_01_03_090902_create_people_table.php
を作成
※/backend/database/migration/の中にデフォルトでいろいろ入っているからそれをコピーすればいいかも！！
以下のコードを貼り付け！

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePeopleTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('people', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('mail');
            $table->integer('age');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('people');
    }
}

⑥migrationを実行(appコンテナ）の中に入って実行！
appのなかじゃないとdockerにあるDBコンテナに届かない

MacBook-Pro docker-test % docker-compose exec app bash
root@36ffabe3ffc9:/work# php artisan migrate
Migrating: 2021_01_03_090902_create_people_table
Migrated:  2021_01_03_090902_create_people_table (49.03ms)

⑦Seederを作成する！！まずはデフォルトにあるDatabaseSeeder.phpから
“Seederとは？？”
ダミーデータ。データベースにコマンドを実行するだけでデータを入れられる！！

DatabaseSeeder.phpに以下のソースを貼り付け

$this->call(PeopleTableSeeder::class);

呼び出される側のPeopleTableSeeder.phpを作成

PeopleTableSeeder.phpに以下のソースを貼り付け

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class PeopleTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'id' => 1,
            'name' => 'test',
            'mail' => 'test',
            'age' => 20,
        ];
    DB::table('people')->insert($param);
    }

}

⑧Seederを実行する！

MacBook-Pro docker-test % docker-compose exec app bash
root@36ffabe3ffc9:/work# php artisan db:seed
Seeding: Database\Seeders\PeopleTableSeeder
Seeded:  Database\Seeders\PeopleTableSeeder (29.08ms)
Database seeding completed successfully.

これでテーブルはできたし、ダミーデータもできました！あとはweb上で表示すれば完璧ですね！！

データベースに登録されているデータを表示する

①views/hello.blade.phpを作成

以下のソースhello.blade.phpを変更

<html>
    <body>
        <h1>HELLO Laravel<h1>
            <h1>DBから表示しているよ<h1>
            <tr><th>Name</th><th>Mail</th><th>Age</th></tr>
                <br>
                @foreach ($items as $item)
                <tr>
                    <td>{{$item -> name}}</td>
                    <td>{{$item -> mail}}</td>
                    <td>{{$item -> age}}</td>
                </tr>
            @endforeach
    </body>
</html>

②Controllers/HelloController.phpを変更

以下のソースに変更する

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\KrononUser;
use Faker\Provider\ar_JO\Person;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class HelloController extends Controller
{
    public function index()
    {
        $items = DB::table('people')->get();
        return view('hello.hello',['items' => $items]);
    }
}

③作成したアプリにアクセス！！
http://127.0.0.1:10080/hello

これでDBさきほどSeederでいれたダミーデータが表示されていたら完璧ですね！！！
最後にcommmitして終了！！！

MacBook-Pro docker-test % git add .
MacBook-Pro docker-test % git commit -m "db complete"
MacBook-Pro docker-test % git push

あとはこれを世の中に出すためAWSを使えればOK!!!
③へGO！！

お疲れ様でした

こういった環境構築かなり疲れますよねーもうへとへとです
全体像を確認したければこちら
【ギリ初心者向け】Laravel Docker AWS(EC2) Webアプリ（PHP)を0から簡単にデプロイする方法（無料）①　ー全体像編ー

https://sg-report.com/laravel-docker-awsec2-web1/
次回は③
【ギリ初心者向け】Laravel Docker AWS(EC2) Webアプリ（PHP)を0から簡単にデプロイする方法（無料）③　ーEC2にデプロイ編ー
https://sg-report.com/laravel-docker-awsec2-web3/