プログラミング初心者のための「0から始めるWebアプリケーション実践開発」第１章

ゆうき@琵琶湖エンジニア

2020年4月12日 17:29

みなさん初めまして。

ゆうき@琵琶湖エンジニア（@RubyPHP2）です！

簡単に自己紹介をさせて頂きます！

現在25歳の社会人。
現場ではPHP、JavaScriptメインのWebエンジニア。
実務経験1年の駆け出しエンジニア。

さて、いきなりですが、プログラミング学習の進捗はいかがでしょうか。

捗っている方も、そうでない方もいらっしゃるでしょう。

ただ、続けていれば必ず成長できるのがプログラミングです！

今回は、プログラミングを最近始めた方向けに、プログラミング初心者のためのWebアプリケーション開発ということで開発環境の構築からデプロイまで一通り実践していきます！

この教材の対象者の以下のような方々です。

◎対象者
・これからプログラミングを始める方
・Progate終了後、なにをしていいかわからない方
・今後、エンジニア転職を果たしたい方
・バックエンドエンジニアに興味がある方

また、この教材で身に付くスキルは以下になります。

◎この教材を通して得られるスキル
・Laravelフレームワークの基礎
・PHPの基礎
・Dockerの基礎
・環境構築からデプロイまでの工程
・Git（ソースコード管理ツール）の基礎
・データベースの扱いの基礎

Webアプリケーションの開発と聞くと、どのようなイメージでしょうか。

こんなことを考えている方もいらっしゃるのではないでしょうか。

昔の僕がそうでした。笑

・開発って難しそう...
・環境構築のやり方がわからない...
・デプロイとかわからない...
・なにを作れば良いかわからない...

実は、そんなことはありません。

繰り返しやれば、誰でもできるようになります。

今回はLaravel（PHPフレームワーク）を用いて簡易な掲示板アプリを作成していきます。

この教材通りに進めれば、基本的にエラーがでることはないですが、ヒューマンエラーによってエラーが発生し、動作しないこともあるでしょう。

エラーが出た時はむしろ成長するチャンスです！

Googleで検索したり、教材を見直したり、原因を調べていきましょう！

万が一、教材に誤りがある場合は、ゆうき@琵琶湖エンジニア（@RubyPHP2）までご連絡ください！

さて、この第１章では環境構築からデプロイまでを一通り行います！

（本格的にコードを書くのは第２章からです。）

今回作るWebアプリはあくまで簡易アプリです。

初心者の方の最初の第一歩として活用していただければ幸いです。

では、始めていきましょう！

第１章環境構築からデプロイ

目次
1. Dockerのインストールと動作確認
2. Laravel環境構築
2-1. Nginxで静的コンテンツ配信サーバを立ち上げる
2-2. 2-1で立てたNginxでPHPが動作するようにする
2-3. MySQLを立ち上げる
2-4. Laravelをインストールする
2-5. インストールしたLaravelを2-3で立ち上げたMySQLと接続する
3. Git連携
4. デプロイ（本番環境へ公開）

始めにこの教材のルールを一つだけ説明します。

教材を進めるとDockerコンテナというものが登場します。

ターミナルでのコマンド操作でDockerコンテナ内で叩くコマンドとコンテナの外で叩くコマンドで以下のように説明を分けています。

Dockerコンテナが登場したときに改めて説明していますので、ここでは二パターンあるという認識だけお願いします。

ターミナルのルール

# コンテナの外で叩くコマンド
[mac]$

# コンテナの中で叩くコマンド
[コンテナ]$

そして、注意事項が一点。

教材のソースコードをコピペするとインデントがずれる場合がございます。

インデントはご自身で調整するようお願いいたします。

では、初めに開発を行うための環境を構築します。
構築のやり方は色々あります。

今回はdockerを用いてLEMP環境（Linux,Nginx,Mysql,php）を構築していきます。

⚠︎注意⚠︎
動作は全てmac環境を想定しています。

1. Dockerのインストールと動作確認

dockerをmacにインストールするところから始めます。

インストールはこちらから可能です。

アカウントをお持ちではない方はアカウント登録を行ってください。

