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

  0-5 サンプルアプリケーションの環境構築(Mac編)

このパートでは、筆者が事前に用意したサンプルアプリケーションを開発環境で動くようにします。

1. サンプルアプリケーションのソースコードのコピー


まず、サンプルアプリケーションのソースコードをGitHubからコピー(git clone)します。

ci-tutorialディレクトリで、以下のコマンドを入力してください。

(コマンド実行場所は、ci-tutorial/laradockディレクトリではありませんので、注意してください)

$ git clone -b laravel-ci https://github.com/shonansurvivors/laravel-sns laravel-ci

コマンド実行後、ci-tutorialディレクトリ配下にlaravel-ciディレクトリが作成され、さらにその下に各種ファイルが存在すれば問題ありません。

現時点のディレクトリ構造は以下となります。

.
└──ci-tutorial
    ├── data (前パートで、コンテナを起動したことで作成されたディレクトリ)
    ├── laradock
    └── laravel-ci (今回新規作成されたディレクトリ)

なお、本教材では、上記のうち、laravel-ciディレクトリをあなたのGitHubアカウントのリモートリポジトリで管理していきます。

リモートリポジトリ作成の流れは1章のパート2で説明します。

それまではGitHubに本教材用のリモートリポジトリを作成せずに進めてください。

2. Laravelの環境構築


2.1. PHPの各種パッケージのインストール

git cloneにより、サンプルアプリケーションのソースコードをコピーしました。

しかし、ここにはLaravelのフレームワーク本体のコードなど、PHPの各種パッケージがまだインストールされてはいません。

サンプルアプリケーションを動かすためには、これらパッケージも必要です。

本教材のサンプルアプリケーションでは、PHPの各種パッケージ管理にComposerを使用しています。

Composerを使ってPHPの各種パッケージをインストールするために、ci-tutorial/laradockディレクトリで以下コマンドを実行してください。

(今度のコマンド実行場所は、先ほどと違ってlaravel-ciディレクトリではありませんので、注意してください)

$ docker-compose exec workspace composer install --prefer-dist

何十行かメッセージが表示された後、以下のような表示がされればPHPの各種パッケージのインストールは成功です。

Package manifest generated successfully.

なお、本教材で今後もdocker-composeから始まるコマンドを実行することがありますが、その際はci-tutorial/laradockディレクトリに移動した上で実行する必要がありますので、覚えておいてください。

2.2. Laravelが使う.envファイルの作成

GitHubからコピーしてきたサンプルアプリケーションには、Laravelの環境変数ファイルである.envが含まれていません。

代わりに.env.example.laravel-ciファイルが存在するので、これをコピーして、.envファイルを作成します。

laravel-ciディレクトリで以下を実行してください。

$ cp .env.example.laravel-ci .env

2.3. Laravelのアプリケーションキーを.envに設定する

現在のlaravel-ci/.envは、Laravelでの暗号化処理などに使用される環境変数APP_KEYがまだ設定されていません。

.
└──ci-tutorial
    └── laravel-ci
        └── .env


APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

# 略

このAPP_KEYに値を設定します。

APP_KEYに設定するための値はLaravelに用意されたコマンドで生成できます。

ci-tutorilal/laradockディレクトリで以下コマンドを実行してください。

$ docker-compose exec workspace php artisan key:generate

コマンド実行後、laravel-ci/.envファイルのAPP_KEY値を確認してください。

以下のように値が設定されていれば問題ありません。

.
└──ci-tutorial
    └── laravel-ci
        └── .env


APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #========== 注:xxxの部分はランダムな文字列
APP_DEBUG=true
APP_URL=http://localhost

# 略

2.4. データベースの作成

次に、サンプルアプリケーションのデータベースを作成します。

前パートで、データベースマネジメントシステム(DBMS)であるPostgreSQLのDockerコンテナpostgresは作成・起動済みです。

しかし、このpostgresは、まだサンプルアプリケーション用のデータベースを持ってはいません。

そのため、データベースを作成します。

ci-tutorial/laradockディレクトリで以下コマンドを実行してください。

$ docker-compose exec workspace psql -U default -h postgres

このコマンドではDockerのworkspaceコンテナに入り、そこでさらにpsqlコマンドを実行しています。

psqlは、PostgreSQLをコマンドで操作するためのツールです。

-Uオプションで、ユーザー名を指定します。ここでは、defaultユーザーを使っています。

-hオプションで、接続先のホスト名を指定します。ここでは、postgresコンテナを指定しています。

