LaravelでTwitter風webアプリケーションを作ってみよう！#1【準備編】

# はじめに

Laravel を用いた Twitter 風アプリケーション開発に挑戦してみます！
初学者向けのレベルです！

## 実装する機能

- ユーザ管理機能．

- tweet の投稿．

- 投稿された tweet の一覧表示．

- 個別 tweet の詳細表示．

- tweet の削除．

- tweet の更新．

- ユーザ情報との連携．

- favorite 機能．

# 準備

Laravel で開発をするためには，開発環境を用意する必要がある．一人で開発するときだけでなく，複数人で開発する際には「同じ開発環境」を揃えることが大切である．

更に，フレームワークやライブラリを多用する場合，個々の PC 環境によって細かいバージョンの差異や動作具合に影響が生じることがある．

主な Laravel の開発環境には以下のようなものがある．

- ローカル環境（XAMPP など）

- ローカル上の仮想マシン（vagrant など）

- 仮想コンテナ（Docker など）

- クラウド上の仮想マシン（AWS Cloud9，Paiza Cloud など）

今回は仮想コンテナを用いて開発を行う．

## 【Windows 編】環境構築

Docker を使用するための準備を進めていく．

必要な OS

- Windows10 21H2 以降のバージョンもしくは Windows11 の最新版

- 上記より古い場合は進める前にアップデートしておこう．

必要なもの

- Docker Desktop

- Windows ターミナル

- Ubuntu 20.04

- WSL2

- PowerShell（Windows にもともと入っている）

### WSL の準備

1. Powershell 管理者権限で実行する．

2. 下記のコマンドを実行する．

   ```bash:
   wsl --install
   ```

3. PC を再起動する．

4. 再起動すると ubuntu のターミナルが自動的に立ち上がるのでユーザ名とパスワードを設定する．

   - パスワードは画面に表示されないので注意．

   - 任意の値で構わない

   - ユーザ名とパスワードは後ほど使用するので必ず控えておくこと．

5. Microsoft store で 「Windows ターミナル」をインストールする．

### Docker Desktop のインストール

1. 下記の URL にアクセスし，ダウンロード → インストールする．

   - https://www.docker.com/products/docker-desktop/

2. 完了したら画面の指示にしたがって windows からログアウト → ログインする（再起動でも OK）．

### Docker の動作確認

1. Docker Desktop を起動する．

2. 「Setting（画面上部の ⚙ アイコン）」 -> 「General」 -> 「Use the WSL2 based engine」にチェックを入れる．すでにチェックが入っていてユーザが操作できない状態となっている場合があるが，その場合はそのままで OK．

   ![docker設定画面1](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/docker_setting01.PNG)

3. 「Setting（画面上部の ⚙ アイコン）」 -> 「Resources」 -> 「WSL INTEGRATION」の Enable Integration ... にチェックを入れ，「Ubuntu 20.04」のトグルをオンにする．

   - トグルが出てこない場合は PC を再起動する．

   ![docker設定画面2](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/docker_setting02.PNG)

4. Windows ターミナルを Ubuntu で動かす．

   ↓ Windows ターミナルを開いて上部の「∨」をクリックするとメニューが出るので，ここで Ubuntu を選ぶ．出てこない場合は PC を再起動する（画像では Ubuntu 20.04 となっているが Ubuntu 表記になっているはず）．

   ![Ubuntu 設定箇所](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/terminal_image01.png)

   ↓ このようになっていればコマンドが実行できる．次項以降もこの状態でコマンドを実行していく．

   ![Windows ターミナル動作画面](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/terminal_image02.png)

5. 下記のコマンドを実行し， docker のバージョンが表示されれば準備完了（バージョンなどの数値は資料より新しくて問題ない）．

```bash:
$ docker -v
Docker version 20.10.8, build 3967b7d
```

## 【Mac 編】環境構築

Docker を使用するための準備を進めていく．

必要な OS

- 最新の MacOS

必要なもの

- Docker Desktop

- ターミナル（Mac に入っているもので OK）

### Docker Desktop のダウンロードとインストール

下記の URL にアクセスし，必要なファイルをダウンロードする．

Intel CPU と M1 CPU で異なるので，ダウンロード時は注意すること．

https://hub.docker.com/editions/community/docker-ce-desktop-mac/

1. ダウンロードした Docker.dmg をダブルクリックしてインストーラを起動したら，アプリケーション・フォルダに Docker アイコンをドラッグする．

2. アプリケーション・フォルダ内にある Docker.app をダブルクリックし， Docker を起動する．

3. トップステータスバーにある Docker メニュー（クジラのマーク）で， Docker Desktop が実行中で，ターミナルからアクセスできる状態になる．

### Docker の動作確認

ターミナルを開いて下記のコマンドを実行し， docker のバージョンが表示されれば準備完了（バージョンなどの数値は資料より新しくても問題ない）。