その後、ログインをして、Get Dockerからダウンロードしてください。

スクリーンショット 2020-03-05 21.10.45

ダウンロード完了後、 dmg ファイルをダブルクリックで開きます。

画面指示通りに Docker を Applications にドラッグ & ドロップします。

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

念のため、動作確認を行います。

Dockerをダブルクリックして起動し、IDとパスワードを入力します。

小さな船のマークが表示されているので、クリックで起動していることを確認します。

次にターミナルを開き、以下コマンドを入力します。

このコマンドでバージョンが確認できます。

[mac]$ docker version

スクリーンショット 2020-03-26 6.45.19

dockerコマンドを実行できますね。

Dockerがインストールされているということです！

2. Laravel環境構築

構築の流れ
2-1. Nginxで静的コンテンツ配信サーバを立ち上げる
2-2. 2-1で立てたNginxでPHPが動作するようにする
2-3. MySQLを立ち上げる
2-4. Laravelをインストールする
2-5. インストールしたLaravelを2-3で立ち上げたMySQLと接続する

よくわからないですよね。笑

安心してください。順番に見ていきましょう！

2-1. Nginxで静的コンテンツ配信サーバを立ち上げる

まずは、Laravelプロジェクトの起点となるディレクトリを作成します。

今回は起点となるディレクトリ名を laravel-docker-workspace とします。

ディレクトリとは簡単に言うとフォルダのことです。

フォルダの一つ一つをディレクトリと呼びます。

ターミナルを開き、下記コマンドを入力して現時点の階層状況を確認してみましょう。

[mac]$ pwd

/Users/*********

今回は上記の階層の配下にプロジェクトの起点となるディレクトリを作成していきます。

*********になっているのは、個人情報が含まれているためです。

ご了承ください。

では、起点となるディレクトリを作成します。

以下のコマンドを入力してください。

mkdirコマンドでディレクトリを作成することができます。

[mac]$ pwd
/Users/*********

[mac]$ mkdir laravel-docker-workspace

プロジェクトの起点となるディレクトリ laravel-docker-workspace が作成されたかを念のため確認しましょう。

lsコマンドを入力することで、ディレクトリやファイルの情報を見ることができます。

[mac]$ pwd
/Users/*********

[mac]$ ls

Applications		Music				laravel-docker-workspace
CSV				    MyVagrant			laravel-docker-workspace2
Desktop				Pictures			laravel-docker-workspace3
Documents			Public				laravel-docker-workspace4
Downloads			VirtualBox VMs		rails
Library				eclipse				test
Movies				eclipse-workspace

僕の環境だとこんな感じ。

laravel-docker-workspace が作成されていればOKです！

では、作成したディレクトリに移動します。

ディレクトリ間の移動はcdコマンドで可能です。

[mac]$ pwd
/Users/*********

[mac]$ cd laravel-docker-workspace

[mac]$ pwd
/Users/*********/laravel-docker-workspace

ディクレトリ間の移動ができていることが確認できますね。

さて、NginxによるWebサーバを立ち上げますが、

以下のような構成で進めていきます。

うーん、よくわからない笑

先ほど作成した laravel-docker-workspace の配下にこれらのディレクトリやファイルを作成するとだけ考えてください。

.
├── docker/
│   └── web/
│       └── default.conf　# Nginxの設定ファイル
│
├── docker-compose.yml
└── index.html # 配信する静的コンテンツ

最初に docker-compose.yml という名前のファイルを作成します。

touchコマンドでファイルを作成します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ touch docker-compose.yml

[mac]$ ls
docker-compose.yml

lsコマンドで確認すると、ファイルが作成されていますね！

docker-compose.yml を開いて、編集していきます。

エディタはなんでも問題ありませんが、私の環境ではvscodeを使用しています。

vscodeのインストールはこちらから可能です。

エディタはvscodeで説明していきます。

vscodeを開き、フォルダを開くをクリックしてください。

その後、command + shift + G で「フォルダの場所を入力」ウインドウを表示します。

docker-compose.yml ファイルを作成したパスを指定します。

