Laravel 6x AWS Cloud9 環境構築

Laravelアプリ作成の流れ

今回はLaravel 6.x を使用

環境構築

AWS Cloud9を使用する。 無料枠であれば以下の様にすると良い。

Laravelインストール

インストール

# phpの設定を行う(yesかnoが表示されたら基本yes)
sudo amazon-linux-extras install php7.2=stable

sudo yum install php-cli php-common php-devel php-fpm php-gd php-mysqlnd php-mbstring php-pdo php-xml


# MariaDBの構築（MariaDBはMySQLの新しい版のようなもの）
sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2

# MariaDBのインストール
sudo yum install -y mariadb-server


#Apache, MariaDBの起動対応
sudo systemctl start mariadb

sudo mysql_secure_installation
// Enter current password for root (enter for none): 
// 上記は空欄でそのままEnterでOK
// Set root password? [Y/n] 
// 上記以降はyで回答すればOK（パスワードは任意：ここではrootにしている)

#MaridaDBの自動起動を有効化する
sudo systemctl enable mariadb

sudo systemctl is-enabled mariadb

# Composerをインストール

curl -sS https://getcomposer.org/installer | php

sudo mv composer.phar /usr/bin/composer

composer

// 上記は３つの記述をまとめて記述（貼り付けをして実行可能。成功するとComposerの文字がターミナル上に表示される）

# Laravelをインストール
composer create-project laravel/laravel cms 6.* --prefer-dist

# cd cms
// cmsディレクトリへ移動する。このディレクトリにartisanがある。
// その為、artisanコマンドはこの階層で実行する。

# Composerコマンド実行する
sudo composer update

# サーバー起動
php artisan serve --port=8080

サーバーが起動したら、cloud9の上記画像の画面右上の歯車の左下の斜め矢印を押し、別タブで画面を確認すると良い Previewの[Preview Running Application]を選択 /resouces/views/welcome.blade.php を編集するとこの表示ページが編集できる。 ブラウザ・更新出来るか確認してみると良い。　

今回はLaravelの横に「6」を追記してみた

 <div class="title m-b-md">
    Laravel 6
</div>

自動Save設定

cloud9の右上の歯車を押して上記画面の場所でAfter Delayを選択するとコードが自動で保存される様になる。

.envの設定

.envは隠しファイルの為、初期では表示されない。 上記から「Show hidden files」を選択し、選択する。

/cms/.envを編集する

ここにDB周りの設定を記入する 初期状態は以下

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel 
DB_USERNAME=root
DB_PASSWORD=

これを自身の環境に合わせて設定する。

# 例）
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=hogedb // 任意で設定
DB_USERNAME=root
DB_PASSWORD=root

DB作成

//mysqlログイン
mysql -u root -p　

// pass入力
root

// db名は任意
create database hoge_db;

※DBについて AmazonLinux2で環境を作った場合、MariaDBは自動で起動する為、毎回DBを起動する必要はない。 AmazonLinux AMI（旧AmazonLinux1）の場合は毎回CLOUD9起動時に必要。

// db選択
use hoge_db;

// テーブル確認
show tables;

// テーブル内容確認
desc tabale名;

テーブル作成

今回はbooksテーブルを作成する テーブルの作成はマイグレーションを使用

テーブル作成の方法は * 手順１ : php artisan make:migration create_〇〇s_tableを実行 この記述によって、テーブルを作るための記述を行うファイルが作成される。 ファイル生成場所：/cms/database/migrations/2022_05_28_032210_create_books_table.php マイグレーションファイルの作成

$ php artisan make:migration create_books_table
$ php artisan make:migration create_books_table --create=books

上記はどちらも同じ結果になる。 --create=booksは生成されたファイル内で作成するテーブル名を指定している 基本ファイル名と生成するテーブル名は同じにする方が管理しやすい為、ここの名前を分ける事はしなくて良いと思う。 NG_例) php artisan make:migration create_books1_table --create=books2 ※ファイル名は「2022_05_28_035104_create_books1_table」なのにmigrationして作成されるテーブル名は「books2」テーブルとなる。

