Hyperappについて調べてみた。

毎週何かのライブラリをコードリーディングするという目標を立てました◎

はじめてのコードリーディング、何にしようかと迷ったのですが🤔

Hyperappを読んでみることにしました。

Hyperappなら1KBだし、行数も400行くらい。

（コードリーディング初心者の私でも読めるかも...🤔！）

今回の記事はコードリーディング前に事前にHyperappについて調べたのでそのmemoです。

Hyperappとは？

Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある

• QiitaがReactからHyperappに移行
• SHOWROOMの新規開発に採用されている

ReactやVueなどで使われているVirtual DOM,Lifecycle Eventsの概念とRedux や Vuexなどで使われているState Management（状態管理）の概念を、「最小限」で、「実用的」に、一つにまとめた（「独立している」）ライブラリ。

github.com

concept

• Minimal（最小限）
• Pragmatic（実践的）
• Standalone（独立）

Hyperappの関数

h関数, app関数の2つだけです。

• h関数:仮想DOMを生成する関数
• app関数: Hyperappを利用したApplicationを実行する関数

h

h(name, props, children) - name {String}…「div」など、HTML上でのタグ名 - props {Object} … Elementに挿入されるattributes - children {String | Array} … 子要素

h("a", { href: "#" }, "next page")

// return object
// {
//   name: 'a',
//   props: {
//     href: '#'
//   },
//   children: 'next page'
// }

app

HyperappによるWebアプリケーションを起動する

app(state, actions, view, container)

コードリーディングはまだ途中なので、改めて記事にする予定。

Chrome DeveloperToolのconsoleの使い方

Developer Toolのconsoleを上手く使いこなせていなかったのでmemoです。

console.log()しか使ったことない人とかいませんか？

consoleパネルで使える Command Line API を覚えるとデバックが捗るので よく使うものをまとめてみました。

コマンドライン API とは？

Developer ToolのConsole 内で使える便利関数のことです。

$_

$_には最後に評価した式の結果が保存されています。

$0 〜 $4

$0から$4にはElementsパネルで選択した要素が5つ保存される

$() と $$()

$(selector)は、指定された CSS セレクターを含む最初の DOM 要素への参照を返します。この関数は、document.querySelector() 関数のエイリアスです。

$$(selector) は、指定された CSS セレクターに一致す

dir(object)

dir(object) は、指定されたオブジェクトのすべてのプロパティをオブジェクト スタイルのリストで表示します。このメソッドは、コンソール API の console.dir() メソッドのエイリアスです。

inspect()

inspect(object/function) は、指定された要素またはオブジェクトを適切なパネルで開いて選択します。

getEventListeners()

getEventListeners(object) は、指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、各登録済みタイプ（"click"、"keydown" など）の配列が含まれているオブジェクトです。各配列のメンバーは、各タイプに登録されているリスナーを記述するオブジェクトです。

monitorEvents() & unmonitorEvents()

monitorEvents()は要素とイベントを指定することで、その要素に対するイベントの発生をモニタリングすることができます。

ChromeのDeveloper Toolを使ったデバック方法についてもう少しいろいろ書きたいな...

参考

developers.google.com

Dockerで作ったWebサーバでページを表示してみる。

Dockerの勉強を始めました。

サーバー構築してApacheとかnginxのデフォルトページを表示するっていう記事が多くて、実際に作ったページをDockerで表示するにはどうするんだろう？と思って調べたことをまとめました。

こんな感じのページをDockerで作ったWebサーバで表示させます。

Dockerのインストール方法などは省略しています。。。

Dockerって？

まずはDockerとは？っていうところを簡単にまとめます。

Dockerとは？

アプリ開発・移動・実行プラットフォーム

開発者が簡単にアプリケーションを動かす環境を作成します。

Dockerを使えば、OSとアプリがインストールされた環境を閉じ込めて保存しておき、いつでもその環境を立ちあげることができます。

