AWS EC2にLarabel + MySQL + Apache + Vue.jsの環境を一歩ずつ作ってみる
EC2でWebアプリの公開するための土台作りとして環境構築を行っていく
codeDeployでの自動化とかも調べてみたけどとりあえず一番シンプルな方法か始めることにしました
以下、EC2インスタンス内での操作
$ cat /etc/system-release Amazon Linux AMI release 2018.03
まずはApacheのインストールと起動
sudo yum install -y httpd24 sudo service httpd start
sudo chkconfig httpd on
ここで一旦Apacheが動いているか動作確認
http://EC2インスタンスのIPアドレス/ にアクセスして以下が表示されたらOK
次はドキュメントルートにファイルを配置して正常に表示されるかの確認
ドキュメントルートのデフォルトディレクトリに移動
cd /var/www/html/
index.htmlを以下の内容で作成
<p>Hello, World!!</p>
再度 http://EC2インスタンスのIPアドレス/ にアクセスしてHello,World!!が表示されたらOK
次はPHPのインストールを行っていく
sudo yum install -y php72
下記の内容でindex.phpをindex.htmlと同じディレクトリに配置
<?php phpinfo();
このままだと優先順位がindex.html > index.phpなのでindex.htmlが表示されてしまうので
Apacheの設定を変えていく
まずはバックアップを取る
sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.bak
sudo vim /etc/httpd/conf/httpd.conf
DirecotryIndexをindex.htmlから
<IfModule dir_module>
DirectoryIndex index.html
</IfModule>index.phpに変更
<IfModule dir_module>
DirectoryIndex index.html
</IfModule>httpd.confはApacheの起動時にしか読み込まれないのでApacheを再起動
sudo service httpd restart
http://EC2インスタンスのIPアドレス/ にアクセスして以下が表示されたらOK
次はMySQLのインストールと起動
sudo yum install mysql57-server -y sudo service mysqld start
MySQLに入って
mysql
MySQLのユーザー作成と権限追加
create user ユーザー名 identified by 'パスワード'; grant all privileges on *.* to 'ユーザー名'@'%';
データベースとテーブルの作成
テーブルはテスト用のユーザーテーブルとする
create database データベース名; create table test_user (id int auto_increment, name varchar(20));
あとで使うためにレコードを追加しておく
insert into test_user (name) values ('任意のユーザー名');
insert into test_user (name) values ('任意のユーザー名');
insert into test_user (name) values ('任意のユーザー名');mysqlから出る
exit
sudo yum install php72-pdo php72-mysqlnd php72-mbstring -y
上記のインストールを有効にするためにApacheを再起動
sudo service httpd restart
以下の内容でindex.phpを更新
<?php
$dsn = 'mysql:host=localhost;dbname=データベース名;charset=utf8';
$user_name = ユーザーネーム;
$password = パスワード;
try {
$pdo = new PDO($dsn, $user_name, $password);
echo 'Success';
} catch (Exception $e) {
echo 'Error.';
exit($e->getMessage());
}SUCCESSと表示されればOK
次は実際にDBから値を取得する
index.phpを以下に更新
<?php
$dsn = 'mysql:host=localhost;dbname=backlog_app;charset=utf8';
$user_name = ユーザー名;
$password = パスワード;
try {
$pdo = new PDO($dsn, $user_name, $password);
$test_users = $pdo->query("select * from test_user");
foreach($test_users as $user) {
echo "$user[name]<br>";
}
} catch (Exception $e) {
echo 'Error.';
exit($e->getMessage());
}
http://EC2インスタンスのIPアドレス/ にアクセスして先程DBに登録して任意のユーザー名
が表示されればOK
これでMySQLのセットアップは終了
これからLaravelのセットアップを行う
まずはLaravelのパッケージマネージャーであるcomposerをインストールする
ホームに戻って
cd /home/ec2-user
公式の手順https://getcomposer.org/download/にしたがって行う
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"その後ファイル名の変更とデフォルトでPATHの通ったディレクトリに移動する
mv composer.phar /usr/local/bin/composer
以下のコマンドで
composer -V
以下が表示されたらOK(2020/3/10時点でのバージョン)
Composer version 1.9.3 2020-02-04 12:58:49
Composerがinstallできたら/var/www/html配下でLaravleプロジェクトの作成
composer create-project --prefer-dist laravel/laravel .
その後以下のコマンドで依存ライブラリのインストールとアップデート
composer install composer update
そして/etc/httpd/conf/httpd.confのドキュメントルートを
/var/www/html/から/var/www/html/publicに修正
DocumentRoot "/var/www/html/public"
これでhttp://EC2インスタンスのIPアドレス/にアクセスしたらLaravelのテストーページが表示されるはず
これで最低限のLaravelの環境構築が完了
次はVue.jsのセットアップ
Lravelは公式でVue.jsをサポートしているので非常に簡単
laravel/uiパッケージをインストールして
Vue.js用にファイルを生成
composer require laravel/ui php artisan ui vue
そしてnode.js
レポジトリの取得してインストールして最新に更新
curl -sL https://rpm.nodesource.com/setup_13.x | sudo bash - sudo yum install -y nodejs sudo npm update -g npm
そして/var/www/html配下で
npm install && npm run dev
して依存パッケージをインストール、ビルドする
するとresources/js/components配下にExampleComponent.vueが生成させているのでこれを利用する
/var/www/html/resources/views配下にexample.blade.phpというファイル名で
以下のファイルを作る
<div id="app">
<example-component></example-component>
</div>
<script src="{{asset('js/app.js')}}"></script>/var/www/laravel/routes配下のweb.phpの
Route::get('/', function () {
return view('welcome');
});部分を
Route::get('/', function () {
return view('example');
});に変更する
これでhttp://EC2インスタンスのIPアドレス/にアクセスすると
こう表示されるはず
最後にLaravelでMySQLの設定をして簡単なリスト表示をする
まずはAPIの呼べているかの確認
routes/web.phpを以下に変更してテスト用のAPI作成
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('sample');
});
Route::get('/test', function() {
return 'This is test.';
});
次にExampleComponent.vueを以下に変更
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div>{{ testData }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
testData: '',
}
},
mounted() {
this.updateTableData()
},
methods: {
updateTableData() {
axios
.get('/test')
.then(response => this.testData = response.data)
},
}
}
</script>これで準備完了
http://EC2インスタンスのIPアドレス/にアクセスする
これが表示されるはず
次はweb.phpを以下に変更する
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('sample');
});
Route::get('/test', 'TestController@index');そして/var/www/html/app/Http/Controllers配下にTestController.phpを以下の内容で作成
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Test;
class TestController extends Controller
{
public function index()
{
return 'This is TestController.';
}
}http://EC2インスタンスのIPアドレス/にアクセスすると以下が表示される
次は/var/www/html/.env以下の部分を
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=
以下に変更(各項目はMySQLに設定済みの項目)
DB_CONNECTION=mysql DB_HOST=localhost DB_PORT=3306 DB_DATABASE=データベース名 DB_USERNAME=ユーザー名 DB_PASSWORD=パスワード
そしてTestController.phpを以下に変更
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
class TestController extends Controller
{
public function index()
{
$testUsers = DB::select('select * from test_user;');
return $testUsers;
}
}ExampleComponent.vueを以下に変更
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div v-for='user in testUsers'
:key='user.id'
>
{{ user.id }}: {{ user.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
testUsers: '',
}
},
mounted() {
this.updateTableData()
},
methods: {
updateTableData() {
axios
.get('/test')
.then(response => this.testUsers = response.data)
},
}
}
</script>
http://EC2インスタンスのIPアドレス/にアクセスすると
このような表示になるはず
これで環境構築終了
まとめ
これでタイトルの「AWS EC2にLarabel + MySQL + Apache + Vue.jsの環境を一歩ずつ作ってみる」を終えることができた
今回実際に環境を作ってみたけどまだまだ知識が足りていないと改めて実感した。
以前大ハマリしたおかげかVue.jsの導入はスムーズだったがLaravelとApacheは今回の記事に載せてないエラーに
たくさん遭遇した。そのたびにエラーメッセージを検索をかけては解決策を調べて世界のどこかにいる人たちに力を借りて
解決した。
まだまだエントリの書き方もまとまってないしブログを書く習慣もないけど一つずつエントリを増やしてこのブログと一緒に成長していけたらいいなと思う。