「create○○○table」は生成されるマイグレーションファイル名の一部。 ○○○の部分には作成するテーブル名を指定する。

作成されるファイル

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()　//　migrateで実行される
    {
        Schema::create('books', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('item_name'); // 元々は無い記述（item_nameカラムをstring型で追加）
            $table->integer('item_number'); // 同上
            $table->integer('item_amount');// 同上
            $table->datetime('published');// 同上
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()　// rollbackで実行される
    {
        Schema::dropIfExists('books');
    }
}

• 手順2 : php artisan migrate この記述によって「手順1」で作成したファイルの情報を元にDBのテーブルが作成される。

マイグレーションを戻したい時

作成したテーブルを削除したい時はphp artisan migrate:rollbackを使用する。 参考記事

モデルの設定

モデルの定義はEloquent ORMを使用。

Lravelの命名ルールに則して、テーブル名に対応した名前をつける（今回はBook) ※1. モデル名は頭文字を大文字にする 　2. 末尾に「s」はつけない 　（命名ルールを使用しないでどのテーブルと紐付かせるか任意で設定も可能）

生成されるファイル php artisan make:model Bookを実行する。 ファイル生成場所：/cms/app/Book.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    //
}

その他のモデル設定方法

php artisan make:model Flight --migration 上記を実行すると * モデル用の/cms/app/Flight.php * テーブルマイグレーション用の/cms/database/migrations/2022_05_28_042514_create_flights_table.php が一度に生成出来る。

ルート定義

基本的なルーティングは/cms/routes/web.phpに記載する。

↓初期のweb.phpの表記は以下

Route::get('/', function () {
    return view('welcome');
});

↓CRUDを意識した記載例は以下

use App\Book; // app/Book.phpを参照
use Illuminate\Http\Request;  // HTTPリクエストを扱う為等のメソッドを参照


// 本の一覧表示（books.blade.php)
Route::get('/', function () {
    return view('welcome');
});



// 本を追加
Route::post('/books', function (Request $request) {
        
});

// 本を削除
Route::delete('/book/{book}', function (Book $book) {
    
});

use を使用し参照する2つのクラスについて

use llluminate\Http\Request;についてはこちらを参照する

ログイン認証機能

Laravelでは標準でログイン機能とユーザー登録機能がある。 参考ドキュメント

# laravel/uiパッケージをインストール
composer require laravel/ui:^1.0 --dev

# artisanコマンド実行
php artisan ui vue --auth


# npmパッケージインストール
npm install

# パッケージをビルド
npm run dev

ビュー

テンプレートの継承 ビューの作成

ファイルの場所