コマンドを実行すると、以下のようにdefaultユーザーのパスワードが聞かれます。

Password for user default: 

ここでは、secretと入力してください。

正しいパスワードが入力できると、以下が表示され、PostgreSQLの操作ができるようになります。

default=#

次に、データベースを作成します。以下のようにコマンドを実行してください。

ここではlarasnsという名前のデータベースを作成しています。

コマンドの最後の;を忘れずに入力してください。

default=# create database larasns;

コマンド実行後、以下のように表示されたらデータベースの作成は成功です。

CREATE DATABASE

psqlを終了させます。以下のように\qと入力してください。

default=# \q

2.5. データベースのマイグレーションを行う

続いて、Laravelのマイグレーションを使ってデータベースにテーブルを作成します。

マイグレーションとは、データベースにテーブルを作成したり、既存のテーブルにカラム(項目)を追加したりといった、データベース内の定義を変更する機能です。

Laravelでマイグレーションを行うには、Laravelがデータベースに接続可能な設定となっている必要があります。

先ほど「2.2. Laravelが使う.envファイルの作成」では、.env.example.laravel-ciファイルをコピーして、.envファイルを作成しました。

この.envファイルでのデータベース接続用の設定は、既にPostgreSQL用にしてあります。

.
└──ci-tutorial
    └── laravel-ci
        └── .env


#PostgreSQL
DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=larasns
DB_USERNAME=default
DB_PASSWORD=secret

ですので、laravel-ci/.envを編集する必要はありません。

マイグレーションを実行するためにci-tutorial/laradockディレクトリで以下コマンドを実行してください。

$ docker-compose exec workspace php artisan migrate

コマンド実行後、以下のように表示されたらデータベースのマイグレーションは成功です。

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.07 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.03 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.05 seconds)
Migrating: 2020_01_23_221657_create_articles_table
Migrated:  2020_01_23_221657_create_articles_table (0.06 seconds)
Migrating: 2020_02_14_212406_create_likes_table
Migrated:  2020_02_14_212406_create_likes_table (0.04 seconds)
Migrating: 2020_02_16_205740_create_tags_table
Migrated:  2020_02_16_205740_create_tags_table (0.03 seconds)
Migrating: 2020_02_16_205945_create_article_tag_table
Migrated:  2020_02_16_205945_create_article_tag_table (0.04 seconds)
Migrating: 2020_02_18_100555_create_follows_table
Migrated:  2020_02_18_100555_create_follows_table (0.03 seconds)

3. JavaScriptの環境構築


3.1. JavaScriptの各種パッケージのインストール

サンプルアプリケーションではVue.jsなどを使用しているため、Vue.jsなどのJavaScriptの各種パッケージをインストールする必要があります。

本教材では、JavaScriptの各種パッケージ管理にnpmを使用しています。

npmを使ってJavaScriptの各種パッケージをインストールするために、ci-tutorial/laradockディレクトリで以下コマンドを実行してください。

$ docker-compose exec workspace npm ci

何行かメッセージが表示された後、以下のような表示がされればJavaScriptの各種パッケージのインストールは成功です。

added XXXX packages in XX.XXXs

もし、エラーメッセージなどが表示された場合は、もう一度同じコマンドを試してみるか、代わりに以下のコマンドを実行してください。

$ docker-compose exec workspace npm install

なお、npm cinpm installも、JavaScriptの各種パッケージのインストールのためのnpmのコマンドですが、両者の違いを知りたい方は以下を参考にしてください。

3.2. JavaScriptのトランスパイル

サンプルアプリケーションのJavaScriptは新しい記法で書かれており、そのまま各ブラウザで動かすことができません。

そこで、各ブラウザで動かせる形式にトランスパイル(変換)します。

ci-tutorial/laradockディレクトリで以下コマンドを実行してください。

$ docker-compose exec workspace npm run dev

しばらく待った後、以下のような表示がされればJavaScriptのトランスパイルは成功です。

 DONE  Compiled successfully in 7803ms                                                                 2:48:51 PM

       Asset      Size   Chunks             Chunk Names
/css/app.css   0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  1.02 MiB  /js/app  [emitted]  /js/app

4. サンプルアプリケーションの動作確認


ここまでの作業が完了したら、ブラウザでlocalhostにアクセスしてください。

以下のような画面が表示がされたら、サンプルアプリケーションの環境構築は完了しています。

以上で、本パートは終了です。

議論

5 質問

このコースの評価は?