例えば、 ApacheやnginxをインストールしたCentOSのような環境を簡単に作成して保存・立ち上げが可能です。

メリット・デメリット

メリット

• OS依存がなく、導入が容易
• 案件ごとに異なる環境を構築できるため、特定のPC依存を回避
• ミドルウェア導入や新インフラ環境のテストが各自のPCで可能

デメリット

• 学習コスト
  
  

DockerfileからDocker imageを作成

実際にやってみようと思います。

1. Dockerfileの作成

まずDockerfileを作成します。

Dockerfileとは？

ベースとするDockerイメージに対して実行する内容を記述するファイルです。

Dockerイメージ
OSとアプリがインストールされた環境を閉じ込めたファイル

Dockerfileを作成します。

$ vi Dockerfile

以下の記述を記入します。

# setting base image
FROM centos:centos7

# Author
MAINTAINER cidermitaina

# install Apache http server
RUN ["yum",  "-y", "install", "httpd"]

# start httpd
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

• FROM: ベースとするDockerイメージを指定
• MAINTAINER: 作成者情報を設定
• RUN: 対象のイメージにインストールされているコマンドを実行
• CMD: コンテナ起動時に実行するコマンド

2. Dockerfileのビルド

docker buildコマンドでDockerfileをビルドして、dockerイメージを作成します。

$ docker build -t sample:ver01 .

Sending build context to Docker daemon  2.048kB
Step 1/4 : FROM centos:centos7
 ---> 5182e96772bf
Step 2/4 : MAINTAINER cidermitaina
 ---> Using cache
 ---> d5a98e9e0925
Step 3/4 : RUN ["yum",  "-y", "install", "httpd"]
 ---> Using cache
 ---> 47f3833db651
Step 4/4 : CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]
 ---> Using cache
 ---> 898e9185951b
Successfully built 898e9185951b
Successfully tagged sample:ver01
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

• -tオプションで「イメージ名:タグ名」を指定
• 最後にDockerfileの場所を指定(カレントディレクトリなので . )

docker image ls

でdockerイメージが作成されているか確認できます。

docker runコマンドでビルドしたイメージを起動してみます。

$ docker run -d -p 80:80 sample:ver01
a5f0a38da63d783572df5557f51351694f8ee957598a05ea68d7c1de9962fb56

http://192.168.99.100/にアクセスするとApacheのデフォルト画面が表示されるはずです。

実際にページを作成してみる

1. ベースイメージの作成

webシステムを構築するときOSのインストール/環境設定などベースイメージとして作成します。

Dockerfile.baseていう名前でベースイメージを作成します。

# setting base image
FROM centos:centos7

# Author
MAINTAINER cidermitaina

# install Apache http server
RUN ["yum",  "-y", "install", "httpd"]

# deploy
ONBUILD ADD web.tar /var/www/html/

# start httpd
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

• ONBUILD: 次のビルドで実行するコマンドをイメージ内に設定する命令
• ADD: web.tarファイルを/var/www/html/配下に配置

ONBUILD命令でイメージの中に開発したプログラムをデプロイする命令を指定しています。

2.web.tarファイルの作成

htmlとcssをtarでアーカイブしたものです。

こんな感じで作成していきます。

web.tar
  ├─index.html
  └─public/
        └─css/
             └─index.css 

適当に作成したサンプルです。。。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./public/css/index.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="header__icon-area">
            <span class="icon"></span><h1 class="name">your name</h1>
        </div>
    </header>
    <main class="main">
        <p class="main__txt">
            Hey I'm <span class="shadow shadow--pk">your name</span>
        </p>
        <p class="main__txt">
            I am <span class="shadow shadow--bl">xxxxx years old</span> born in <span class="shadow shadow--ye">xxxxx</span>.<br> 
            I'm a <span class="shadow shadow--gr">frontend engineer</span>.<br> 
            Because I work hard, I want you to support me...
        </p>
        <p class="main__txt">
            Find me on <a href="" target="_blank" class="shadow shadow--bl">Twitter</a> and <a href="" target="_blank" class="shadow shadow--pu">GitHub</a>.
        </p>
    </main>
