Month: September 2018

tinyMCEのリアルタイムプレビュー

show.blade.php

<textarea id="myTextArea" name="body" class="mceEditor">{{ old('body') }}</textarea>
	@if($errors->has('body'))
	<span class="error">{{ $errors->first('body') }}</span>
	@endif
	<p>
		<input type="submit" value="登録">
	</p>
	</form>
	<div style="border:1px solid; width:300px; height:100px;" id="preview_area"></div>
	<script src="/js/main.js"></script>
	<script src="/js/tinymce/tinymce.min.js"></script>
	<script>
  	tinymce.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    init_instance_callback: function (editor) {
      editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
  });
</script>

これはマジ凄い。

tinyMCEをlaravelに配置する

@extends('layouts.default')

@section('title', $article->login_id)

@section('content')
<h1>
	<a href="{{ action('ArticlesController@edit', $article->id)}}" class="register">編集</a>
	<a href="/">登録情報</a>
</h1>
	<h3>{{ $article->name}}</h3>
		<p>{{$article->login_id}}</p>
		<p>{{$article->name}}</p>
		<p>{{$article->role}}</p>
		<p>{{$article->password}}</p>

<h2>Documents</h2>
<ul>
		@forelse ($article->documents as $document)
		<li>{{ $document->body }} <a href="#" class="del" data-id="{{ $document->id }}">[x]</a>
		<form method="post" action="{{ action('DocumentsController@destroy', &#91;$article, $document&#93;) }}" id="form_{{ $document->id }}">
      {{ csrf_field() }}
      {{ method_field('delete') }}
    </form></li>
		@empty
		<li>No document yet</li>
		@endforelse
</ul>
<form method="post" action="{{ action('DocumentsController@store', $article) }}">
		{{ csrf_field()}}
	<p>
		<input type="text" name="mobile" placeholder="iphone/android" value="{{ old('mobile') }}">
		@if($errors->has('mobile'))
		<span class="error">{{ $errors->first('mobile') }}</span>
		@endif
	</p>
	<p>
		<input type="text" name="published_at" placeholder="配信日" value="{{ old('published_at') }}">
		@if($errors->has('published_at'))
		<span class="error">{{ $errors->first('published_at') }}</span>
		@endif
	</p>
	<!-- <p>
		<input type="text" name="body" placeholder="原稿" value="{{ old('body') }}">
		@if($errors->has('body'))
		<span class="error">{{ $errors->first('body') }}</span>
		@endif
	</p> -->
	<textarea id="myTextArea" name="body">{{ old('body') }}</textarea>
	@if($errors->has('body'))
	<span class="error">{{ $errors->first('body') }}</span>
	@endif
	<p>
		<input type="submit" value="登録">
	</p>
	</form>
	<script src="/js/main.js"></script>
	<script src="/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
		selector: "textarea",  
	});
	</script>
@endsection

tinyMCE

登録後

なるほど～

tinyMCEをpost

<?php
// function eh($s) { echo htmlspecialchars($s, ENT_QUOTES, "UTF-8"); }
$data = filter_input(INPUT_POST, "name");
?>
<!DOCTYPE html>
<html>
<head>
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
		selector: "textarea",  
	});
	</script>
</head>
<body>
	<h1>テキストを入力してください</h1>
	<form method="post">
		<textarea id="myTextArea" name="name"></textarea>
		<input type="submit" value="送信">
	</form>
	<h2>送信データ</h2>
	<?php if($data){ ?>
		<pre><?php echo $data; ?></pre>
	<?php } ?>
</body>
</html>

ok

これをlaravelに実装する

TinyMCEで入力した値を表示

<!DOCTYPE html>
<html>
<head>
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>tinymce.init({
		selector: 'textarea'
	});
	</script>
</head>
<body>
	<h1>テキストを入力してください</h1>
	<textarea>TinyMCE Editor</textarea>
</body>
</html>

普通に実装します。

gitでfailed to pushとなったとき

To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes before pushing again. See the ‘Note about
fast-forwards’ section of ‘git push –help’ for details.

