2019-02-02

EC2のAmazon Linux 2にDockerを使わずSSL化したWordPressを構築する

表題の通りです。Dockerを使わないでオンプレでWordpressを立ち上げたい、そんな時のためのメモです。

1. インスタンスの作成・起動
2. LAMP(Linux/Apache/MariaDB/PHP)環境のインストール
- パッケージの更新
- Apache/MariaDB/PHPのインストール
3. Apacheの設定
4. MariaDBの設定
5. ユーザー、データベースの作成
6. WordPressのインストール
7. ドメインの設定
8. Let's EncryptでSSL化

1. インスタンスの作成・起動

"EC2" > "Launch Instance"

AMIの選択

Amazon Linux 2 AMI (HVM), SSD Volume Type

インスタンスタイプの選択

f:id:wowr_t:20181125040131p:plain
ここでは "t2.micro" を選択。

セキュリティグループの設定

f:id:wowr_t:20181125054243p:plain

Assign a security groupの "Create a new security group" を選択。
Apacheが接続するHTTP(ポート80)、SSLで使用するポート443(HTTPS)を入力し、 "Add Rule"。

インスタンスの作成

"Launch" をクリックすると秘密鍵の設定モーダルが表示される。
f:id:wowr_t:20181125054443p:plain

"Create a new key pair"
秘密鍵の名前を入力
秘密鍵をダウンロード（一度しかダウンロードできない！）
"Launch Instance"

秘密鍵の移動

$ mv ~/Download/'sample'.pem ~/.ssh

パーミッションの変更

$ chmod 600 ~/.ssh/'sample'.pem

SSHでインスタンスに接続

$ ssh -i ~/.ssh/'sample.pem' ec2-user@'IPv4アドレス'

接続完了。
f:id:wowr_t:20181125063113p:plain

2. LAMP(Linux/Apache/MariaDB/PHP)環境のインストール

パッケージの更新

[ec2-user ~]$ sudo yum update -y

Apache/MariaDB/PHPのインストール

Extrasリポジトリにある。

[ec2-user ~]$ sudo amazon-linux-extras install -y lamp-mariadb10.2-php7.2 php7.2

[ec2-user ~]$ sudo yum install -y httpd mariadb-server

3. Apacheの設定

Apache起動

[ec2-user ~]$ sudo systemctl start httpd

自動起動の設定

[ec2-user ~]$ sudo systemctl enable httpd

確認

ブラウザにパブリックIPアドレスを入力。下記のテストページが表示されたら成功。
f:id:wowr_t:20181125063501p:plain

4. MariaDBの設定

MariaDB起動

[ec2-user ~]$ sudo systemctl start mariadb

自動起動の設定

[ec2-user ~]$ sudo systemctl enable mariadb

初期化

[ec2-user ~]$ sudo mysql_secure_installation

パスワードの設定

Enter
Y: パスワードの設定(入力2回)
Y: 匿名ユーザーの削除
Y: リモートルートログインを許可しない
Y: テストデータベースの削除
Y: 権限テーブルのリロード&変更の保存

5. ユーザー、データベースの作成

[ec2-user ~]$ mysql -u root -p

ユーザー、パスワードの設定

MariaDB [(none)]> create user 'username'@localhost identified by 'password';

データベースの作成

MariaDB [(none)]> create database `db-name`;

ユーザーにGRANT権限を付与

MariaDB [(none)]> grant all privileges on `db-name`.* TO 'username'@localhost;

変更を有効化

MariaDB [(none)]> flush privileges;

MariaDB [(none)]> exit;

6. WordPressのインストール

パッケージのダウンロード、解凍

[ec2-user ~]$ wget https://wordpress.org/latest.tar.gz

[ec2-user ~]$ tar -xzf latest.tar.gz

ルートディレクトリを変更