基本は/cms/resources/views/以下に設置する。 Laravelでは親（ベース）/子(パーツ）テンプレートという、テンプレートを効率よく管理・作成する方法が用意されている。 ※ベーステンプレートは最初からあるわけではない laravel/uiパッケージをインストールすると、その際、自動で作成される。

ベーステンプレートの場所

/cms/resources/views/layouts/app.blade.php

app.blade.phpがベーステンプレートになる この場合、パーツテンプレートが /cms/resources/views/welcome.blade.phpになる。

読み込みの考え方

コントローラーの「routes/web.php」で呼び出される際は、 1. 「/cms/resources/views/welcome.blade.php」が読み込まれ 1. 1の中の「/cms/resources/views/layouts/app.blade.php」が呼び出される

@yield('content') : ベーステンプレート

ベーステンプレートに記載の@yield('content')の部分にパーツテンプレートの@selection('content')と@endsectionの記述を読み込ませる事が出来る。 ※contentの部分は変更可能

@extends('layouts.app')

パーツテンプレートに記載の@extends('layouts.app')は「.」が「/」と解釈され、layouts/app.blade.phpを読み込むという意味となる。

@includeディレクティブ

@include(ディレクトリ名.ファイル名)で記述した箇所にファイルを読み込む

変数の使い方

• Bladeテンプレートでは {{$hoge}}のようにエスケープつけて変数を記述する。 XSS攻撃対策が上記ではなされる

• なされない記述もある {!!$hoge!!} 基本これは使わない。

• {{$hoge or "デフォルト"}}この記述では変数hogeが定義されていれば変数を、そうでなければ「デフォルト」という文字を表示する様になる記述

JavascriptとCSSのファイルの場所はpublicフォルダ

読み込みにはasset()関数を使用する。 asset()関数はpublic以下を参照する。

例）public以下にassetsフォルダを作成した場合

<script src="{{assets('/assets/js/jquery.min.js')}}"></script>

assets()関数の第2引数にtrueを渡すと「https://」が付く。

※設定しない場合はfalseとなり、「http://」となる

<script src="{{assets('/assets/js/jquery.min.js',true)}}"></script>

バリデーション

参考 基本はroute/web.phpに記入していく

* 本を追加 
*/
Route::post('/books', function (Request $request) {
    
    // バリデーション 
    $validator = Validator::make($request->all(),[
        'item_name'=>'required|max:255',
        ]);
        
    // バリデーションエラー
    if ($validator->fails()) {
        return redirect('/')
        ->withInput()
        ->withErrors($validator);
    };
});

withInput()

フォームの入力値をセッションへフラッシュデータとして保持する。

例）

<input name="name名" value="{{old('name属性値')}}" >

とする事で、バリデーションエラーとなり、リダイレクトされた先のページでもそのエラー時のデータを保持し、表示する事が可能になる。

withErrors()

バリデーションのエラー内容をフラッシュデータとしてセッションへ保存し、どのテンプレートからでも$errors変数としてアクセスできる様にする。

これにより、errors.blade.phpを用意し

<!-- resources/views/common/errors.blade.php -->
@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <div><strong>入力した文字の修正が必要です。</strong></div> 
        <div>
            <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
            </ul>
        </div>
    </div>
@endif

上記の様に設定する事で、エラー時の処理が作れる。

AWSのLarave環境構築（Laraveアップロードの土台作りまで）

Laravel開発環境構築

VPC設定

• vpc作成
• パブリックサブネットとプライベートサブネットを作成

EC2設定

• EC2インスタンス作成
• EC2へSSH接続
• sudo yum update -yでyumを最新状態にする
• sudo yum -y install httpdでアパッチをインストール
• sudo systemctl start httpd.serviceでアパッチ起動
• sudo systemctl status httpd.serviceで起動しているかの確認
• ps -axuでも確認可能。この時は/usr/sbin/httpdが表示されているかも確認。 上記で確認すると大量に結果が表示される。 こういった時は絞り込みをする。 ps - axu | grep <検索文字> 例）ps -axu | grep httpd
• sudo systemctl enable httpd.serviceこれで、サーバーを起動した時に自動的にアパッチも起動する様に設定（これをしないと、サーバーが停止すると再度起動しても、アパッチは停止したままで、都度起動が必要な状態のままになる。 自動起動設定が機能したか確認するためにはsudo systemctl is-enabled httpd.serviceを入力。これでenabledが表示されればOK

ファイアーウォール設定

上記でアパッチをインストールしてもこれだけではwebページへアクセス出来ない。それはアパッチをインストールしただけでは通信がファイアーウォールによって遮断される為。 その為、現状はEC2の「パブリック IPv4 アドレス」を開いても一向に開かれず、読み込み画面がぐるぐるするだけ。 これを解除するために、EC2インスタンスの該当「セキュリティグループ」を確認する。 インバウンドのルールにタイプSSH、ポート範囲22などと記載されている場合、ssh接続以外では接続できない。その為、httpアクセスが出来る様に設定を変える。 インバウンドのルールにHTTPを追加し、ソースの部分は「Anywhere-IPv4」にすると接続可能に。

手順

• EC2のセキュリティグループで作成したEC2インスタンスを選択し、インバウンドルールの編集を行う。 タイプ : HTTP, ソース : myAnywher-IPv4を選択する。 これで設定OK

Elastic IPアドレスを固定する。

これを設定しないとインスタンスを停止するたびにアドレスが変わっていない。 但し、ElasticIPアドレスを設定したインスタンスを停止すると課金される！ 使っている間はインスタンスは起動しておき、インスタンスを停止する場合、ElasticIPアドレスは開放し、さらに関連付けの解除をする必要あり！！

RDSの設定

• RDS設定の前に推奨されているプライベートサブネットを2つ作成する。 既にVPCの設定で1つプライベートサブネットの作成をしているので、追加で1つ作成する。
• DB用のEC2のセキュリティグループを1つ作る
• RDSでサブネットグループを作成する
• RDSでパラメーターグループを作成する
• RDSでオプショングループを設定する。
• RDSデータベースを作成する。
• EC2にssh接続する。
• sudo yum -y install mysqlでmysqlをインストールする
• RDSを作成したらEC2のElasticIPアドレスを使用してssh接続をターミナルから行う。 *RDSのデータベースから作成したDBのエンドポイントを確認する。 ターミナルに戻ってmysql -h ＜エンドポイント＞ -u root -pを実行し、RDSを作成した際のパスワードを入力するとmysqlにログイン出来る。

-h : エンドポイントを指定している -u : ログインするユーザーを指定している（rootはマスターユーザーの事RDS作成時に自分でここは設定している） -p : これをする事でこの後にパスワード入力が求められる。これをしないと画面上にパスワードが表示される形でログインする事になる

Laravel構築

上記までのAWS設定完了後、LaravelのソースをAWSへアップロードしていく。 公式ドキュメント 日本語ドキュメント

Javascriptでタグの属性（classやstyle）を指定して削除する方法

方法

参考にした記事 https://www.javadrive.jp/javascript/dom/index3.html https://www.javadrive.jp/javascript/dom/index18.html https://www.tam-tam.co.jp/tipsnote/javascript/post601.html

Jqueryの場合

 $(function() {
   $("span").removeAttr("style");
   $("span").removeAttr("width");
});

Vanilla JSの場合

<script>
/*ページ読み込み時にspanタグに埋め込まれたstyle="〇〇px"を削除するメソッド*/
window.onload = function(){
document.querySelector('.select2').removeAttribute('style');
}
</script>

ポイント

Vanilla JSでの実装時はJqueryと異なり、window.onlaoadを使用し、ファイル読み込み時にメソッドが動く様に記述を行った。

Topに戻るボタン実装

実装に至るまでに参考にしたサイト

• @mediaについて 参考記事print, screen

• スマホのhover有効について 参考記事

• hoverの画像切り替え 参考記事 注意点 overflow:hidden がついていると重ねた画像が乱れた。 overflow:hidden を外すと戻った。

• スムーズスクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo

html {
  scroll-behavior: smooth;
}

これだけでスムーズにスクロールする。

• フェードスクロールボタン 参考記事%3B-,%E3%83%95%E3%82%A7%E3%82%A4%E3%83%89%E3%81%97%E3%81%A6%E7%8F%BE%E3%82%8C%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3,-jQuery(function) これで簡単に実装！

ディレクトリの所有者の権限の変更方法

sudo chown <変更したい所有者名> <変更したいディレクトリ名＞ でOK

参考サイト

AWSのLarave環境構築（Laraveアップロードの土台作りまで）

Laravel開発環境構築

VPC設定

• vpc作成
• パブリックサブネットとプライベートサブネットを作成

EC2設定

• EC2インスタンス作成
• EC2へSSH接続
• sudo yum update -yでyumを最新状態にする
• sudo yum -y install httpdでアパッチをインストール
• sudo systemctl start httpd.serviceでアパッチ起動
• sudo systemctl status httpd.serviceで起動しているかの確認
• ps -axuでも確認可能。この時は/usr/sbin/httpdが表示されているかも確認。 上記で確認すると大量に結果が表示される。 こういった時は絞り込みをする。 ps - axu | grep <検索文字> 例）ps -axu | grep httpd
• sudo systemctl enable httpd.serviceこれで、サーバーを起動した時に自動的にアパッチも起動する様に設定（これをしないと、サーバーが停止すると再度起動しても、アパッチは停止したままで、都度起動が必要な状態のままになる。 自動起動設定が機能したか確認するためにはsudo systemctl is-enabled httpd.serviceを入力。これでenabledが表示されればOK

ファイアーウォール設定

上記でアパッチをインストールしてもこれだけではwebページへアクセス出来ない。それはアパッチをインストールしただけでは通信がファイアーウォールによって遮断される為。 その為、現状はEC2の「パブリック IPv4 アドレス」を開いても一向に開かれず、読み込み画面がぐるぐるするだけ。 これを解除するために、EC2インスタンスの該当「セキュリティグループ」を確認する。 インバウンドのルールにタイプSSH、ポート範囲22などと記載されている場合、ssh接続以外では接続できない。その為、httpアクセスが出来る様に設定を変える。 インバウンドのルールにHTTPを追加し、ソースの部分は「Anywhere-IPv4」にすると接続可能に。

手順

• EC2のセキュリティグループで作成したEC2インスタンスを選択し、インバウンドルールの編集を行う。 タイプ : HTTP, ソース : myAnywher-IPv4を選択する。 これで設定OK

Elastic IPアドレスを固定する。

これを設定しないとインスタンスを停止するたびにアドレスが変わっていない。 但し、ElasticIPアドレスを設定したインスタンスを停止すると課金される！ 使っている間はインスタンスは起動しておき、インスタンスを停止する場合、ElasticIPアドレスは開放し、さらに関連付けの解除をする必要あり！！

RDSの設定

• RDS設定の前に推奨されているプライベートサブネットを2つ作成する。 既にVPCの設定で1つプライベートサブネットの作成をしているので、追加で1つ作成する。
• DB用のEC2のセキュリティグループを1つ作る
• RDSでサブネットグループを作成する
• RDSでパラメーターグループを作成する
• RDSでオプショングループを設定する。
• RDSデータベースを作成する。
• EC2にssh接続する。
• sudo yum -y install mysqlでmysqlをインストールする
• RDSを作成したらEC2のElasticIPアドレスを使用してssh接続をターミナルから行う。 *RDSのデータベースから作成したDBのエンドポイントを確認する。 ターミナルに戻ってmysql -h ＜エンドポイント＞ -u root -pを実行し、RDSを作成した際のパスワードを入力するとmysqlにログイン出来る。

-h : エンドポイントを指定している -u : ログインするユーザーを指定している（rootはマスターユーザーの事RDS作成時に自分でここは設定している） -p : これをする事でこの後にパスワード入力が求められる。これをしないと画面上にパスワードが表示される形でログインする事になる

Laravel構築

上記までのAWS設定完了後、LaravelのソースをAWSへアップロードしていく。

SSH接続と公開鍵認証について

SSH接続

公開鍵認証とは

• ユーザー名とパスワードでの認証と比べセキュリティが高い
• 秘密鍵と公開鍵を用いた暗号方式

公開鍵はサーバーが保有する。そして、秘密鍵を保有しているユーザーだけがログイン出来る。

仕組み

大きく3つの概念がある

• 公開鍵 : 誰でも取得できるもの

• 暗号文 : 公開鍵認証の際に認証に使用する暗号化されたデータ

• 秘密鍵 : 公開鍵認証時に認証に使用する暗号文を複合化出来るもの

• 上記を使用し、認証（ログイン）したいユーザーは公開鍵にアクセスする。
• 暗号文が送られるのでそれを秘密鍵で複合化する これが公開鍵認証の流れである。

手順

• EC2作成時に.pemファイルを作成する。これが秘密鍵に該当する。
• この秘密鍵を使用して認証を行う。

// 秘密鍵の権限変更
chmod 600 ~/〇〇/himitsu_key.pem


// ssh接続
ssh -i /Users/yourname/〇〇/himitsu_key.pem ec2-user@EC2のパブリックIPv4アドレス