</body>
</html>

index.css

body {
    color: #4a4a4a;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.header{
    width: 80%;
    margin: 2.5rem auto;
}
@media screen and (max-width: 640px) {
    .header {
        width: 90%;
    } 
}
.header__icon-area{
    display: flex;
    align-items: center;
}
.icon{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: paleturquoise;
    border-radius: 5px;
}
.name{
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 1rem
}

.main{
    font-size: 1.5rem;
    text-align: center;
    margin-top: 6rem;
}
@media screen and (max-width: 640px) {
    .main {
        font-size: 1.3rem;
    } 
}
.main__txt a{
    color: #4a4a4a;
    text-decoration: none;
}

.shadow--pk{
    -webkit-box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
    box-shadow: inset 0 -6px 0 rgba(255,74,110,.2);
}
.shadow--bl{
    -webkit-box-shadow: inset 0 -6px 0 rgba(36,177,209,.2);
    box-shadow: inset 0 -6px 0 rgba(36,177,209,.2);
}
.shadow--gr{
    -webkit-box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
    box-shadow: inset 0 -6px 0 rgba(35,209,153,.2);
}
.shadow--ye{
    -webkit-box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
    box-shadow: inset 0 -6px 0 rgba(255,221,87,.2);
}
.shadow--pu{
    -webkit-box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
    box-shadow: inset 0 -6px 0 rgba(184,107,255,.2);
}

3.Dockerfile.baseのビルド

web.tarをDockerfile.baseと同じ階層に置きます。

docker
  ├─web.tar
  └─Dockerfile.base

Dockerfile.baseをビルドします。

docker build -t httpd_base -f Dockerfile.base .

※Dockerfileというファイル名の場合は明示する必要はありませんが、 この場合はDockerfile.baseという名前なので明示的に指定する必要があります。

docker imagesコマンドで確認してみます。

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE   
httpd_base                 latest              63d226978f2e        10 seconds ago        326MB

4.Dockerfileの作成とビルド

次は作成したhttpd_baseをベースイメージとしたDockerfileをweb.tarをDockerfile.baseと同じ階層に作成します。

vi Dockerfile

docker
  ├─web.tar
  ├─Dockerfile
  └─Dockerfile.base

Dockerfile

# base image
FROM httpd_base

FROMでhttpd_baseを指定するだけに記述です。

作成したDockerfileをhttpd_webというイメージ名でビルドします。

docker build -t httpd_web .

docker imagesで確認してみると、httpd_webというイメージが作成されているはずです。

$ docker images
REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE   
httpd_web                  latest              e0f30741ca8e        5 minutes ago        326MB
httpd_base                 latest              63d226978f2e        10 seconds ago        326MB

5.httpd_webの起動

docker runコマンドでhttpd_webを起動してみます。

$ docker run -d -p 81:80 httpd_web
82925172b0479a00fc76f8ebe5232fe0bba1c35766abc05acd560f0297276622

※80番のポートはデフォルトのapacheページで使っているので81番にしています。

http://192.168.99.100:81/ にアクセスすると

が表示されると完成です◎

参考にした本と記事です。

プログラマのためのDocker教科書 インフラの基礎知識＆コードによる環境構築の自動化

docs.docker.com

続きの記事としてAWS ECSでさっきのページを公開してみる記事も書きたいなあ、って思ってます。。。

AMP JSで画像遅延してみました。

このあいだお仕事で表示速度をあげたいって話がでてきたのでいろいろ調べていたのですが、 その際、AMP化の話がでたので気になって調べてみました。 さくっと試してみたかったのでAMP JSで画像遅延をやってみたのでそのメモです。

