AWS Setup 2017

works.td-inc.jp を半年くらい前に更新しました。その時の記録。

やりたかったこと 「HTTP2対応したい!」

Hetemlで借りていた td-inc.jp サーバーは仕事のテストアップなどで使っていたので、
会社サイトだけをサブドメインで切り出すことに。その時のメモです。
インターネットは素晴らしい場所でした。

 

▼ インスタンスの作成

t2.micro、t2.smallインスタンスについて  | ナレコムAWSレシピ
SSH を使用した Linux インスタンスへの接続 – Amazon Elastic Compute Cloud
サポートされているプラットフォーム – Amazon Elastic Compute Cloud

 

▼ nginxのインストール

sudo yum install nginx -y
sudo cp -r /usr/share/nginx/html /var/www/html
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bk
sudo vim /etc/nginx/nginx.conf

EC2にnginx+php(php-fpm socket)環境を最速で構築 – Qiita
CentOSにてnginxでPHPを動かす – Qiita

 

▼ PHPのインストール

AWS EC2 Amazon Linux 2016.09 + nginx + PHP7.0でサーバー構築 – Qiita

 

▼ PHPの設定

sudo cp /etc/php-fpm.d/www.conf /etc/php-fpm.d/www.conf.bk
sudo vim /etc/php-fpm.d/www.conf

※ /etc/php-fpm.d がない場合、/etc/php-fpm.d のシンボリックリンクを確認する

or

PHP5.6の場合
sudo cp /etc/php-fpm-5.6.d/www.conf /etc/php-fpm-5.6.d/www.conf.bk
sudo vim /etc/php-fpm-5.6.d/www.conf

PHP7の場合
sudo cp /etc/php-fpm-7.0.d/www.conf /etc/php-fpm-7.0.d/www.conf.bk
sudo vim /etc/php-fpm-7.0.d/www.conf

PHP FastCGI Example | NGINX
※ 調べなきゃ寝れない!と調べたら余計に寝れなくなったソケットの話 – Qiita

 

▼ サーバーの起動と自動起動設定

sudo service nginx start
sudo chkconfig nginx on
sudo chkconfig –list nginx

sudo service php-fpm start
sudo chkconfig php-fpm on
sudo chkconfig –list php-fpm

 

▼ /var/wwwのディレクトリ設定
▼ MySQLのインストール・設定
▼ WordPressのインストール・設定

Amazon EC2(Amazon Linux)でWordPressをインストールし、Nginxで表示させる手順2 – owani.net#markdown

 

▼ Elastic IPへのドメインの設定

sudo vim /etc/nginx/nginx.conf
あと色々書く

 

▼ 今まで使ってたCloudFlareからDNSレコード (ゾーンファイル?) のエクスポート

Advanced > Export DNS File

 

▼ Route 53に乗り換え

お名前.comでネームサーバーを変更

DNSとかネームサーバとかRoute53とかAレコードとかCNAMEとかがわからない人のためのまとめ – ふじいけ技術メモ

 

▼ Cloud Frontの設定

Amazon CloudFront編~動的コンテンツ配信~|php CFセットアップ ディストリビューション 方法  | ナレコムAWSレシピ

WordPressサイトをCloudFrontで配信する – Qiita

varnishとCloudfrontはどちらを採用すべきか? | AWS情報 | Webシステム開発・運用、サーバー・ネットワーク設計から保守まで 雲屋ネットワークにおまかせ

AWS再入門 Amazon CloudFront編 | Developers.IO

ウェブディストリビューションを作成または更新する場合に指定する値 – Amazon CloudFront

ドメイン名を使用したトラフィックの Amazon CloudFront ウェブディストリビューションへのルーティング – Amazon Route 53

 

▼ HTTP2化

AWS SSL Certificate setup for WordPress site hosted on Nginx + CloudFront – Clark CX

AWS EC2に設定してHTTP2の効果を実感した – Qiita

Amazon CloudFront + ACM 独自ドメインで HTTPS (SSL) 配信設定メモ | あぱーブログ

WordPressでAmazon CloudFrontを導入(CDN)する方法

[AWS Certificate Manager]東京でも無料でSSL証明書が使用可能になりました! | Developers.IO

