cidermitaina

フロントエンドエンジニアをやっています。
25歳です。頑張るから読んでほしい。

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

Dockerの勉強を始めました。

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

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

f:id:cidermitaina:20180905120917p:plain

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のデフォルト画面が表示されるはずです。

f:id:cidermitaina:20180905122429p:plain



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

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/ にアクセスすると

f:id:cidermitaina:20180905120917p:plain

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






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

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にアクセスすると以下の画面が表示されるとインストール成功です。

f:id:cidermitaina:20180807165615p:plain

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



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

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

f:id:cidermitaina:20180807165717p:plain

/.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. 秘密鍵の作成

秘密鍵の作成をします。

SSLCSRの発行は最初に秘密鍵を作ってその文字列から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 となるので、再度確認します。







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

(これであってるのかな...)


AWSでサーバー構築してみました。

少しサーバーのこととか勉強したいなあ、と思ってAWSでサーバーを構築してみました。 とりあえず、インスタンスの作成、LAMPのインストール、apacheのテストページを表示させるところまでです。

1. アカウントの作成

アカウントを作成します。

2. AWSにサインイン

コンソールにログインします。

3. EC2のインスタンスを作成

EC2をクリックします。

f:id:cidermitaina:20180711231203j:plain

インスタンスの作成をクリック。

f:id:cidermitaina:20180711231330j:plain

OSを選びます。
とりあえずAmazon Linux 2 AMI (HVM), SSD Volume Type を選んでみました。

f:id:cidermitaina:20180711231343j:plain

インスタンスタイプの選択をします。 無料枠のt2.microを選びました。

f:id:cidermitaina:20180711231402j:plain

インスタンス作成の確認画面です。 確認ができたら、作成を押します。

f:id:cidermitaina:20180711231424j:plain

4. キーペアの作成

サーバーへの接続は公開鍵認証になるので、秘密鍵を作成します。

新しいキーペアの作成を選択してキーペア名を入力し、
キーペアのダウンロードをクリックしてダウンロードします。

ダウンロードが完了したらインスタンスの作成をクリックします。

5. インスタンスの作成中

インスタンスの表示ボタンをクリックし、作成が成功していれば以下の画面になります。 インスタンスの状態がrunning、ステータスチェックが2/2のチェックに合格しましたであれば成功です。

f:id:cidermitaina:20180711231433j:plain

6. サーバーに接続

接続ボタンをクリックすると、接続方法が書いてあるので、手順通りに進めます。

作成したキーは適宜置き場所を変えます。

windows環境だと、以下の手順で接続しました。

ssh ec2-user@パブリック IP -i C:\Users\キーの場所\*****.pem


7. LAMP ウェブサーバーをインストール

ブラウザからURLにアクセスしたいので、LAMPをインストールします。

LAMP?

LinuxApacheMySQLPHPPerlPython)で構成される環境のこと

手順は以下のチュートリアル通りです。 https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

以下に手順を書いていますが、内容はさっきのURLと同じです。

1. ソフトウェアの更新を実行

すべてのソフトウェアパッケージが最新の状態であることを確認します。
$ sudo yum update -y

2. LAMP MariaDBAmazon Linux 2 PHP パッケージの最新バージョンを取得

sudo amazon-linux-extras install lamp-mariadb10.2-php7.2 php7.2

3. Apache ウェブサーバー、MariaDBPHP ソフトウェアパッケージをインストール

sudo yum install -y httpd mariadb-server

4. Apache ウェブサーバーを起動

sudo systemctl start httpd

5. systemctl コマンドを使用して、システムがブートするたびに Apache ウェブサーバーが起動するように設定

sudo systemctl enable httpd

httpd が有効であることを確認

sudo systemctl is-enabled httpd

6. インバウンド HTTP (ポート 80) 接続をインスタンスに許可する。

コンソールのセキュリティグループをクリック、アクションの中のインバウンドルールの表示を選択。

次の値で新しいインバウンドセキュリティルールを追加。

  • Type: HTTP
  • Protocol: TCP
  • Port Range: 80
  • Source: Custom

f:id:cidermitaina:20180711231549j:plain

7. ウェブサーバーのテスト

ウェブブラウザで、インスタンスのパブリック DNS アドレス (またはパブリック IP アドレス) を入力します。

Apache テストページが表示されると成功です。



ふう。
次の記事はバーチャルホストの設定のこととかを書く予定です。。。



Vue.js + Vue-cli + bulmaで作るSPA

SPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。

実際にページを作成してSPAを試してみたかったのでcssフレームワークbulmaを使って作りました。

こんな感じのページができます。

https://cidermitaina.github.io/spa-page/#/

(vue init webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。)

1.vue-cli のインストール

Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。

npm install -g vue-cli

2.プロジェクトを作成

vue init webpack プロジェクト名

3. ローカルで確認する

cd プロジェクト名

npm run dev

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

4.Vueアプリケーションの中身は?

npm run build

をすると実際に動くソースが作られます。(./dist フォルダ)

├── dist
  ├── index.html
  └── static
      ├── css
      └── js

./dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>spa-site</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js>
</script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>
</html>

index.html → buid → ./dist/index.htmlになったみたいです。

./src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

./src/App.vueをコンポーネントとして登録しているようなので見てみます。

./src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<router-view/>?

vue-routerライブラリがパスに応じて表示するコンポーネントを切り替えています。

設定されているかというとsrc/router/index.jsです。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

pathで'/'にアクセスすると、<router-view/>にHelloWorld.vueが表示される

import HelloWorld from '@/components/HelloWorld'の@って?

webpack.base.conf.jsの

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

にsrc ディレクトリの alias を定義しています。

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

dataで持っているmsgの値を{{ msg }}で表示しています。 Vue単一コンポーネントコンポーネントスコープCSSという機能があり、<style scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。

5. 中身を変更していく

中身が理解できたところで、編集してページを作成していきます。

1.ルーティングの設定

まずはコンポーネントファイルを作成します。 HelloWorld.vueをコピーして、必要なページ分作成します。 今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。

├──components
  ├── about.vue
  ├── api.vue
  ├── contact.vue
  ├── note.vue
  └── top.vue

次にルーティングの設定です。

./router/index.jsを編集します。

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/top'
import about from '@/components/about'
import note from '@/components/note'
import api from '@/components/api'
import contact from '@/components/contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/note',
      name: 'note',
      component: note
    },
    {
      path: '/api',
      name: 'api',
      component: api
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

2.リンクの設定

次にApp.vueを編集してリンクをつけていきます。

<ul>
  <li>
    <router-link to="/">Top</router-link>
  </li>
  <li>
    <router-link to="about">About</router-link>
  </li>
  <li>
    <router-link to="note">Note</router-link>
  </li>
  <li>
    <router-link to="api">Api</router-link>
  </li>
  <li>
    <router-link to="contact">Contact</router-link>
  </li>
</ul>

これで仕組みは完成です。 あとは、ページを作成していきます。

3.bulmaのinstall

bulmaをinstallします。

npm install bulma

npm install bulma sass-loader node-sass --save-dev

App.vueにbulma本体のimportの記述を追記します。

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

これでbulmaを使って簡単にページを作成できるようになりました。

あとは、自由にbulmaを使ってページを作成していくだけです。

思ってたよりも簡単にできました◎

今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。

bulma.io




今回作成したページのソースを参考に貼っておきます。

github.com