docker-compose.yml ファイルを以下のように編集します。

ここでは立ち上げるDockerコンテナの情報を記述します。

version: '3'
services:
 web:
   image: nginx:1.15.6
   ports:
     - "8000:80"
   volumes:
     - ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
     - .:/var/www/html

ファイルの編集を終えたら、必ずcommand + s でファイルを保存してください。

スクリーンショット 2020-03-06 21.29.24

↑ ファイルに更新内容があるが、保存されていない状態。

スクリーンショット 2020-03-06 21.31.40

↑ ファイルが保存されている状態

⚠︎今後、ファイルの保存の説明は割愛します。

ファイルを編集した時は保存するようにお願いします。

次にNginxの設定ファイルを記述します。(docker/web/default.conf)

順番にディレクトリから作成していきます。

pwdコマンドで現在位置を確認します。

起点となる laravel-docker-workspace にいることを確認し、配下にdockerディレクトリを作成します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ mkdir docker

[mac]$ ls
docker			docker-compose.yml

docker ディレクトリが作成されていますね！

cdコマンドで作成したdocker ディレクトリに移動しましょう。

pwdコマンド入力すると移動できていることが確認できますね。

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ cd docker

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker

次に作成したdockerディレクトリの配下にwebディレクトリを作成します。

lsコマンドでdockerディレクトリの配下にwebディレクトリが作成されていることを確認します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker

[mac]$ mkdir web

[mac]$ ls
web

作成されていますね！

cdコマンドでwebディレクトリに移動し、touchコマンドでdefault.confファイルを作成します。

念のため、lsコマンドでファイルが作成されているか確認します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker

[mac]$ cd web

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker/web

[mac]$ touch default.conf

[mac]$ ls
default.conf

作成したdefault.confファイルに以下を記述します。

こちらはNginxの設定になります。

server {
   listen 80;

   root  /var/www/html;
   index index.html;

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

次に、laravel-docker-workspaceディレクトリの配下にindex.htmlファイルを作成します。

まず、pwdコマンドで現在位置を確認します。

現在、webディレクトリにいる場合、dockerディレクトリ配下ということは二つ前の階層に戻る必要がありますね。

cd .. コマンドで一つ前に階層に戻れるので、二回叩けば二つ前の階層に戻れます。

pwdコマンドでlaravel-docker-workspaceディレクトリに移動したことを確して、index.htmlを作成します。

lsコマンドでファイルが作成されていることを確認します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker/web

[mac]$ cd ..

[mac]$ cd ..

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ touch index.html

[mac]$ ls
docker			docker-compose.yml	index.html

index.htmlファイルに以下を記述します。

<h1>Hello World!!!</h1>

laravel-docker-workspaceディレクトリに移動していることを確認し、

以下のコマンドを叩きます。

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ docker-compose up -d
Creating network "laravel-docker-workspace_default" with the default driver
Creating laravel-docker-workspace_web_1 ... done

http://localhost:8000/ にアクセスしてみましょう。

localhostにアクセスするためには、docker-compose up -dを実行している必要があると覚えておいてください。

以下のようにHello World!!!と出力されていればOKです！

スクリーンショット 2020-03-06 22.03.12

これで静的HTMLを配信するNginxサーバを立ち上げることができました！

停止させるには、以下コマンド叩くことで可能です。

停止状態ではlocalhostにアクセスすることができないようになります。

[mac]$ docker-compose down

2-2. NginxでPHPが動作するようにする

Nginx上でPHPを動作させるためにはPHP-FPM（FastCGI Process Manager）を使います。

詳しくは以下の記事を参考にしてください。
nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築する

docker-compose.ymlファイルに記述を追加し、以下のようにします。

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: # 追加
   image: php:7.2-fpm
   volumes:
     - .:/var/www/html

サービス名はappとします。

depends_onは依存関係を定義するオプションです。今回の場合、NginxがPHPを実行するため、NginxがPHPに依存していることを定義しています。依存関係を定義すると、docker-composeがそれに従ってDockerコンテナを起動するようになります。

次に、docker/web/default.confファイルを以下のように編集してください。

これでPHPが実行できるようになります。

server {
   listen 80;

   root  /var/www/html;
   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;
     }
}