[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた | Developers.IO

【新機能】 Amazon CloudFrontがHTTP/2に対応しました | Developers.IO

UVD | How to set up AWS Certificate Manager with NGINX

 

別のブログを立てるために、nginxで複数のバーチャルホストの設定

nginxでvirtualhostを設定する – Qiita

 

▼ FTPの設定

[AWS] EC2でFTPを使いたい – Qiita

道はなくても進むのだ。: Amazon EC2 (Amazon Linux) での vsftpd インストールと設定

 

▼ S3にメディアファイルを移動

AWS CloudFrontを使ってWordPressのメディアファイルだけS3に配置する | Developers.IO

 

▼ PHPのアップロード容量

# cp /etc/php.ini /etc/php.ini.org
# vim /etc/php.ini
upload_max_filesize = 20M

ニューヨーク 2年目

ビザを取ってニューヨークに引っ越すと決めて、最初に東京を離れたのが2014年1月末。

ESTAだから90日以内に帰らないといけない、フジロックと朝霧は欠かせない、
ビザは取れたのに東京で納品だ、と結局3ヶ月に一度は東京に戻っているけれど、
前回東京を出たのが今年の1月下旬、ちょうど1年の区切りでした。あっと言う間の1年。早かった。

4-5月のGW頃にまた一度東京に帰る予定です。

Sketch vs Photoshop

12/15時点で最新のver.3.2.1を使っています。
現時点で問題がありそうなのが、

・日本語の行間が正しく反映されない。

・Symbol (スマートオブジェクト的なもの) がネストできない

・レイヤーをレイヤーパレット内でドラッグして並び替えられない

・単位がpxのみで、dpi, pt という考えが無いので、フォントサイズなどが、CSS、Xcodeに記述したい値の2倍になってしまう。(RetinaオプションONで作業しているせい?)

・シンボルや定義したテキストフォーマットに対して、レイヤー効果的なものを重ねられない

・ショートカットキーを覚えるのが面倒 (末尾に自分で設定したものを載せてます)

 

唯一、Photoshopよりも優れているかもしれないのは、素材のエクスポート機能。
SVGの書き出しや、3x素材の書き出しは、Photoshop × Slicy でもまだ対応出来ていないので、Sketchの方が優れている。

Sketch Appが最高で、Photoshopはオワコンみたいな空気が気になっていたので、
1週間触って、1案件分のデザインデータを移植してみたけど、まだ全然実用レベルじゃなかった。
(※ PhotoshopはCC2014ではなく、CCを使っています)

Sketchを絶賛している人は、Photoshopの使い方が下手か、マシンスペックが足りてない。
または、来月日本に帰る時に、ぜひSketchマスターのレクチャーを受けたいです。(連絡先: @soohei, http://td-inc.jp/contact)

 

———

・Photoshopライクにするショートカットキー

拡大

Center Canvas
Cmd + 0

Actual Size
Cmd + 1

ガイドの表示非表示

Show Smart Guides
Cmd + ;

Hide Smart Guides
Cmd + ;

レイヤーの重ね順

Backward
Cmd + [

Move To Back
Shift + Cmd + [

Forward
Cmd + ]

Move To Front
Shift + Cmd + ]

フォントサイズ変更

Smaller
Shift +Cmd + ,

Bigger
Shift + Cmd + .

 

・Flashライクにするショートカットキー

同じ場所にペースト
Paste in Place
Shift + Cmd + V

オブジェクトを拡大・縮小
Scale…
Option + Cmd + S

 

・以下は、https://designcode.io/sketch を見ながら設定

Make Grid…
Shift + Cmd + M

Round to Nearest Pixel Edge
Shift + Cmd + R

Create Symbol
Shift + Cmd + J

Create Shared Style
Shift + Cmd + K

Paste and Match Style
Shift + Cmd + B

 

プラグインも、
http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
https://designcode.io/sketch
を参照して追加しました。

 

Yeoman + AngularJS + RequireJS (+ Ionic)

これまでに書いたリサーチ系ポスト

環境構築メモ (1) Gulp
環境構築メモ (2) Grunt
環境構築メモ (3) RequireJS
環境構築メモ (4) Bower
フレームワーク習得メモ (1) AngularJS
フレームワーク習得メモ (2完) Ionic
環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

 

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
wiredepを無効に
useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

 

RequireJSの処理としては、

・angularは、exportの記述が必要
domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) {  })」のように囲めば解決は出来る)

となりました。

 

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、


ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}


define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

 

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)

環境構築メモ (5完) Yeoman

Yeomanというのは、

・scaffoldingツールのyo
・buildツールのGrunt
・package managerのBower

を組み合わせて、プロジェクトのひな形を自動生成してくれるツール。

つまり、今までに習得した、GruntBower の思想や知識があれば、
yoが書き出すひな形を理解することが出来るし、
GruntとBowerの設定ファイルを読み書き出来れば、
RequireJS を導入したり、Ionic を導入することも出来る。

長いので、結論は一番下にあります。

 

