前のパートに戻る 完了して次のパートへ  

  0-5 Laradockによる開発環境構築(Mac編)

このパートでは、Laradockをインストールして、Laravelを動かすための開発環境を作ります。

また、ターミナルやAtomの使い方についても触れていきます。

Laradockとは


Laravelを動かす為には、Webサーバーや、多くの場合でデータベースが必要になってきます。

Laradockを使うことで、このWebサーバーやデータベースをDocker上に簡単に構築することができます。

(なお、本教材ではデータベースを使用しないので、Dockerにも構築はしていません)

ターミナルを使おう


Laradockをインストールする際には、ターミナルでいくつかのコマンドを入力します。

ターミナルとは、文字だけで操作を行う、以下のような画面です。

Laradockを実際にインストールする前に、このターミナルの操作に慣れておきましょう。

ターミナルは以下の方法で呼び出せます。

  • Macの右上の虫眼鏡アイコン(Spotlight検索)にターミナルと入力する

または

  • Finderなどから、アプリケーション > ユーティリティ > ターミナル と選択する

現在のフォルダを表示するpwd

まず、ターミナルの画面が開いたら

$ pwd

と入力してエンターキーを押してください。

すると、次のように表示されるはずです。なお、Macでのユーザー名の部分は人によって異なりますので、適宜読み替えてください。

Users/Macでのユーザー名

もし、Usersから始まるフォルダが表示されていなかったら、

$ cd ~

と入力してから、もう一度pwd⏎を入力してください

このようにpwdは、現在自分がいるフォルダ名を表示してくれます。

ファイルやフォルダの一覧を表示するls

次に、

$ ls

と入力してください。

以下のように、フォルダ名がいくつか表示されるはずです。

Applications		Library			Public
Desktop			Movies
Documents		Music
Downloads		Pictures

このようにlsは、現在自分がいるフォルダのフォルダ名やファイル名の一覧を表示してくれます。

自分がいるフォルダを移動するcd

次に

$ cd Documents

と入力してください。

これで、自分がいるフォルダから見てひとつ下の階層にあるDocumentsフォルダに移動しました。

さらにpwdを使って、いま自分がいるフォルダを確認してみましょう。

$ pwd

と入力してください。

次のように表示されたはずです。

Users/Macでのユーザー名/Documents

このようにcd 移動したいフォルダ名を入力すると、自分がいるフォルダから、指定したひとつ下の階層のフォルダに移動できます。

ひとつ上の階層のフォルダに戻るcd ../

では、次にUsers/Macでのユーザー名のフォルダに戻ってみましょう。

つまり、いま自分がいるフォルダの、ひとつ上の階層のフォルダに戻ることになります。

$ cd ../

と入力し、さらに

$ pwd

と入力して、いま自分がいるフォルダを確認してみてください。

次のように表示されたはずです。

Users/Macでのユーザー名

このようにcd ../と入力すると、自分がいるフォルダから、ひとつ上の階層のフォルダに移動できます。

Laradockをインストールしよう


ターミナルの操作に慣れたところで、Laradockのインストール作業を始めていきます。

laravel-linebotフォルダの作成

まず、laravel-linebotフォルダを作成しましょう。

では、ターミナルで以下を入力してください。

$ pwd

以下のように表示されたでしょうか?

Users/Macでのユーザー名

もし、違っていたら、以下の通り入力してください。

$ cd ~
$ pwd

今度は表示されるはずです。

cd ~は、いま自分がいるフォルダがどこであっても、Users/Macでのユーザー名のフォルダに移動できます。

便利なので、これも覚えておきましょう。

次に以下を入力してください。

mkdirは、フォルダを新規作成するコマンドです。

$ mkdir laravel-linebot
$ cd laravel-linebot
$ pwd

すると、以下のように表示されるはずです。

Users/Macでのユーザー名/laravel-linebot

mkdirでフォルダを作って、cdでそのフォルダに移動したわけですね。

laradockをインストールする

laravel-linebotフォルダを作成できたので、そこにlaradockをインストールします。

以下を入力してください。

このコマンドでは、gitという仕組みを使ってGitHubからlaradockのファイルをコピーする、ということをやっています。

$ git clone https://github.com/Laradock/laradock.git

Cloning into 'laradock'...と、数行のメッセージが表示されると思います。

完了すると、laradockというフォルダが作成されているはずですので確認してみましょう。

$ ls

以下のようにlaradockフォルダが作成されているはずです。

laradock

laradockの.envファイルを作成する

次に、laradockの設定に関わるファイルのひとつである、.envファイルを作成します。

laradockは、.envファイルの雛形としてenv-exampleファイルを用意してくれているので、これを元に作成することにします。

以下を入力してください。

$ cd laradock
$ cp env-example .env

cpは、ファイルをコピーするコマンドです。

cp コピー元ファイル名 コピー先ファイル名と入力して使います。

これでenv-exampleファイルをもとに.envファイルが作成されました。

なお、プログラミング初学者の方には、.envといったファイル名は、名前が無くて拡張子だけのファイルに見えて違和感があるかもしれませんが、そういうものだと思ってください。

laradockの.envファイルを編集する

次にエディタ等を使って、.envファイルを編集します。

もし使っているエディタが本講座で紹介したAtomなのであれば、Atomを起動後、左上のメニューから

File > Open

と選択し、laravel-linebotフォルダを選択してください。

すると、ウィンドウの左側のProjectという列にフォルダとファイルの一覧が表示されるので、そこからlaladockフォルダの.envファイルを探してください。

.envファイルを開いたら、以下の部分をそれぞれ探し出して、記載の通りに変更してください。

APP_CODE_PATH_HOST=../laravel
DATA_PATH_HOST=../data

Dockerを使って開発環境を起動する

次にDockerを使って開発環境を起動します。

Docker上で動く各サービスの単位をコンテナと呼びます。

ここでは、以下3つのコンテナを起動します。

  • workspace
  • php-fpm
  • nginx

まず、ターミナルでlaravel-linebot/laradockフォルダに移動してください。

$ cd ~/laravel-linebot/laradock

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

$ docker-compose up -d workspace php-fpm nginx

コマンドの意味は以下の通りです。

  • docker-composeは、複数のコンテナを同時に取り扱うDocker Composeという機能を使うためのコマンドです
  • upは、Docker Composeでコンテナを起動するときに使うコマンドです
  • -dは、コンテナを起動した後に、ターミナルの操作に戻るためのオプションです

コマンドを実行すると、たくさんのメッセージが表示されます。

初回は、各コンテナのソフトウェア本体(Dockerイメージ)をダウンロードしてくるため、コンテナの起動までに数分程度の時間がかかります。

最後に以下のメッセージが表示されたら、コンテナの起動は成功です。

Creating laradock_docker-in-docker_1 ... done
Creating laradock_workspace_1        ... done
Creating laradock_php-fpm_1          ... done
Creating laradock_nginx_1            ... done

もし、この4つのメッセージが表示されなかったら、もう一度docker-compose up -d workspace php-fpm nginxを実施してみてください。

なお、ターミナルではカーソルキーの上を押すたびに、過去に実行したコマンドをさかのぼって表示できます(その状態で、下を押すと今度は最近実行したコマンドまで戻っていきます)。

便利なのでこれも覚えておきましょう。

コンテナの起動が完了したら、今度はブラウザを起動し、アドレスバーにlocalhostと入力してください。

以下のような表示がされたら、ここまでの作業は問題ありません。

(これは404 Not Foundというエラー画面の一種ですが、Dockerで開発環境が起動できたことは分かりますので、現時点ではこれでOKです)

議論
0 質問
このコースの評価は?