laravel-docker-workspaceディレクトリ配下にindex.phpファイルを作成します。

cdコマンドやcd ..コマンドを用いてlaravel-docker-workspaceディレクトリに移動してください。

現在位置はpwdコマンドで確認できましたね。

では、touchコマンドでindex.phpファイルを作成します。

作成できたか、lsコマンドで確認しておきましょう。

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ touch index.php

[mac]$ ls
docker			index.html
docker-compose.yml	index.php

作成したindex.phpファイルを以下のように編集し、dockerを起動します。

<h1>Hello World!!!</h1>
<?php phpinfo();?>

[mac]$ docker-compose up -d
Creating laravel-docker-workspace_app_1 ... done
Recreating laravel-docker-workspace_web_1 ... done

http://localhost:8000/ にアクセスしてください。

以下のようにPHPの情報が出力できていればOKです！

スクリーンショット 2020-03-07 6.43.01

これでPHPを動作させることができました！

2-3. MySQLを立ち上げる

docker-compose.ymlファイルを編集し、以下のようにします。

編集後、再度dockerを起動します。

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:
   image: php:7.2-fpm
   depends_on: # 追加
     - mysql
   volumes:
     - .:/var/www/html
 mysql: # 追加
   image: mysql:5.7
   environment:
     MYSQL_DATABASE: sample
     MYSQL_USER: user
     MYSQL_PASSWORD: password
     MYSQL_ROOT_PASSWORD: password
   ports:
     - "3306:3306"
   volumes:
     - mysql-data:/var/lib/mysql
volumes: # 追加
 mysql-data:

[mac]$ docker-compose up -d
Creating laravel-docker-workspace_mysql_1 ... done
Recreating laravel-docker-workspace_app_1 ... done
Recreating laravel-docker-workspace_web_1 ... done

↑ のようになればOKです！

PHPからMySQLにはまだ接続していませんが、Laravelをインストールした後設定します。現時点でのMySQLの設定は以上です。

2-4. Laravelをインストールする

それでは、いよいよLaravelのインストールです。

composerを使ってインストールしていきます。

まずはdockerディレクトリの配下にphpディレクトリを作成します。

cdコマンドでdockerディレクトリに移動してください。

移動したらpwdコマンドで現在位置を確認しましょう。

確認ができれば、mkdirコマンドでphpディレクトリを作成します。

lsコマンドでディレクトリが作成されたか確認します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker

[mac]$ mkdir php

[mac]$ ls
php	web

cdコマンドでphpディレクトリに移動します。

次に作成したphpディレクトリにDockerfileを作成します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker

[mac]$ cd php

[mac]$ pwd
/Users/*********/laravel-docker-workspace/docker/php

[mac]$ touch Dockerfile

[mac]$ ls
Dockerfile

作成したDockerfileを以下のように編集します。

FROM php:7.2-fpm

# install composer
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 \
vim

RUN apt-get update \
   && apt-get install -y libpq-dev \
   && docker-php-ext-install pdo_mysql pdo_pgsql

WORKDIR /var/www/html

次にdocker-compose.ymlファイル内のappサービスを変更し、以下のように編集してください。

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 #定義したDockerfileを元にイメージを作るように変更 
   depends_on:
     - mysql
   volumes:
     - .:/var/www/html
 mysql:
   image: mysql:5.7
   environment:
     MYSQL_DATABASE: sample
     MYSQL_USER: user
     MYSQL_PASSWORD: password
     MYSQL_ROOT_PASSWORD: password
   ports:
     - "3306:3306"
   volumes:
     - mysql-data:/var/lib/mysql
volumes:
 mysql-data:

この状態で再度、dockerを起動します。

エラーがなければOK！

[mac]$ docker-compose up -d
laravel-docker-workspace_mysql_1 is up-to-date
Recreating laravel-docker-workspace_app_1 ... done
Recreating laravel-docker-workspace_web_1 ... done

次に以下コマンドでDockerコンテナに入ります。

コンテナの中に入るとcomposerコマンドが使えるようになります。