[ec2-user ~]$ cp -r wordpress/* /var/www/html/

Apacheに /var/www へのアクセス権限を付与

[ec2-user ~]$ sudo usermod -a -G apache ec2-user
[ec2-user ~]$ sudo chown -R ec2-user:apache /var/www

.htaccessの編集

[ec2-user ~]$ sudo vi /etc/httpd/conf/httpd.conf

のAllowOverride NoneをAllowOverride Allに変更

変更を有効化

[ec2-user ~]$ sudo service httpd restart

[ec2-user ~]$ sudo systemctl restart httpd

7. ドメインの設定

ホストゾーンの作成

"Route 53" > "Hosted Zones" > "Create a hosted zone"

レコードの追加

追加したいホストゾーンを選択
"Go to Record Sets"
"Create Record Sets"

ルートドメインの設定

Name: (空)
Type: A
Alias: No
TTL: 60~90
Value : 固定グローバルIP
Routing Policy: Simple

サブドメインの設定

Name: www
Type: A
Alias: Yes
TTL: 60~90
Value : ルートドメイン
Routing Policy: Simple

ネームサーバーの設定

お名前.comとかのドメインを管理しているサイトへ
NSレコードで作成された4つのネームサーバーを入力

8. Let's EncryptでSSL化

epalのインストール、有効化

[ec2-user ~]$ sudo wget -r --no-parent -A 'epel-release-*.rpm' http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/

[ec2-user ~]$ sudo rpm -Uvh dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-*.rpm

[ec2-user ~]$ sudo yum-config-manager --enable epel*

Virtual Hostの設定

[ec2-user ~]$ sudo vi /etc/httpd/conf/httpd.conf

listen 80の後ろに下記の行を追加。

<VirtualHost *:80>
    DocumentRoot "/var/www/html"
    ServerName "example.com"
    ServerAlias "www.example.com"
</VirtualHost>

変更を有効化

[ec2-user ~]$ sudo systemctl restart httpd

Certbotのインストール、起動

[ec2-user ~]$ sudo yum install -y certbot python2-certbot-apache

[ec2-user ~]$ sudo certbot

Certbotの初回設定

いろいろ答える。

メールアドレスの入力
利用規約への同意
Let's Encryptのパートナーにメールアドレスを公開するか否か
httpsにリダイレクトするか否か

インストール完了

2018-12-03

UIの可読性検証をSketchプラグイン "Camilo" ＋ "Anima" で時短する

デザイン

f:id:wowr_t:20181203131208p:plain

こちらは「Design Tools Advent Calendar 2018」の3日目の記事です。

はじめまして。プロダクトデザイナーの田村(@wowr_t)です。

UIにおける可読性を高めるポイントはたくさんあると思います。使用するフォントやサイズ、行間、見出しと本文のバランス...etc。

これらは何が最適であるかはサービスによって異なるため、最終的な意思決定までにかかるタスク量と時間が読みづらい部分です。
しかしながら、時間もリソースも限られている状況下では最短で意思決定をしなければなりません。検証をより短く行うための工夫はとても大事です。

この記事では、私がUIの可読性検証を効率化できた手法をご紹介します。

今回のサンプルファイルはこちらになります。
(Animaの設定が引き継げないかも。。)
www.dropbox.com

背景

SketchでUIを組んでいて、
想定されるor実際のデータをSketch上に反映させている(プロトタイプを実体験に近づけるため)。
可読性の検証をするために、フォントサイズや行間、カラーなどを変えた複数のUIパターンを作成している。

課題

コンテンツ量が多いページ(例えばwebメディアの記事詳細ページなど)は、変更するオブジェクトが多く複数パターンのUIを揃えるのに時間がかかってしまう。

何に時間がかかるか？

1. オブジェクトの選択・変更
2. オブジェクト間のマージンの詰め直し

上記課題の解決

1. オブジェクトの選択・変更

→Sketchプラグイン「Camilo」
github.com

Libraryを元にカレントファイルのLayer StyleText StyleSymbolを一気にリプレイスしてくれるプラグイン。

2. オブジェクト間のマージンの詰め直し

→Sketchプラグイン「Anima」
www.animaapp.com
Animaは色々な機能があります。
レスポンシブの制約を細かく設定できる「Auto-Layout」、作成したカンプをノンコーディングでwebにパブリッシュできる「Launchpad」、インタラクション制作に役立つ「Timeline」。

ここで使用するのはAuto-Layoutのうちの「Padding」「Stack」の二つの機能です。