まずは、yoが書き出す基本的なプロジェクト構造を理解するために、、

 

・YeomanでAngularJSのテンプレ作成

yo angular --minsafe MyApp

※ –minsafeはminify時のエラーを出なくするためのオプション

 

Gruntfile.js を見ているといくつか見たことのない記述と出会ったのでメモ。

<%= yeoman.app %>

<%= %> はGruntfile.js内で他のtaskで定義された値を変数として扱う時に使う

・test/spec/{,*/}*.js

通常は、test/spec/**/*.js と書いて無限に階層を掘るんだけれど、
1階層に限定したい時に使う

 

続いて初めて見るGruntのtaskを理解する。

・grunt-concurrent

https://github.com/sindresorhus/grunt-concurrent

タスクを並列処理する。

 

・grunt-wiredep

https://github.com/stephenplusplus/grunt-wiredep

bowerで管理しているJS, CSSファイルへの参照を、htmlファイル内の、

<!– bower:css –>
<!– endbower –>

<!– bower:js –>
<!– endbower –>

の間や、scssファイル内の

// bower:scss
// endbower

の間に挿入する。トリガーのタイミングは、 bower.json を watch している。

 

・grunt-usemin

https://github.com/yeoman/grunt-usemin

<!– build:css(.) styles/vendor.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:css(.tmp) styles/main.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:js(.) scripts/vendor.js –>
<script src=”~~~~.js”></script>
<script src=”~~~~.js”></script>
<!– endbuild –>

それぞれに挟まれた、CSSやJSファイルを1ファイルに結合して、
HTMLも書き換える。すごい。リリース用のビルド時に行う。

CSSが.tmp内に入っていたりするのは、Yeomanの設計思想だと思う。
また、.tmpに入ったものをそのままブラウザに読み込ませるために、
connect の livereload オプションで色々やっている。(次に説明)

 

 ・grunt-contrib-connect の  connect.static module

http://www.senchalabs.org/connect/static.html

connect.static(‘.tmp’) と書くと、
.tmp/styles の中身を /style にあるように振る舞わせたりできる。

 

・grunt-filerev

https://github.com/yeoman/grunt-filerev

ファイル名にリビジョン番号を追加

 

・grunt-cdnify

https://github.com/callumlocke/grunt-cdnify

ファイルの参照にCDNのURLを書き換えてくれる。
サンプルプロジェクトで必要とされているか不明。

 

・grunt-ng-annotate

https://github.com/mzgol/grunt-ng-annotate

AngularJS関連。まだありがたみがわからない。

 

 

このあと、

yo angular --minsafe --coffee MyApp

して、CoffeeScriptバージョンのプロジェクトと見比べてみると、
coffeeファイルもコンパイル後に、.tmp に書き出していて、
リリースビルド時に、concatしているみたい。

 

結論:

・grunt-wiredep で、Bower のコンポーネントを自動的にHTML内に引っ張ってきている。

・grunt-usemin によって、リリースビルド時に CSS, JS を concat して、
HTMLからの参照も書き直すということをやっている。

・connect.static module で、connect のサーバーの base の外のディレクトリも参照できる。
それによって、Compass、Coffeeともに、コンパイル後の css, js ファイルを、
不可視ディレクトリ (.tmp) に書き出したり、
bower_components を、appディレクトリの外に置いたりしても大丈夫。

・人間がエディタで編集すべきファイルのみを、appディレクトリに集めている。

・今後、Ionic や RequireJS と共存する場合は、適宜 task を切り捨てても良いと思う。

 

 

フレームワーク習得メモ (2完) Ionic

Ionic はHTMLベースで、スマホUIのベーシックなパターンを提供しているフレームワーク。

Cordova という、HTMLベースでのネイティブアプリ開発キットを経由して、
ネイティブの機能を叩いたり、アプリ形式でビルドして実機で実行したりすることも出来る。

チュートリアル通りにサンプルプロジェクトを作った場合、

ionic serve

と実行すれば、サーバーを立ち上げてブラウザで動作確認することができるので、
ブラウザ専用のコンテンツを作る時は、この利用法だけを考え、Cordovaのことは忘れて良い。
※ サンプルコードに含まれる <script src=”cordova.js”></script> という箇所も不要。

Ionic自体が、BowerAngularJSに依存した状態で初期化されるので、以降の勉強はYeomanの管轄内で行う。

フレームワーク習得メモ (1) AngularJS

環境構築メモ (4) Bower

Bowerは、パッケージマネージャーと呼ばれていて、
開発者がコマンドを叩くことで、configファイルに定義された、
必要なコンポーネント(外部ライブラリ) を全てオンラインから集めてきてくれる。
(node.jsのnpm installのように、bower installというコマンドを叩く)