コマンドを叩くとroot@xxx...となり、これがコンテナ内に入っている状態です。

試しにlsコマンドを叩いてみましょう。

Linuxコマンドは当然ですが、通常通り使えますね。

Laravelをインストールしていきます。

今回はバージョン5.8をインストールしましょう。

(異なるバージョンをインストールされますと、今後のソースコードで動作しない可能性があります。)

laravel-appの部分はアプリ名なので、なんでも良いですが、

今回はlaravel-appで進めていきます。

インストールには時間がかかりますので、完了までターミナルは触らずに気長に待ちましょう。

docker-compose exec app bashコマンドを実行するには、docker-compose up -dでdockerを起動している必要があります。

[mac]$ docker-compose exec app bash

[コンテナ]$ ls
docker	docker-compose.yml  index.html	index.php

[コンテナ]$ composer create-project --prefer-dist laravel/laravel laravel-app "5.8.*"

教材冒頭でも記載しておりますが、ターミナル操作でDockerコンテナ内で叩くコマンドは[コンテナ]、コンテナの外で叩くコマンドは[mac]として説明します。

ターミナルにおける説明のルール

# コンテナの外で叩く
[mac]$

# コンテナの中で叩く
[コンテナ]$

さて、インストールが完了すると以下の画像のようにsuccessfullyの文字が表示されます。

スクリーンショット 2020-03-07 11.14.09

lsコマンドでlaravel-appが作成されているか確認します。

次にcdコマンドでlaravel-appディレクトリに移動し、Laravelのバージョンを確認します。（5.8台であれば問題ありません）

[コンテナ]$ ls
docker	docker-compose.yml  index.html	index.php  laravel-app

[コンテナ]$ cd laravel-app

[コンテナ]$ php artisan --version
Laravel Framework 5.8.37

一つNginxの設定を変更します。

Laravelのアプリケーションに対するリクエストは、全てpublic/index.phpファイルが入り口になります。Nginxの設定(docker/web/default.conf)のrootを書き換えて以下のようにします。

server {
   listen 80;

   root  /var/www/html/laravel-app/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;
     }
}

Nginxの設定を反映させるためにコマンドを叩きます。

コンテナに入っている場合は、exitでコンテナの外に移動します。

# コンテナから抜ける
[コンテナ]$ exit

[mac]$ pwd
/Users/*********/laravel-docker-workspace

[mac]$ docker-compose restart

http://localhost:8000/ にアクセスしてみましょう。

以下の画像の通りに表示されればOKです！

スクリーンショット 2020-03-07 11.31.13

次は、MySQLの接続をやってしまいましょう！

2-5. LaravelをMySQLと接続する

Laravel内のプロジェクトの .envファイルを編集してMySQLと接続します。

.envファイルのDBに関係ある箇所を抜粋するとデフォルトでは以下のようになっています。

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

DB_HOSTはdocker-compose で定義したサービス名を指定すると接続できます。

変更ができたら、以下コマンドを叩いて設定を反映しましょう。

restartしたら、コンテナの中に入り、cdコマンドでlaravel-appに移動しましょう。

次にマイグレーションを実行します。

マイグレーションとは簡単に言うと、DBのテーブル定義を管理する仕組みのことです！

# 現在位置を確認
[mac]$ pwd
/Users/*********/laravel-docker-workspace

# 設定を反映
[mac]$ docker-compose restart

# コンテナの中に入る
[mac]$ docker-compose exec app bash

[コンテナ]$ cd laravel-app

# マイグレーション実行
[コンテナ]$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

上記のようになれば間違いなくOKです！

僕の環境ではNothing to migrate.と表示されました。笑

あれ...不足に事態はつきものです。

テーブルが作成されているか確認してみましょう。

MySQL内のテーブル情報などを確認するためには、

まずコンテナの外でmysqlコンテナに入るコマンドを叩きます。

コンテナ内に入ったら、mysqlに接続します。

⚠︎パスワードを入力するとき、入力値は表示されません。

表示はされませんが、入力できているので、入力したらEnterを押しましょう。