htmlをAMP化する方法ではなくて、AMPって？、AMP JSを使ってみる、辺りについて書いています。

AMP（Accelerated Mobile Pages）とは？

• Googleが中心となって立ち上げた、モバイルデバイスでのWebブラウジングを高速化することを目的としたオープンソースプロジェクト
• AMPで策定された仕様に沿ってモバイルページを構築すれば、通常の約4倍の速さでページが表示され、データ量が約1/10になると言われている
• 3,100 万のドメインが AMP ドキュメントを発行
• 検索結果の上位表示がされる可能性が高くなる

AMPは使用できるHTMLを制限するとともに、JavaScriptによる動的な表示を制限することで表示を高速化する技術で、次の3つの要素から構成される。

• 表示の高速化のためにHTMLに制約を加えた「AMP HTML」
• 高速にコンテンツのロードを行うためのJavaScriptコード「AMP JS」
• コンテンツのキャッシュ配信を行う「Google AMP Cache」

AMP HTML

安定したパフォーマンスを実現するための制限が設定された HTML

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
　　<h1>Welcome to the mobile web</h1>
　　<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
  </body>
</html>

AMP HTML ページ内の大半のタグは通常の HTML タグですが、一部の HTML タグは AMP 固有のタグに置き換えられる。

ex) amp-img、amp-video

AMP ページは、検索エンジンや他のプラットフォームで <link rel=""> HTML タグにより検出される。サイトのページについて非 AMP バージョンと AMP バージョンの両方を作成するか、AMP バージョンのみを作成するかを選ぶことができる。

AMP JS

AMP JS ライブラリは、AMP HTML ページの高速なレンダリングを確実に行えるようにするもの

head タグの最後に記述

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP JS ライブラリでは、AMP の最適なパフォーマンスを実現するための方策をすべて実施し、リソースの読み込みを管理して、上記のカスタムタグを提供することにより、サイトのページの高速レンダリングを確実に行えるようにしている。

AMP Cache

Google AMP Cache は、キャッシュされた AMP HTML ページの配信に利用できる。

AMP HTML ページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に改善する。

Google AMP Cache を使用すると、効率を最大限に高められるように、ドキュメント、すべての JS ファイル、あらゆる画像が、HTTP 2.0 を使用する同一の生成元から読み込まれる。

AMPの仕組み

• Googleにインデックスされると、GoogleはそのAMPページをキャッシュする
• Googleの検索結果などからAMPページにアクセスすると、すでにGoogleによってキャッシュされたWebページのデータが返される仕組みになっているので、通常のWebページよりも高速に表示できる
  
  

AMP JSを使ってみる

通常のHTMLファイルをAMPページにするには時間がかかっちゃうのでAMP JSだけ使ってを 表示速度を高速化を試してみました。

（AMPでは表示速度を高速化するためにAMP JSというJavaScriptのライブラリーを読み込み、表示速度の改善を行っている。）

AMP JSは非AMPページでも利用できます。

1. AMP JSをhead内に非同期で読み込む

以下の記述を</head>の直前に記述します。

<script async src="https://cdn.ampproject.org/v0.js"></script>

2. img要素をamp-img要素に置き換える

img

<img src="img.jpg" alt="" />

amp-img

<amp-img src="img.jpg" width="400" height="300" layout="responsive" alt="" />

width属性とheight属性は必須で指定する必要があります。 layout属性で要素を画面上でどのように表示するか指定します。

www.ampproject.org

これだけで遅延ロードができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>amp-img</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<main>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
    <div><amp-img src="images/photo01.jpg" width="600" height="300" layout="responsive" alt=""></amp-img></div>
</main>
</body>
</html>

今までjquery.lazyload.jsなどで遅延ロードを実装していましたが、AMP JSで遅延ロードを実装してみるのもいいかもです。

（デメリットなどはまだ調べられていないですが、、、）

AMPを調べていてPWAと比較している記事を目にしました。