例えば、modernizerを使いたかったら、bower install modernizer。

これを、今までの soohei/grunt-requirejs-seed に組み込んだものが、

soohei/grunt-bower-requirejs-seed

.bowerrc というファイルで、bowerのコンポーネントを配置する場所を定義できるので、
今回は、 “directory”: “www/assets/bower_components/”  を指定。

また、Grunt内の bower というタスクで、RequireJSのベースとなるファイルのパスを指定でき、
target: { rjsConfig: ‘www/assets/js/app.js’ }
というようにしておくと、タスク実行時に、各コンポーネントへのパスをapp.jsに書き込んでくれる。

その他のタスクの連携は今までと同じ。

これで開発時の、コンポーネント (外部ライブラリ) のダウンロードと、ソースコードのビルドの自動化、
Webサイトロード時の、コンポーネントの依存関係やロード順序の交通整理の自動化、
が実現できました。

こういった目的を持ったワークフローのタスク定義や、フレームワーク (AngularJS, Ionic…) の導入を行って、
さらにプロジェクトのひな型生成をやってくれるのが、Yeomanのようです。(Yo + Bower + Grunt)

ここまで手動で積み重ねたものが、Yeomanによってどんな風になるか、明日勉強します。
勉強結果を書く予定の場所はここ

環境構築メモ (3) RequireJS

RequireJSは、JSファイルの依存関係・実行順を、設定ファイル内に予め定義しておくことで、
html上のsourceタグでは先頭のJSファイル1つだけを読み込んで、
残りのJSファイルの非同期ロード・処理順をRequireJSに一任できるライブラリ。

これをワークフローに組み込んだものが、 soohei/grunt-requirejs-seed

今までからの変更点として、開発用のディレクトリをwwwとして、
デプロイ用のディレクトリはwww-buildを別に作るようにした。(www-buildはgitignoreしてある)
またjQueryはCDNからロードしたり、自分が書くコードはRequireJS関係も含め、
全てsource/coffee内でCoffeeScriptで書けるようにした。

この www-build の書き出しは、デプロイ時の処理の中に新たに導入した、RequireJS Optimizer が行う。
(toolsディレクトリの中、Gruntのタスク名は、 exec:build )

また、Optimizerの設定に、”removeCombined”: true を追記することで、
結合に使ったファイルをビルド先にコピーしないようにしたり、
(参考: Do not copy source file when optimizing using requirejs – Stack Overflow)
前回紹介した、Gruntでのugilify時のオプション preserveComments: ‘some’ も採用してます。

それとRequireJSの書き方の話で、requireとdefineの違いについては、
「javascript – RequireJs – Define vs Require – Stack Overflow」 に書かれているベストアンサーが的確。

そもそものRequireJSの理解は、bouzeの 「Require.jsを試してみた | blog.bouze.me」 に超救われた。

最後に、gruntのコマンドなどを整理すると、
人間が作業するのはwww/source以下。Gulpが頑張るのがwww/assets以下。
デプロイに使うのは、www-buildに残ったファイル一式
普段は、grunt
デプロイ前に、grunt -dist
www-buildをルートにしてサーバーを立てて、動作チェックをするとは、 grunt prod-serve

次回は、JSのライブラリの管理をする「パッケージマネージャー」、Bowerです。

環境構築メモ (2) Grunt

前エントリーのgulp編 でGulpに鞍替えしたけど、色々あってGruntに戻ります。

最初のGrunt〜Gulpのノウハウを込めて、Gruntの作業環境もアップデート。

こちらです。 soohei/grunt-seed

Gulpと同じことをしているけど、だいぶ設定ファイルが短くなった。

Gulpの時と同様、assets/libs/js の中身を機械的にconcatして、
source/js/libs.js としているので、ライブラリの依存関係や読み込み順によっては地雷になります。
そこでこの後導入されるのが、もっと歴史が古いけど、手付かずだった、RequireJSです。

それと、JS, CSSのライセンス表記を残すために、distタスク内で、
ugilify後にライセンスをconcat (concat:libs_js, concat:libs_css) しているけど、

uglifyのオプションで、 preserveComments: ‘some’ というのがあることを後日知りました。
CSSはだいたい同じ作者のJSとセットなので、JSにライセンス残せばOKな気が。

gulp編の繰り返しになるけど、
人間が作業するのはsource以下。Gulpが頑張るのがassets以下。
デプロイ時はsource不要で、assetsフォルダのみでOK。
普段は、grunt
デプロイ前に、grunt -dist

次回へ続く。