```bash:
$ docker -v
Docker version 20.10.8, build 3967b7d
```

## Laravel プロジェクト作成

Mac の人は「ターミナル」，Windows の人は「Windows ターミナル」を起動する．

（Windows の人は Ubuntu で動かしている状態でコマンドを実行する必要があるので，適宜前項の「Docker の動作確認」を確認しておく．）

PC のデスクトップに `Projects` フォルダを作成してターミナルの作業ディレクトリを `Projects` フォルダに変更する． （パスのどこかにスペースが入っていると途中でコケるので適宜作成場所を変更すること）

コマンド実行してプロジェクトを作成する．

下記コマンドでプロジェクトのフォルダができる．`PROJECT_NAME` 部分がプロジェクト名となる．

作成された `PROJECT_NAME` フォルダに必要なファイルが全て含まれている．

```bash:
$ curl -s https://laravel.build/PROJECT_NAME | bash
```

```bash:実行結果


 _                               _
| |                             | |
| |     __ _ _ __ __ ___   _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|

Warning: TTY mode requires /dev/tty to be read/writable.
    Creating a "laravel/laravel" project at "./PROJECT_NAME"
    Installing laravel/laravel (v8.6.2)
      - Downloading laravel/laravel (v8.6.2)
      - Installing laravel/laravel (v8.6.2): Extracting archive
    Created project in /opt/PROJECT_NAME
    > @php -r "file_exists('.env') || copy('.env.example', '.env');"
    Loading composer repositories with package information
    Updating dependencies
...
```

途中，Laravel 側でいろいろ実行するため PC のログインパスワードを求められるので入力する．

（パスワードは Mac：PC のログインパスワード，Win：Ubuntu のログインパスワードを入力して Enter）

```bash:
Please provide your password so we can make some final adjustments to your application's permissions.


[sudo] password for taroosg:

Thank you! We hope you build something incredible. Dive in with: cd laratter && ./vendor/bin/sail up
```

### 権限の変更

この方法でプロジェクトを作成するとエディタで操作する場合に権限で引っかかる場合があるので権限を変更する．

```bash
$ sudo chmod -R 777 laratter
```

権限が変更できない場合は下記 URL の設定を行い再度コマンドを実行する．

https://gori.me/mac/mac-tips/112082

### 起動

仮想コンテナを立ち上げる．

```bash:
$ cd laratter
$ ./vendor/bin/sail up -d
```

```bash:実行結果
Creating network "laratter_sail" with driver "bridge"
Creating volume "laratter_sailmysql" with local driver
Creating volume "laratter_sailredis" with local driver
Creating volume "laratter_sailmeilisearch" with local driver
Creating laratter_mailhog_1 ... done
Creating laratter_redis_1 ... done
Creating laratter_mysql_1 ... done
Creating laratter_selenium_1 ... done
Creating laratter_meilisearch_1 ... done
Creating laratter_laravel.test_1 ... done
```

### 動作確認

ブラウザで `localhost` にアクセスし，下記画面が表示されれば OK．

![トップ画面](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/laravel-firstview.png)

この画面が表示されたら OK！次項の「終了するとき」を実行して事前準備は完了！

コマンド実行時にエラーが出る場合や，画面が表示されない場合は以下の「エラーが出る場合」を確認しよう．

### 終了するとき

仮想マシン（コンテナ）を終了させる場合は以下のコマンドを実行する．

コンテナが立ち上がっていると他のアプリケーションが立ち上がらなくなることがあるため，開発が終わったら下記コマンドで終了させること．

```bash
$ ./vendor/bin/sail down
```

### エラーが出る場合

#### PC 再起動

PC を再起動すると解決する場合が多い．

#### Docker Desktop のバージョンアップ

Docker Desktop を以前からインストールしていた場合，バージョンが古いと起動しない場合はあるので最新バージョンにアップデートを行う．

#### ファイヤーウォールを無効化する

途中でエラーが出る場合はファイヤーウォールで必要なファイルのダウンロードができていない場合がある．その場合は一旦ファイヤーウォールを無効化して，再度プロジェクト作成コマンドを実行する．

#### M1 の Mac で ERROR: no matching manifest for linux/arm64/v8 in the manifest list entries が出る

エディタなどで `docker-compoes.yml` を開き，下記を追加する，

```yml:docker-compoes.yml
platform: "linux/x86_64"
```

追記場所はこのへん．

```yml:docker-compoes.yml
mysql:
image: "mysql:8.0"
platform: "linux/x86_64"
```

参考：https://neoighodaro.com/posts/3-running-laravel-and-docker-on-the-apple-mac-m1

#### いけてそうだけどブラウザで表示できない

アクセスするときの URL を https://localhost から http://localhost に変更

## 続き
[次回](https://qiita.com/ku6kaw/items/255c39183df501a15fb5)は
- phpmyadmin の追加
- Breezeによるユーザ管理機能の実装

を行います。