なんとなく、AMPはニュースサイトのような記事コンテンツが多いページに向いてるのかなあって感じています。

PWAはまだよく分かっていないので時間があるとき調べたい...です。

参考

www.ampproject.org

Laravelのインストール

お仕事でLaravelを使った案件がはじまりそうなのでLaravelとPHPを少し勉強してるのですが、 マイグレーション時に Syntax errorになってあわあわしちゃったのでメモです。

1. composerのinstall

まずはcomposerのinstallです。

https://getcomposer.org/download/

以下のページからダウンロードします。

composer --version

で「composer」コマンドが使えるか試してみます。

もしコマンドがないって言われたら、再起動したり、環境変数を確認してみてください。

2. laravelのインストール

composer create-project laravel/laravel --prefer-dist project-name 5.5

project-name部分は任意です。

インストールできたら、php artisan serveでサーバーを起動します。

ブラウザでhttp://127.0.0.1:8000にアクセスすると以下の画面が表示されるとインストール成功です。

artisanとは？
ArtisanとはLaravelを構成しているコマンドラインインターフェイスの名前。 artisanは便利な多くのコマンドを提供していて、php artisan listで一覧を表示してくれます。

2.データベースの作成と設定

phpmyadminでMySQLに任意の名前のデータベースの作成をします。

/.envファイルの編集

DB_DATABASEはさっき作成した任意のデータベース名、DB_USERNAME、DB_PASSWORDはMySQLのユーザ名・パスワードにします。

※XAMPPだとDB_USERNAMEはroot、DB_PASSWORDは空で大丈夫なはずです。

11行目付近
----
DB_DATABASE=DATABASE-NAME
DB_USERNAME=root
DB_PASSWORD=
----

php artisan migrate

コマンドでマイグレーションを実行します。

すると

In Connection.php line 664:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 byt
  es (SQL: alter table `users` add unique `users_email_unique`(`email`))


In Connection.php line 458:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 byt
  es

というエラーがでてしまいます。。。

原因は

• Laravel5.4から標準charasetがutf8mb4に変わった
• MySQLではユニーク制約を付けたカラムには767bytesまでしか入らない

からみたいです。

なのでカラムの最大値を変更し、767bytes以上の文字列が入らないようにします。

app\Providers\AppServiceProvider.php

use Illuminate\Support\Facades\Schema;

public function boot()
    {
        Schema::defaultStringLength(191);
    }

この記述を追加します。

記述を追加したら、以下のコマンドで一旦全てのテーブルを削除してマイグレーションし直します。
php artisan migrate:rollback

php artisan migrate:fresh

これでエラーにならなければ大丈夫です。

サーバーに SSLの設定をしてみる。

サーバーにSSLの設定をしたのでメモです。

脆弱性のこととかセキュリティー関連のことはまだちゃんとまとめられてないので また書きたいなあ、なんて思ってます。。。

SSLって？

SSL(Secure Socket Layer)とは、インターネット上で情報を暗号化し、送受信できるプロトコル（一般にhttps://と表記されるもの）。 顧客情報やクレジットカード情報、その他、管理情報などを扱う際はこのSSLを利用してセキュアに通信する必要があります。

1. mod_sslをインストール

ApacheからOpenSSLを利用するためには、ApacheとOpenSSLと連携させるモジュールが必要なので、mod_sslをインストールします。

まずは入っているか確認。

yum list installed | grep mod_ssl

入ってなかったら

yum -y install mod_ssl

でインストールします。

2. 秘密鍵の作成

秘密鍵の作成をします。

SSLのCSRの発行は最初に秘密鍵を作ってその文字列からCSRを発行します。

openssl genrsa -out user_key.pem 2048

user_key部分は自由に変えてください。

※パスフレーズ（パスワード）なしで設定する時のコマンド

3. CSRの作成

