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ファイルの作成
こんな感じで作成していきます。
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教科書 インフラの基礎知識＆コードによる環境構築の自動化
- 作者:WINGSプロジェクト阿佐志保
- 発売日: 2015/11/19
- メディア: Kindle版
続きの記事として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属性で要素を画面上でどのように表示するか指定します。
これだけで遅延ロードができます。
<!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はまだよく分かっていないので時間があるとき調べたい...です。
参考
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 となるので、再度確認します。
以上、はじめてのサーバー構築です...！
（これであってるのかな...）
AWSでサーバー構築してみました。
少しサーバーのこととか勉強したいなあ、と思ってAWSでサーバーを構築してみました。
とりあえず、インスタンスの作成、LAMPのインストール、apacheのテストページを表示させるところまでです。
1. アカウントの作成
アカウントを作成します。
2. AWSにサインイン
コンソールにログインします。
3. EC2のインスタンスを作成
EC2をクリックします。
インスタンスの作成をクリック。
OSを選びます。
とりあえずAmazon Linux 2 AMI (HVM), SSD Volume Type を選んでみました。
インスタンスタイプの選択をします。
無料枠のt2.microを選びました。
インスタンス作成の確認画面です。 確認ができたら、作成を押します。
4. キーペアの作成
サーバーへの接続は公開鍵認証になるので、秘密鍵を作成します。
新しいキーペアの作成を選択してキーペア名を入力し、
キーペアのダウンロードをクリックしてダウンロードします。
ダウンロードが完了したらインスタンスの作成をクリックします。
5. インスタンスの作成中
インスタンスの表示ボタンをクリックし、作成が成功していれば以下の画面になります。
インスタンスの状態がrunning、ステータスチェックが2/2のチェックに合格しましたであれば成功です。
6. サーバーに接続
接続ボタンをクリックすると、接続方法が書いてあるので、手順通りに進めます。
作成したキーは適宜置き場所を変えます。
windows環境だと、以下の手順で接続しました。
ssh ec2-user@パブリック IP -i C:\Users\キーの場所\*****.pem
7. LAMP ウェブサーバーをインストール
ブラウザからURLにアクセスしたいので、LAMPをインストールします。
LAMP?
手順は以下のチュートリアル通りです。
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html
以下に手順を書いていますが、内容はさっきのURLと同じです。
1. ソフトウェアの更新を実行
すべてのソフトウェアパッケージが最新の状態であることを確認します。
$ sudo yum update -y
2. LAMP MariaDB と Amazon Linux 2 PHP パッケージの最新バージョンを取得
sudo amazon-linux-extras install lamp-mariadb10.2-php7.2 php7.2
3. Apache ウェブサーバー、MariaDB、PHP ソフトウェアパッケージをインストール
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
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を使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。
今回作成したページのソースを参考に貼っておきます。