# appコンテナの中に入っている場合は、コンテナから抜ける
[コンテナ]$ exit

# 現在位置確認
[mac]$ pwd
/Users/*********/laravel-docker-workspace

# mysqlコンテナに入る
[mac]$ docker-compose exec mysql bash

# mysqlにrootユーザーでログイン->パスワードが求められるので入力（初期値ならpassword）
[コンテナ]$ mysql -u root -p

mysqlのコマンドを使って操作していきます。

# 存在するデータベース名を確認
[mysql] show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sample             |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

# .envで設定したsampleを選択
[mysql] use sample;

# sample内のテーブルを確認
[mysql] show tables;
+------------------+
| Tables_in_sample |
+------------------+
| migrations       |
| password_resets  |
| users            |
+------------------+
3 rows in set (0.00 sec)

usersテーブルとpassword_resetsテーブルが作成されていますね。

つまり、問題なさそうです！

これでLaravelの環境構築は一通り終了です！

が、この章の目的はデプロイまでです。笑

まだまだいきますよ！

3. Git連携

Macであればgitは元から入っています。

gitのインストール等は必要ありません。

GitHubにリポジトリを作り、ソースコードを管理していきます。

Gitとは...
ソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

GitHubとは...
ソースコードをホスティングすることで複数人のソフトウエア開発者と協働してコードをレビューしたり、プロジェクトを管理しつつ開発を行うことができる。

簡単にいうとプロジェクトの管理がしやすくなるという認識でいてください。現場ではよく使われるので、触れておいて損はありません。

GitHubに登録されていない方はこちらから登録お願いします。

登録後、ログインしてリポジトリを作ります。

リポジトリとは...
ファイルやディレクトリの状態を記録する場所です。変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。

以下画像のNew repositoryをクリックしてください。

スクリーンショット 2020-03-07 13.49.08

クリックすると以下画像ページに遷移します。

Repository nameにlaravel-appと入力してください。

その他はそのままでOKです。

Create repositoryをクリックしましょう！

スクリーンショット 2020-03-07 13.50.46

Create repositoryをクリックすると以下画像のような画面に遷移します。

スクリーンショット 2020-03-07 13.55.26

重要なのはこの部分です。

# これはコピペしないでください
# GitHubからコピーしてください
echo "# laravel-app" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/hogehoge/laravel-app.git
git push -u origin master

⚠︎GitHub上で表示されたコマンドをコピーしてください。上記はコピーしてはいけません。

laravel-appディレクトリで実行していきます。

laravel-appディレクトリにいない場合はcdコマンドで移動してください。

# コンテナに入っている場合は抜ける
[コンテナ]$ exit