CSR(Certificate Signing Request)とは、SSL証明書を作成する元になる情報が記載されているものです。 内容は、組織名やサーバのアドレスなどの方法です。

openssl req -new -key user_key.pem -out user_csr.pem

Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) [Default City]:Chiyoda-ku
Organization Name (eg, company) [Default Company Ltd]:Example Inc.
Organizational Unit Name (eg, section) []:(※省略可）
Common Name (eg, your name or your server's hostname) []:example.com
Email Address []:(※省略可）
A challenge password []:(※省略可）
An optional company name []:(※省略可）

間違えないように気をつけて入力します。 作成した後は以下のようなサイトで確認します。

https://sstool.cybertrust.ne.jp/support_tool/index02.php

※コマンドでも確認できますが、今回は省略します。。。

4. 証明書ファイルの作成

証明書発行メール本文中にある（-----BEGIN CERTIFICATE-----） から （-----END CERTIFICATE-----）　までをコピーし、テキストエディタに貼り付け、証明書ファイルとして任意のファイル名で保存します。

証明書ファイル：example_crt.pem

中間証明書のファイル：example_chn.pem

この2つのファイルと秘密鍵ファイルを /etc/httpd/conf.d/ssl/ に置きます。

※このファイルを置く場所は任意の場所でよいです。

5. ssl.confの編集

Apacheの設定では、通常のhttp(ポート:80)の設定とは別に、https(ポート:443)の設定を行う必要があります。（SSLではポート番号は443）

mod_sslをインストールをすると/etc/httpd/conf.dにssl.confという新しいファイルが作成されるので編集します。

DocumentRoot、ServerName、秘密鍵、証明書、中間証明書の設定をします。

vi /etc/httd/conf.d/ssl.conf

<VirtualHost *:443>
... 
DocumentRoot "/home/user/www" # 77,78行目辺り
ServerName example.com:443

SSLCertificateFile /etc/httpd/conf.d/ssl/example_crt.pem　#106行目辺り　証明書ファイル
SSLCertificateKeyFile /etc/httpd/conf.d/ssl/example_key.pem　#112行目辺り　秘密鍵の設定
SSLCertificateChainFile /etc/httpd/conf.d/ssl/example_chn.pem　#123行目辺り　中間証明書のファイル
... 
</VirtualHost>

次にApache再起動です。

service httpd restart

https://example.comをブラウザで確認してちゃんと設定されていたら成功です。

最後にSSLのテストをして終わりです！

AWSでサーバー構築してみました。（つづき）

AWSでサーバー構築してみました。の続きの記事です。作業用ユーザーの追加と、Virtual Hostの設定、ベーシック認証について書いてます。

1. 作業用ユーザーを追加

新しいユーザー用にユーザーアカウントを作成します。

adduser コマンドを使用してユーザーアカウントを追加

[ec2-user ~]$ sudo adduser newuser

新しいアカウントに切り替えます。

ec2-userからnewuserに変わります。

[ec2-user ~]$ sudo su - newuser
[newuser ~]$

なんでユーザーを作るの？

デフォルトのユーザーアカウントを使用することは多くのアプリケーションで適切ですが、ユーザーアカウントを追加すると、個人が自分だけのファイルと作業場所を確保できます。新しいユーザー用にユーザーアカウントを作成することは、ec2-user アカウントへのアクセス権を複数のユーザーに (経験のないユーザーも含めて) 与えるよりも、はるかに安全です。これはアカウントが不適切に使用された場合、システムにさまざまな損害を与える可能性があるためです。

2.パーミッションの設定

newuserディレクトリのアクセス許可を 755(所有者のみ、書き込みが可能) に変更します。

chmod -R 755 /home/newuser

3 公開鍵の設置と設定

newuser ホームディレクトリに .ssh ディレクトリを作成し、そのファイルのアクセス許可を 700 (所有者のみ、読み取り、書き込み、削除が可能) に変更

[newuser ~]$ mkdir .ssh
[newuser ~]$ chmod 700 .ssh

authorized_keys という名前のファイルを .ssh ディレクトリに作成し、そのファイルのアクセス許可を 600 (所有者のみ、読み取りおよび書き込みが可能) に変更

[newuser ~]$ touch .ssh/authorized_keys
[newuser ~]$ chmod 600 .ssh/authorized_keys

viでauthorized_keys ファイルを開いて公開鍵を貼り付け。 変更を保存します。

[newuser ~]$ vi .ssh/authorized_keys

これで、authorized_keys ファイルに追加した公開鍵の対である秘密鍵を使用して、インスタンスの newuser アカウントにログインできます。

4. Virtual Hostの設定

Virtual Hostとは？

一台のサーバーで仮想的に複数のドメインを運用するサーバー技術の一種で、主にメールサーバーやWebサーバーなどで利用されています

httpd.confの設定

まず、VirtualHostを使う宣言をApacheの設定ファイルであるhttpd.confに記述します。

[newuser ~]$ sudo vi /etc/httpd/conf/httpd.conf

ServerName www.example.com:80
↓
ServerName パブリック IP

nameVirtualHost *:80 の記述をhttpd.confに追加。 （IncludeOptional conf.d/*.confの記述の上に書きました。）

virtual.confの設定

ファイルの名前はなんでもいいそうです。

IncludeOptional conf.d/*.confが書かれているのでApacheは起動時に/etc/httpd/conf.d/以下にある*.confファイルを全て読み込みます。

旧CentOSでは、httpd.confに全て記載していましたが、CentOS7からはメイン設定は、 「/etc/httpd/conf/httpd.conf」に記載され、その他の設定は「/etc/httpd/conf.d/」ディレクトリ内に分散設置しています。

conf.dに移動してvirtual.confファイルを作成します。

touch virtual.conf

virtual.confファイルを編集します。

vi virtual.conf

以下の記述を書いて保存します。

#newuser
<VirtualHost *:80>
    DocumentRoot /home/newuser/***
    ServerName www.****.com
    ErrorLog /home/newuser/logs/newuser-error_log
    CustomLog /home/newuser/logs/newuser-access_log combined
    <Directory /home/newuser/***>
        AllowOverride All
        Require all granted
        Options All
    </Directory>
</VirtualHost>

5. apacheの再起動

virtual.confを変更後、設定を有効にするためにhttpdを再起動します。

sudo systemctl restart httpd

ウェブブラウザで、www.****.comを入力し、ページが表示されたら成功です。

6. ベーシック認証をつけてみる

.htaccessファイルを作ります。

/home/newuser/***以下に作成します。

touch .htaccess

vi .htaccess

以下の記述を書いて保存します。

AuthUserFile /home/newuser/.htpasswd
AuthGroupFile /dev/null
AuthName StaffOnly
AuthType Basic
require valid-user

記述の解説

AuthUserfile /フルパス/.htpasswd

サーバーのルートディレクトリからの.htpasswdへのパスを指定

AuthGroupfile /dev/null

グループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味でグループごとでのアクセス制限はしないという意味。

AuthName

ダイアログに表示される文章を指定。

AuthType Basic

AuthTypeを指定。「Basic（ベーシック認証）」と「Digest（ダイジェスト認証）」の2種類がある。

require valid-user

ユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。

.htpasswdファイルを作成します。

touch .htaccess

.htpasswdは、IDとパスワードを書きこむファイルです。

.htpasswdのファイルは、DocumentRootより上に設置します。

なので/home/newuser以下に作成します。

touch .htpasswd

パスワード暗号化ツールなどでパスワードを生成します。 http://www.luft.co.jp/cgi/htpasswd.php

できたパスワードを.htpasswdに記述します。

vi .htpasswd

500 Internal Server Error

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となるので、再度確認します。

以上、はじめてのサーバー構築です...！

（これであってるのかな...）