カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-5

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

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

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

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

まず、サンプルアプリケーションのソースコードを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に本教材用のリモートリポジトリを作成せずに進めてください。

2. Laravelの環境構築

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

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ディレクトリに移動した上で実行する必要がありますので、覚えておいてください。

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

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

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

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

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

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

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

Copied!
. └──ci-tutorial └── laravel-ci └── .env
laravel-ci/.env
1234567
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/.env
1234567
Copied!
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ディレクトリで以下コマンドを実行してください。

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

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

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

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

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

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

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

Copied!
. └──ci-tutorial └── laravel-ci └── .env
laravel-ci/.env
1234567
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)

3. JavaScriptの環境構築

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

サンプルアプリケーションでは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 cinpm installも、JavaScriptの各種パッケージのインストールのためのnpmのコマンドですが、両者の違いを知りたい方は以下を参考にしてください。

3.2. JavaScriptのトランスパイル

サンプルアプリケーションの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

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

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

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

top

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

現在のパート (11)
全パート (80)
みんなで助け合おう!
現在のパートのディスカッション 全11件
0-5
zuo 2022-12-15
localhostにアクセスできない(Mac使用)

発生している問題

localhostにアクセスできない

エラー画面をスクショで添付してください

スクリーンショット 2022-12-15 0.16.04.png

試したこと

・google chromeのキャッシュのクリア
・docker,mac再起動
スクリーンショット 2022-12-15 0.18.41.png
コンテナは動いており、マイグレーションもすんなり通りました。

ご教授のほど、よろしくお願いします。

0-5
jyonson 2021-09-05
docker-compose exec workspace composer install --prefer-dist

docker-compose exec workspace composer install --prefer-dist
このコマンドを、laradockディレクトリで実行しても、なんの反応もありません。
何を確認するべきでしょうか。

0-5
AKIRA 2021-08-12
Laravel(+Vue.js)でSNS風Webサービスを使用できるか

こんにちは!
前回に引き続き本教材も楽しませてもらっています!

早速質問なのですが
Laravel(+Vue.js)でSNS風Webサービスを作ろう!
で使用した開発環境でも問題ないですか?
またサンプルアプリケーションを使用せずに
Laravel(+Vue.js)でSNS風Webサービスで作成したアプリを使用しても
問題はありませんか?

質問時では今回用意されているDockerを使用した開発環境やサンプルアプリの中身は未確認です。
見てもわからない部分があると思いました。

問題がないかという質問の意図が
開発環境やアプリ違うために支援を受けれないのかと
思いましたので質問させていただきました。

0-5
K.ddd 2021-01-23
composer self-updateをしてもバージョンが変わらない。

発生している問題

docker-compose exec workspace composer install --prefer-distを実行した際に、以下のエラーが表示されます。

エラー画面をスクショで添付してください

スクリーンショット 2021-01-23 16.35.43.png

試したこと

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のままです。

0-5
YuGyao 2020-11-27
$ docker-compose exec workspace composer install --prefer-dist 後エラーになる

発生している問題

上記コマンド後、エラー文が出てコンポーザーをインストールできません。

エラー画面をスクショで添付してください

スクリーンショット 2020-11-26 18.11.23.png

試したこと

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ファイルに間違いはないか調べました
スクリーンショット 2020-11-27 5.59.47.png

・ もう一度始めからやってみたのですが、やはり同じエラーが出ました。

いろいろな記事をみて原因を探ってみて、composerのバージョンが2になったことが原因かと思いバージョンを最新にしてみたり、ダウングレードしてみたりしたのですが結果は同じでした。
他に原因があるのかもしれませんが、わかりません。
もし何かご存知であれば教えていただけないでしょうか?

補足情報(フレームワークのバージョン・OS)

Mac OS
Composer version 2.0.7