対応方法 fetchしてmergeする
[vagrant@localhost laravel]$ git fetch
Password:
remote: Enumerating objects: 10, done.
remote: Counting objects: 100% (10/10), done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 8 (delta 2), reused 5 (delta 1), pack-reused 0
Unpacking objects: 100% (8/8), done.
From https://github.com/hoge/hogehoge
e66ad76..bd912e1 master -> origin/master
[vagrant@localhost laravel]$ git merge origin/master
Merge made by recursive.
README.md | 2 +-
appspec.yml | 5 ++++
readme.md | 67 +———————————————————
3 files changed, 8 insertions(+), 66 deletions(-)
create mode 100644 appspec.yml

これで、git pushできるようになる。
なるほど！！

laravel5-7にbootstrapを入れる

簡易的にcdnで実装したい。jqueryはbody内。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

resources/views/layouts のdefault.blade.phpを編集する。

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title>@yield('title')</title>
	<link rel="stylesheet" href="/css/styles.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
	@yield('content')
  </div>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

[vagrant@localhost laravel]$ php artisan serve –host 192.168.35.10

おいおい、おかしなことになってる。
まあbootstrapが動くことは分かったのでOK

mysqlのpasswordを忘れた時

passwordが違うと表示
ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password: YES)

さっぱり覚えていない
ec2の初期パスワードか?
[ec2-user@ ~]$ cat /var/log/mysqld.log

[ec2-user@ ~]$ mysql -u root -p
Enter password:
ERROR 1045 (28000): Access denied for user ‘root’@’localhost’ (using password: YES)
違うらしい。。

mysqlを止めて、/etc/my.cnfを編集
[ec2-user@ ~]$ sudo service mysqld stop
Stopping mysqld: [ OK ]
[ec2-user@]$ sudo vi /etc/my.cnf

skip-grant-tables　を追加

再起動して、-pなしでログイン
[ec2-user@~]$ sudo service mysqld start
Starting mysqld: [ OK ]
[ec2-user@ ~]$ mysql -u root

> UPDATE mysql.user SET authentication_string = PASSWORD(‘new password’) WHERE User = ‘root’ AND Host = ‘localhost’;
> FLUSH PRIVILEGES;

[ec2-user@]$ sudo vi /etc/my.cnf
# skip-grant-tables　//コメントアウト

$ sudo service mysqld restart
Stopping mysqld: [ OK ]
Starting mysqld: [ OK ]
[ec2-user@ ~]$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.22 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

OK！ふう、焦った～

aws codedeployのログを見る

$ rpm -qa |grep -i codedeploy-agent
codedeploy-agent-1.0-1.1518.noarch

/var/log/aws/codedeploy-agent/*

2018-09-24 10:54:17 INFO [codedeploy-agent(13919)]: Version file found in /opt/codedeploy-agent/.version with agent version OFFICIAL_1.0-1.1518_rpm.
2018-09-24 10:54:17 ERROR [codedeploy-agent(13919)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Missing credentials – please check if this instance was started with an IAM instance profile

これか？
Missing credentials

sudo service codedeploy-agent restart

githubからec2へデプロイ

デプロイとは、ソフトウェアの分野で、開発したソフトウェアを利用できるように実際の運用環境に展開すること。

IAMからロールへ行く
CodeDeployを選択する

ec2 インスタンス
# CodeDeployエージェント
wget https://aws-codedeploy-ap-northeast-1.s3.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto

# 実行
sudo service codedeploy-agent start

appspec.ymlを編集して、githubにpush

version: 0.0
os: linux
files:
  - source: /
    destination: /home/ec2-user/dev/

code deployからアプリケーションの作成
deployする

deploy長いな。。

AWSのSSL

ELBでhttpsの無料証明は既に確認した。
ELBで接続をhttpsに設定するだけ。

AWS Certificate Manager でプロビジョニングされたパブリック SSL/TLS 証明書は無料
https://aws.amazon.com/jp/certificate-manager/pricing/

無料とは別にプライベート証明書がある。

ACMはSSL/TLS証明書のプロビジョニング、管理、およびデプロイを行うサービス

ただし、AWSでは実在認証(EV)、組織認証(OV)の証明書は提供していない。

ACMはこれか！

証明書情報↓
証明書本文
証明書のプライベートキー
証明書チェーン

なるほど。クラスメソッド凄いな。

alpha ssl トリトン　6,000円～/年　
https://www.toritonssl.com/

KWC 15,700円/年
https://www.sslcoupon.jp/

なるほどね～

Next: githubからec2にデプロイ