# 現在の場所がlaravel-appであること確認、コンテナの外であること確認
[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

# GitHub上で表示されたコマンドを実行（これをコピーしない）
[mac]$ echo "# laravel-app" >> README.md
[mac]$ git init
[mac]$ git add README.md
[mac]$ git commit -m "first commit"
[mac]$ git remote add origin https://github.com/hogehoge/laravel-app.git
[mac]$ git push -u origin master

git push -u origin master 実行でエラーがでました。。

エラーが何も出なかった方はそれで問題なしです！

error: src refspec master does not match any.
error: failed to push some refs to 'https://github.com/hogehoge/laravel-app.git'
nothing added to commit but untracked files present (use "git add" to track)

「addしてるものが一つもないですよ」と怒られているようです。。

同じエラーが出た方は次の手順で操作してください。

# 現在地がlaravel-appであること確認
[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ git add -A

[mac]$ git commit -m 'laravel-app始動'

[mac]$ git push -u origin master

Enumerating objects: 118, done.
Counting objects: 100% (118/118), done.
Delta compression using up to 4 threads
Compressing objects: 100% (100/100), done.
Writing objects: 100% (118/118), 187.64 KiB | 3.91 MiB/s, done.
Total 118 (delta 8), reused 0 (delta 0)
remote: Resolving deltas: 100% (8/8), done.
To https://github.com/hogehoge/laravel-app.git
* [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

↑ これでOKです！

OKじゃなくて、なにやっているか全然わかんないよ！と思いますよね。。

申し訳ない！簡単にgitコマンドについて説明します。

○git init
「リポジトリを新規に作成」するときに使用するコマンド。
gitで管理したいディレクトリでまず初めに実行します。
一度実行すれば、もう一度実行することはありません。
○git add
作業ツリーにあるファイルの更新内容を、インデックスに反映するための Git コマンド。インデックスに追加された変更内容は、次の「git commit」を実行した際に、そのコミットに含まれる事になります。
-Aオプションで変更のある全てのファイルをインデックスに追加する。
○git commit
追加・変更したファイルをGitに登録するためのコマンド。
いわゆるセーブができ、いつでもcommitした時点に戻れます。
○git push
リモートレポジトリのブランチ履歴を更新するための Git コマンド。
GitHubで作成したリポジトリがリモートリポジトリになります。
commitの後、pushが基本です。
○git status
どのディレクトリ、ファイルが変更されたか確認するコマンド。
addする前は赤文字で表示され、addされたファイルは緑色で表示される。

これを踏まえて、基本の流れは以下のようになります。

1. ファイルに編集する
2. git statusで変更ファイル確認
3. git addでインデックスに追加
4. git statusでaddしたファイルを確認
5. git commitでセーブ
6. git pushでcommitした内容でリモートリポジトリを更新

話を戻します。笑

今、リポジトリにpushすることに成功したので

GitHubのリポジトリを確認してみましょう。

スクリーンショット 2020-03-07 14.44.38

commit内容が反映されていますね！

Git連携はこれで終了です！

4. デプロイ（本番環境へ公開）

いよいよ第１章最後です！

環境構築は大変ですが、後少し頑張りましょう！

デプロイにはHerokuを使います。

基本無料で使えます。素晴らしい。。

Herokuとは...
開発したWEBアプリケーションを10分程度で全世界に公開することができ、そのままサービスを本格的に運用することも可能なホスティングサービス

Herokuに登録されいない方はこちらから登録をお願いします。

登録が完了したら、ターミナルからバージョンを確認します。

[mac]$ heroku -v
heroku/7.35.1 darwin-x64 node-v12.13.0

上記のように表示されればOKです！

しかし、bash: heroku: command not foundと表示されるかも。。

herokuコマンドをコマンドラインから実行できるようにする必要があります。

その時は、heroku toolbeltをインストールすると良いとか。

インストールはこちらからできます。

Download the installerボタンからインストールできますね！

スクリーンショット 2020-03-07 15.23.11

さて、デプロイの準備を進めていきます。

laravel-appディレクトリに移動し、herokuにログインします。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

# herokuにログインする
# 登録時のメールアドレスとパスワードを入力する
[mac]heroku login
.
.
Logging in... done

heroku loginで、もしタイムアウトエラーが出る場合は、

heroku login -interactive

を試してみてください。

次に、herokuアプリを作成します。（laravel-app-superという名前で作成）

laravel-app-superというアプリ名は僕が使ったことで同じ名前はつけられません。

名前は何にしても大丈夫なので、自身で考えてみてください！

# 現在位置がlaravel-appであること確認
[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app 

[mac]$ heroku create laravel-app-super
Creating ⬢ laravel-app-super... done
https://laravel-app-super.herokuapp.com/ | https://git.heroku.com/laravel-app-super.git

以下のコマンドを実行してください。

4つ表示されればとりあえずOKです。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ git remote -v
heroku	https://git.heroku.com/laravel-app-super.git (fetch)
heroku	https://git.heroku.com/laravel-app-super.git (push)
origin	https://github.com/hogehoge/laravel-app.git (fetch)
origin	https://github.com/hogehoge/laravel-app.git (push)

次にlaravel-app直下にProcfileを作成します。

lsコマンドで作成されているか確認します。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ touch Procfile

[mac]$ ls
Procfile		composer.json	package.json	resources	tests
app		    composer.lock	phpunit.xml	    routes		vendor
artisan		config		public		server.php	webpack.mix.js
bootstrap	database	readme.md	storage

作成したProcfileに以下を記述します。

web: vendor/bin/heroku-php-apache2 public/

変更したファイルを確認して、commitしてpushしましょう。

リポジトリへpushまで終われば、一度herokuにもpushします。

途中Warningが出てもエラーでなければ問題はありません。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ git status
[mac]$ git add -A
[mac]$ git commit -m 'Add Procfile'
[mac]$ git push

# herokuへpush
[mac]$ git push heroku master

次に、herokuの個別設定を行います。

herokuのDBはPostgreSQLになります。

つまり、開発環境ではMySQL、本番環境ではPostgreSQLを使用することになります。

まず、herokuのアドオンにPostgreSQLを作成するため、以下のコマンドを実行してください。

以下のようになればOKです。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

# herokuのアドオンにPostgreSQLを作成
[mac]$ heroku addons:create heroku-postgresql:hobby-dev

Creating heroku-postgresql:hobby-dev on ⬢ laravel-app-super... free
Database has been created and is available
! This database is empty. If upgrading, you can transfer
! data from another database with pg:copy
Created postgresql-rugged-06125 as DATABASE_URL
Use heroku addons:docs heroku-postgresql to view documentation

さらに以下のコマンドを実行するとherokuの情報が表示されるので、メモします。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ heroku config:get DATABASE_URL

# メモしよう
postgres://<ユーザ名>:<パスワード>@<ホスト>:5432/<DB名>

上記コマンドの実行結果を元に個別に設定していきます。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ heroku config:set DB_CONNECTION=pgsql
[mac]$ heroku config:set DB_HOST=<ホスト>
[mac]$ heroku config:set DB_DATABASE=<DB名>
[mac]$ heroku config:set DB_USERNAME=<ユーザ名>
[mac]$ heroku config:set DB_PASSWORD=<パスワード>

個別設定完了したら、マイグレーションを実行します。

実行すると、Do you really wish to run this command? (yes/no) [no]:

と表示されるので、y or yes を入力してEnterを押してください。

本番環境のDBを本当に変更して良いか、確認が入るわけです。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

# マイグレーション実行（yesと入力）
[mac]$ heroku run php artisan migrate

Do you really wish to run this command? (yes/no) [no]:
> yes

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.02 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.01 seconds)

続いてアプリの情報を設定していきます。

APP_KEYはlaravelプロジェクトの.envファイルに記載があります。

base64: 始まりから全てコピーしましょう。

APP_KEY=base64:xxxxx.....

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ heroku config:set DEBUGBAR_ENABLED=true

# コピペしない（.envを確認）
[mac]$ heroku config:set APP_KEY=base64:xxxxx.....

これで設定は一通り終了です！

試しに、laravelプロジェクトのファイルを少しだけ変更してデプロイしてみましょう。

resources/views/welcome.blade.phpを開いて、bodyタグ内に以下を追加しましょう。

<h1>Hello World!</h1>

追加できたら、commitしてherokuへpushします。

最後にheroku openコマンドで実行してブラウザで開きます。

[mac]$ pwd
/Users/*********/laravel-docker-workspace/laravel-app

[mac]$ git status
[mac]$ git add -A
[mac]$ git commit -m 'heroku 設定終了'
[mac]$ git push
[mac]$ git push heroku master
[mac]$ heroku open

以下のように本番環境でHello World! が反映されていればOKです！

スクリーンショット 2020-03-08 11.12.13

お疲れ様でした！

環境構築からGit連携、デプロイまで全て終了になります！！

これであなただけのオリジナルアプリが全世界に公開されました！

Hello Worldを出力しただけですが、立派なアプリケーションです！

第２章からソースコードを書いていきます！！

ありがとうございました！

もし、参考になったとか、勉強になったという方がいらっしゃれば、

Twitterで感想をいただけると嬉しいです！

不明な点があれば、僕までコメントをください。（@RubyPHP2）

よろしくお願いします。

では、第２章でお会いしましょう！

この記事が気に入ったらサポートをしてみませんか？

プログラミング初心者のための「0から始めるWebアプリケーション実践開発」第１章

第１章 環境構築からデプロイ

第１章環境構築からデプロイ