EC2のインスタンスにsshで接続できなくなった

先日、AWSのEC2でたてた、t2.microインスタンスでnginxとphp-fpm、MySQL、memcacheを動かすWEBサーバの設定をしてみました！

金曜日に設定し、土日は放置して月曜日に接続しようとしたところ、突然SSH接続ができなくなりました…。

環境構築がとても苦手なので、このまま接続できなかったらどうしようと不安が募ります。

不安になっていても、サーバは受け入れてくれないのでできることはしようと、表示された下記のエラーを調べてみることにしました。


$ ssh -i .ssh/ssh.pem ec2-user@***.***.***.***
shell request failed on channel 0


エラーの内容について、調べてみるとセッション数が多いのではないか？などの情報があったのですが、接続できるのは自分だけだったため、その可能性は低いなと感じました。

その後も調べていたのですが、あまり良い情報がなかったため（恐らく検索方法が悪かった）、ダメ元で再トライ！

 すると…

$ ssh -i .ssh/ssh.pem ec2-user@***.***.***.***
Last login: Mon Feb  9 11:12:21 2015 from ***.ap.plala.or.jp

       __|   __|_   )
       _|    (      / 　  Amazon Linux AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-ami/2014.09-release-notes/
/bin/bash: Cannot allocate memory
Connection to ***.***.***.*** closed.


今度は、一瞬接続できたのですが、すぐに切断されてしまいました。。

まったく原因がわかっていなかったので、とても焦っていたのですが、一瞬接続できたときになにやらエラーらしきものが表示されていました！


/bin/bash: Cannot allocate memory


エラーからもわかるように、メモリ不足で接続ができないということだったようです‼︎

原因がわかり、sshではどうしようもないと思ったので、AWSのコンソールからインスタンスを再起動したところ、無事に接続できるようになりました！

再起動後になにが重かったのか調べてみたところ、MySQLが重かったようです。。

ということで、今回はt2.microだとLEMP + memcacheはちょっとパンパンということがわかりました！

スマホサイトのファイルアップロードボタンをCSSでデザイン変更

仕事でスマホサイトのアップロードボタンを作成したときに、少し躓いたことがあったのでまとめてみようと思います。

そもそもデフォルトのデザインから変更できるのか？という疑問があったのですが、いろいろなサイトで変更されていることもあるので、とりあえず調べてみました。

ざっくり調べて、ざっくり理解したところによると… 

ボタンとinputタグを別に記述して、javascriptでイベントを実行する！

これで出来るだろうと思ったので、ボタン部分をpタグで作成してinputタグをcssのdisplay: noneで非表示に変えて、jQueryでイベントを発生させる方法で進めることにしました。

そして、最初にできたコードが下記になります。

■HTML
<input type="file" id="decorate">
<div class="upload">
    <p>UPLOAD</p>
</div>


■JS
$(document).ready(function(){
    $('.upload').on('click', function(){
        $('#decorate').trigger('click');
    });
});


■CSS
#decorate {
    display: none;
}

.upload {
    border: solid 1px #a3ffa3;
    background-color: #b7ffb7;
    width: 200px;
    text-align: center;
    border-radius: 10px;
}



inputタグには、idをつけておきCSSでdisplay: noneすることで、inputタグはあるけど表示していない状態にしています。

JSでは、classにuploadが指定されているdivタグがクリックされたときに、非表示にしてあるinputタグに対して、clickイベントを発生させるようにしてあります。

この部分が完成して、iPhoneで確認したところ無事に想定通りの動作をしてくれました！

iPhoneでの確認ができて、意外と簡単にできたなーと思いながら、Androidで確認してみると…

事件が発生しました。

何度、ボタンを押してもなにも起こらない。。

うんとも、すんともいわない。

ガーンッと意気消沈しながらも、なにが問題なのかを確認するためにdisplay: noneをコメントアウトして確認してみると、ファイルを選択できることが発覚！

ということは、display: noneだとAndroidはダメなのか。。詰んだな。

一瞬、うん、諦めようという思いが湧いたような湧かなかったような…と、どうでも良い間がありつつ再度、調べてみると初見のvisibilityというプロパティを発見！

ざっくり説明するとdisplay: noneは、要素自体がなくなってしまうのですが、visibility: hiddenの場合は要素を残したまま非表示にすることができるというものです。

ということで、早速、display: noneからvisibility: hiddenに変更

■CSS
#decorate {
    visibility: hidden;
}


頼む！と思いを込めて、ボタンをタップすると…

無事にファイルを選択できました！

ほっと安心するも、非表示にしただけなのでデフォルトのサイズ分要素が存在していて、その部分が空白になってしいました。。

新たな問題発生。ですが、これはサイズを0にすれば大丈夫だろうと思ったので、cssでheightとwidthを0pxに変更

■CSS
#decorate {
    visibility: hidden;
    height: 0px;
    width: 0px;
}


もう一度、確認してみるとAndroidは想定通りだったのですが、iPhoneは変わりませんでした。。

ChromeのWEBインスペクタで確認してみると、各プロパティは適用されていることになっているのですが、見栄えはNG。

0pxがダメなら、1pxはどうなんだろうと思い1pxにしてみると今度は想定通りに変更することができました。

visibilityで非表示にしているので、1px存在してもボタンと重なる位置であれば、大丈夫なので、1pxを設定することにしました。

ということで、完成した最終版は下記のような感じになります。(CodePenを使ってみたかったので使ってみました)

See the Pen pvPKEP by masahiro (@masahiiiro) on CodePen.

AndroidとiPhoneでちょいちょいズレが生じるので、両方で問題がないかを確認するのは大変だなと、改めて思いました。