教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートでは、筆者が事前に用意したサンプルアプリケーションを開発環境で動くようにします。
まず、サンプルアプリケーションのソースコードをGitHubからコピー(git clone
)します。
ci-tutorial
ディレクトリで、以下のコマンドを入力してください。
(コマンド実行場所は、ci-tutorial/laradock
ディレクトリではありませんので、注意してください)
Copied!$ git clone -b laravel-ci https://github.com/shonansurvivors/laravel-sns laravel-ci
コマンド実行後、ci-tutorial
ディレクトリ配下にlaravel-ci
ディレクトリが作成され、さらにその下に各種ファイルが存在すれば問題ありません。
現時点のディレクトリ構造は以下となります。
Copied!.
└──ci-tutorial
├── data (前パートで、コンテナを起動したことで作成されたディレクトリ)
├── laradock
└── laravel-ci (今回新規作成されたディレクトリ)
なお、本教材では、上記のうち、laravel-ci
ディレクトリをあなたのGitHubアカウントのリモートリポジトリで管理していきます。
リモートリポジトリ作成の流れは1章のパート2で説明します。
それまではGitHubに本教材用のリモートリポジトリを作成せずに進めてください。
git clone
により、サンプルアプリケーションのソースコードをコピーしました。
しかし、ここにはLaravelのフレームワーク本体のコードなど、PHPの各種パッケージがまだインストールされてはいません。
サンプルアプリケーションを動かすためには、これらパッケージも必要です。
本教材のサンプルアプリケーションでは、PHPの各種パッケージ管理にComposerを使用しています。
Composerを使ってPHPの各種パッケージをインストールするために、ci-tutorial/laradock
ディレクトリで以下コマンドを実行してください。
(今度のコマンド実行場所は、先ほどと違ってlaravel-ci
ディレクトリではありませんので、注意してください)
Copied!$ docker-compose exec workspace composer install --prefer-dist
何十行かメッセージが表示された後、以下のような表示がされればPHPの各種パッケージのインストールは成功です。
Copied!Package manifest generated successfully.
なお、本教材で今後もdocker-compose
から始まるコマンドを実行することがありますが、その際はci-tutorial/laradock
ディレクトリに移動した上で実行する必要がありますので、覚えておいてください。
GitHubからコピーしてきたサンプルアプリケーションには、Laravelの環境変数ファイルである.env
が含まれていません。
代わりに.env.example.laravel-ci
ファイルが存在するので、これをコピーして、.env
ファイルを作成します。
laravel-ci
ディレクトリで以下を実行してください。
Copied!$ cp .env.example.laravel-ci .env
現在のlaravel-ci/.env
は、Laravelでの暗号化処理などに使用される環境変数APP_KEY
がまだ設定されていません。
Copied!.
└──ci-tutorial
└── laravel-ci
└── .env
laravel-ci/.env1234567 Copied!APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
# 略
このAPP_KEY
に値を設定します。
APP_KEY
に設定するための値はLaravelに用意されたコマンドで生成できます。
ci-tutorilal/laradock
ディレクトリで以下コマンドを実行してください。
Copied!$ docker-compose exec workspace php artisan key:generate
コマンド実行後、laravel-ci/.env
ファイルのAPP_KEY
値を確認してください。
以下のように値が設定されていれば問題ありません。
Copied!.
└──ci-tutorial
└── laravel-ci
└── .env
laravel-ci/.env1234567 Copied!APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #========== 注:xxxの部分はランダムな文字列
APP_DEBUG=true
APP_URL=http://localhost
# 略
次に、サンプルアプリケーションのデータベースを作成します。
前パートで、データベースマネジメントシステム(DBMS)であるPostgreSQLのDockerコンテナpostgres
は作成・起動済みです。
しかし、このpostgres
は、まだサンプルアプリケーション用のデータベースを持ってはいません。
そのため、データベースを作成します。
ci-tutorial/laradock
ディレクトリで以下コマンドを実行してください。
Copied!$ docker-compose exec workspace psql -U default -h postgres
このコマンドではDockerのworkspace
コンテナに入り、そこでさらにpsql
コマンドを実行しています。
psql
は、PostgreSQLをコマンドで操作するためのツールです。
-U
オプションで、ユーザー名を指定します。ここでは、default
ユーザーを使っています。
-h
オプションで、接続先のホスト名を指定します。ここでは、postgres
コンテナを指定しています。
コマンドを実行すると、以下のようにdefault
ユーザーのパスワードが聞かれます。
Copied!Password for user default:
ここでは、secret
と入力してください。
正しいパスワードが入力できると、以下が表示され、PostgreSQLの操作ができるようになります。
Copied!default=#
次に、データベースを作成します。以下のようにコマンドを実行してください。
ここではlarasns
という名前のデータベースを作成しています。
コマンドの最後の;
を忘れずに入力してください。
Copied!default=# create database larasns;
コマンド実行後、以下のように表示されたらデータベースの作成は成功です。
Copied!CREATE DATABASE
psqlを終了させます。以下のように\q
と入力してください。
Copied!default=# \q
続いて、Laravelのマイグレーションを使ってデータベースにテーブルを作成します。
マイグレーションとは、データベースにテーブルを作成したり、既存のテーブルにカラム(項目)を追加したりといった、データベース内の定義を変更する機能です。
Laravelでマイグレーションを行うには、Laravelがデータベースに接続可能な設定となっている必要があります。
先ほど「2.2. Laravelが使う.envファイルの作成」では、.env.example.laravel-ci
ファイルをコピーして、.env
ファイルを作成しました。
この.env
ファイルでのデータベース接続用の設定は、既にPostgreSQL用にしてあります。
Copied!.
└──ci-tutorial
└── laravel-ci
└── .env
laravel-ci/.env1234567 Copied!#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
ディレクトリで以下コマンドを実行してください。
Copied!$ docker-compose exec workspace php artisan migrate
コマンド実行後、以下のように表示されたらデータベースのマイグレーションは成功です。
Copied!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)
サンプルアプリケーションではVue.jsなどを使用しているため、Vue.jsなどのJavaScriptの各種パッケージをインストールする必要があります。
本教材では、JavaScriptの各種パッケージ管理にnpmを使用しています。
npmを使ってJavaScriptの各種パッケージをインストールするために、ci-tutorial/laradock
ディレクトリで以下コマンドを実行してください。
Copied!$ docker-compose exec workspace npm ci
何行かメッセージが表示された後、以下のような表示がされればJavaScriptの各種パッケージのインストールは成功です。
Copied!added XXXX packages in XX.XXXs
もし、エラーメッセージなどが表示された場合は、もう一度同じコマンドを試してみるか、代わりに以下のコマンドを実行してください。
Copied!$ docker-compose exec workspace npm install
なお、npm ci
もnpm install
も、JavaScriptの各種パッケージのインストールのためのnpmのコマンドですが、両者の違いを知りたい方は以下を参考にしてください。
サンプルアプリケーションのJavaScriptは新しい記法で書かれており、そのまま各ブラウザで動かすことができません。
そこで、各ブラウザで動かせる形式にトランスパイル(変換)します。
ci-tutorial/laradock
ディレクトリで以下コマンドを実行してください。
Copied!$ docker-compose exec workspace npm run dev
しばらく待った後、以下のような表示がされればJavaScriptのトランスパイルは成功です。
Copied! 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
ここまでの作業が完了したら、ブラウザでlocalhost
にアクセスしてください。
以下のような画面が表示がされたら、サンプルアプリケーションの環境構築は完了しています。
以上で、本パートは終了です。
localhostにアクセスできない
・google chromeのキャッシュのクリア
・docker,mac再起動
コンテナは動いており、マイグレーションもすんなり通りました。
ご教授のほど、よろしくお願いします。
docker-compose exec workspace composer install --prefer-dist
このコマンドを、laradockディレクトリで実行しても、なんの反応もありません。
何を確認するべきでしょうか。
こんにちは!
前回に引き続き本教材も楽しませてもらっています!
早速質問なのですが
Laravel(+Vue.js)でSNS風Webサービスを作ろう!
で使用した開発環境でも問題ないですか?
またサンプルアプリケーションを使用せずに
Laravel(+Vue.js)でSNS風Webサービスで作成したアプリを使用しても
問題はありませんか?
質問時では今回用意されているDockerを使用した開発環境やサンプルアプリの中身は未確認です。
見てもわからない部分があると思いました。
問題がないかという質問の意図が
開発環境やアプリ違うために支援を受けれないのかと
思いましたので質問させていただきました。
docker-compose exec workspace composer install --prefer-distを実行した際に、以下のエラーが表示されます。
https://jianjye.com/articles/30/how-to-fix-undefined-index-name-in-packagemanifestphp-line-131-error-with-composer
上記参考に
laradockディレクトリで以下を実行。
$ composer self-update --1
しかし、バージョンはComposer version 2.0.4 2020-10-30 22:39:11のままです。
上記コマンド後、エラー文が出てコンポーザーをインストールできません。
・https://jianjye.com/articles/30/how-to-fix-undefined-index-name-in-packagemanifestphp-line-131-error-with-composer を見て、 composer update や composer self-update を試しました。
しかし再度 $ docker-compose exec workspace composer install --prefer-dist を打っても同じエラーのままでした。
・ .envファイルに間違いはないか調べました
・ もう一度始めからやってみたのですが、やはり同じエラーが出ました。
いろいろな記事をみて原因を探ってみて、composerのバージョンが2になったことが原因かと思いバージョンを最新にしてみたり、ダウングレードしてみたりしたのですが結果は同じでした。
他に原因があるのかもしれませんが、わかりません。
もし何かご存知であれば教えていただけないでしょうか?
Mac OS
Composer version 2.0.7