さくら& Debian & nginxでhttps通信をする備忘録
FjordBootCampプラクティス備忘録
さくらVPSからnginxのSSL化まで
WEBのことを知る上でいくつもの課題があり、一段落したので忘れないように、思い出しながらの備忘録
参考も乗せながら、なるべくシンプルに書いて行きますますが、結構長くなる予定。
1.さくらVPSに登録し、Debianインストール
まずはここから登録!データごとに別れているけどお好きなプランを選んで、カード決済すると②週間無料になっている。一応確認!お試し期間のみの利用であれば、会員トップメニュー→契約情報→キャンセルで簡単に解約可能。 参考:ネコでもわかる!さくらのVPS講座 ~第二回「サーバーをさわってみよう!」 | さくらのナレッジ
2.次にDebianインストール
カスタムOSインストールガイド - Debian 8 / 9を参考に最新のDebianをインストール 注意点: - 十字キーでの操作で - Graphical installを間違って押さない - rootとユーザーパスワードは別
3. Debianにsudoとvimをインストール
参考:sudoをインストールしvisudoで使えるようにする
# apt update # apt install sudo # adduser username sudo # apt install vim
vim /etc/sudoers
でroot ALL=(ALL:ALL) ALL
のしたにsubasa ALL=(ALL:ALL) ALL
を追加。
4.ssh設定
参考:SSHなるものをよくわからずに使っている人のための手引書
$ mkdir ~/.ssh $ ssh-keygen -t client_rsa -b 4096 $ passwordを打ち込む
Macに秘密鍵を記憶
$ ssh-add -K ~/.ssh/client_rsa
でパスワードを尋ねられるので、先ほど設定していたパスワードを打ち込む!
Mac側→Debian側 公開鍵をコピー・サーバ側に設置
$ scp ~/.ssh/client_rsa.pub remote-user-name@serverIP-address:~/.ssh/client_rsa.pub
次はDebianにインストール
$ sudo apt update $ sudo apt install ssh
$ mkdir ~/.ssh $ chmod 700 ~./ssh $ cat client_rsa.pub >> authorized_keys $ chmod 600 authorized_keys
バックアップ取って、sshd_configに設定
$ sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_config_bk $ sudo vim /etc/ssh/sshd_config
①PermitRootLoginをno
に変更
②port番号変更 → 攻撃対策の為
③PasswordAuthenticationをno
に変更
↓
sudo /etc/init.d_ssh restart
で適用!!
$ ssh -p <port-number> <user-name>@<serverIP-address>
にアクセスできるか確認!
注意:
①scp -P
とssh -p
のP
が大文字か小文字かではまったので注意!
②なるべくmac側の設定から行うとconnection refugeされない
5.nginxインストール
参考:Debianで最新版のnginxをapt-getを使ってインストール
wget
を使用しインストール
$ apt-key add nginx_signing.key $ sudo apt-key add nginx_signing.key $ sudo vim /etc/apt/sources.list
以下を追加
deb http://nginx.org/packages/debian/ stretch nginx deb-src http://nginx.org/packages/debian/ stretch nginx
変更を加えたので更新します!
sudo apt-get update
nginxをインストール
sudo apt-get install nginx
インストールできたか確認!
$ sudo nginx -v
$ sudo service nginx status ● nginx.service - nginx - high performance web server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: inactive (dead) Docs: http://nginx.org/en/docs/
動いてないのでsudo /etc/init.d/nginx start
で起動!
できました。
6.ドメインを取得してnginxでVirtulHost
参考:プログラミングビギナーNekoteniがあなたに贈る!NginxでVirtual Hostの巻 全体的なディレクトリを視覚的にわかりやすく説明してくれている! - 新しく取得したドメインにお名前.comのネームサーバを登録
7. nginxでSSL
SSL/TLSの暗号化通信をする仕組み
サーバー/クライアント間の通信のセキュリティーを高めるプロトコル。認証局より発行されたサーバー証明書を利用して、サーバーの証明、通信の暗号化、改ざんの検出などを行う公開鍵暗号で共通鍵をやりとり。共通鍵でデータを暗号化して通信。
SSLはネットケープコミュニケーションズ社によって開発された。それを元にIETF(インターネット技術タスクフォース)で標準化されたものがITLS。SSLという名前が広まっている為、現在もそう呼ばれているが、TLSが最新 参考:スラスラわかるネットワーク&TCP/IPの基本
簡単な図解
やること
① 秘密鍵(Private Key):server.keyを取得
② Certbotでサーバ証明書(CRT):server.crtを取得
③ 以上2点を設定ファイルの反映
④ httpとhttpsで表示されるhtmlを2種類用意Certbotをgitでインストール
使用コマンドを羅列
$ sudo apt update $ sudo apt install git $ git clone https://github.com/certbot/certbot $ chmod 700 ~/certbot $ cd certbot $ ./certbot-auto certonly --standalone -t
鍵が作られているか確認
$ sudo ls /etc/letsencrypt/live/tsuba.work/ README cert.pem chain.pem fullchain.pem privkey.p
- Nginxの設定ファイルを変更
server { listen 80 ; server_name tsuba.work; #charset koi8-r; access_log /var/log/nginx/tsuba.access.log main; location / { root /home/demo/public_html/tsuba.work/public/; index index2.html index.htm; charset UTF-8; } server { listen 443 ssl ; server_name tsuba.work; #charset koi8-r; access_log /var/log/nginx/tsuba.access.log main; ssl_certificate /etc/letsencrypt/live/tsuba.work/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/tsuba.work/privkey.pem; location / { root /home/demo/public_html/tsuba.work/public/; index index.html index.htm; }
こんな感じの設定でSSL完了
はまったのは80番と443番ポートのファイルの置く場所。両方の表示で違うhtmlを表示させる際、root /home/demo/public_html/tsuba.work/public/;
のpublic
と違うフォルダを作成し、root
の記載を間違えてしまったことでの文字化けや、defaultのhtmlがなぜか表示されるといったエラーに遭遇。しっかりとパスとフォルダをつくる場所を確認!
以上。
aptコマンドについて調べて見た
aptコマンドについて
aptコマンドを使う上で、APT,apt-get,apt-cacheなど整理ができてないので調べてみた。
- APTとは
Debian用に開発されたパッケージ管理システム
dpkgのフロントエンドとして動作するように設計されたが、現在はRPMに対応するように移植されたapt-rpmもある。パッケージ同士の関係を4つにわけて管理してくれる
パッケージ管理システム
・・・ OSというひとつの環境で、各種のソフトウェアの導入と削除、そしてソフトウェア同士やライブラリとの依存関係を管理するシステム
- 依存 パッケージを導入するのに欠かすことのできないパッケージ。 - 推奨 無くてもよいが、プログラムの機能を利用するために通常は導入するパッケージ。 - 提案 無くてもよいが、導入することによってプログラムの機能を向上させるパッケージ。 - 衝突 パッケージを導入することで、同一の機能を有するなどの理由で削除されるパッケージ<br>
apt-getとは
パッケージのインストールや更新、削除するコマンドapt-cacheとは
パッケージの検索をするコマンド
では本題のaptとは
検索や管理、パッケージに関する情報を問い合わせるコマンドを 提供するコマンドラインパッケージマネージャです。
apt-get
やapt-cache
のような特化した APT ツールと同じ機能を提供し、デフォルトで 対話的に使用するために適切なオプションを有効にする。
apt [オプション] コマンド [パッケージ名やコマンド用オプションなど
また
その後、APT(Advanced Packaging Tool)というパッケージ管理システムが登場しました。APTでは、インストールや更新、削除に「apt-get」コマンドを使い、パッケージの検索には「apt-cache」コマンドを使用します。APTはdpkgのフロントエンドとして動作するので、操作対象はdpkgと同じdebパッケージです ※。
※ RPMパッケージ用に移植されたAPT-RPMも開発されています。 現在は、apt-getとapt-cacheを統合した「apt」コマンド、そしてCUI画面でもグラフィカルな表示が可能な「aptitude」も使われています。dpkgとapt-get、apt-cache、apt、aptitudeを同じマシンに対して使用しても問題ありません ※2。
【 apt 】コマンド(基礎編)――ソフトウェアをインストールする
以前:dpkgコマンド
を使い、debパッケージ
と呼ばれるフォーマットのパッケージを使用
↓
途中:APT(Adbanced Packaging Tool)というパッケージ管理システムで
・ apt-get・・インストールや削除
・ apt-cache・・パッケージ検索
↓
現在:APIの中のaptコマンド( apt-getとapt-cacheを統合)を使うことが推奨されている
以下Debian 管理者ハンドブックより
6.2. aptitude、apt-get、apt コマンド APT は巨大なプロジェクトで、当初の予定ではグラフィカルインターフェースを含んでいました。APT はライブラリに基づいており、そのライブラリにはコアアプリケーションが含まれています。apt-get は最初のコマンドラインベースフロントエンドで、APT プロジェクト内で開発されました。apt は APT から提供されているもう一つのコマンドラインベースフロントエンドで、apt-get の持っていた設計上のミスを克服しています。
コマンドの種類
コマンド | 意味 |
---|---|
apt update | パッケージ情報の更新 |
apt upgrade | パッケージの更新 |
apt install | パッケージのインストール |
apt search | パッケージの検索 |
apt remove | パッケージの削除 |
apt purge | パッケージの完全削除 |
apt autoremove | パッケージの自動削除 |
apt clean | パッケージキャッシュの削除 |
apt install | ローカルパッケージのインストール |
apt list | 全パッケージ一覧 |
apt list --installed | インストール済みパッケージの一覧 |
参考文献
Debian 管理者ハンドブック
APT - Wikipedia
パッケージ管理システム- Wikipedia
Linuxゲリラ戦記
aptコマンドチートシート
fontsize調整 ー rem,em,px,%について備忘録
fontsize rem,em,pxについてまとめた
CSSを使っていてpx
のみで乗り切っていたので、remやemについても勉強したので備忘録として
まずは二つの指定方法
絶対値(absolute)
他の要素には影響を受けず16pxと指定したら16px!!!!!!相対値(relative) 親要素のサイズにより変わります!親の値が変わったら子要素の文字サイズも変わります!
ブラウザのデフォルトサイズは 100% = 1em = 1rem = 16px = 12pt
pxについて(絶対値)
恐らく一番馴染みが深いと思います!
html{ fontsize:100%; } body{ fontsize:16px; } h1{ fontsize:16px; }
body
もh1
も16pxで表示されます!16pxだったら16pxですね!
emについて (相対値)
html{ fontsize:100%; =16px } body{ fontsize:2em; } h1{ fontsize:1em; }
親要素に対して変わるとお話ししました!親のhtml
の100%は16pxなので、その2倍の32px!h1
の親はbodyです。bodyが32pxなので1倍なので32pxです!
remについて
html{ fontsize:100%; =16px } body{ fontsize:2rem; } h1{ fontsize:1rem; }
remは親要素ではなくhtmlのサイズが基準です!なのでbody
は32pxで、h1
は16pxです。なんとなくわかってきました!
注意
今まではpxを使っていましたが、pxには問題点がいくつかあります。
- IE9以前がpx指定された文字の拡大ができない
- ブラウザによって文字が大きさが変わって
それではどれを使うのが正なのか・・・
多くのサイトでオススメしているのはremを使ってhtml
の値を62.5%にすること。
html{ fontsize:62.5%; =10px } body{ fontsize:1.6rem; =16px } h1{ fontsize:3.2rem; =16px }
デフォルト設定が1em=16px
の場合に14pxの文字を出すのに計算が面倒臭くなってしまいます。その為大元の基準を62%= 10px
にしておくととても計算しやすくなりますね!
※どこまでサポートするかですが、IE8がremをサポートしていないので、pxを併せて書いておくといいのかと。
まとめ
相対値で計算とかよくわからないと思って敬遠していたrem
や em
には使う理由があり、使いやすい方法があります。なんとなくpx
が使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね!
参考:
あなたはどれにする?CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSの擬似要素を使った見出しデザイン
CSSの擬似要素を使った見出しデザイン
今学習しているフィヨルブートキャンプの課題で見出しデザインを作成。CSSだけでデザインを忘れないように備忘録として!
以下のページタイトルの横の4つの四角を2通りの記法を用いて作っていきます!!
HTMLコード:
<header class="main-header"> <h2 class="main-header__title">ページタイトル</h2> </header>
擬似要素について
まずは擬似要素についてCSSのpositionを総まとめ!absoluteやfixedの使い方は?を参考。
:before
と:after
で四角2つずつ作ってドッキングする為にborder-bottom
とgradation
を使っていきます。
まずは一つ目のborder-bottom
!!
h2::before { content:""; display: block; background-color:grey; width:10px; height:10px; border-bottom:solid 10px black; position: absolute; left: 10px; top: 20px; }
まずは左側だけいけました!4行目で上の灰色の四角を作り、7行目で下の黒い四角を作ります。サイズはwidthやheightを使って調整し、タイトルの左側に置く為にPositionを設定します。
続いては右側のです!gradationを使います!
h2::after { content: ""; display: block; width: 11px; height: 20px; background:linear-gradient( 180deg, black 0%, black 50%, grey 50%, grey 100%); position: absolute; left: 20px; top: 20px; }
これで四角の完成です。こちらのgradation
の方が書くことが多いですね。数字が見た目は複雑なので難しそうに見えるのですが、背景色を2色で分割表示する方法でわかりやすくまとめてくださっています。数字と色の割合さえわかってしまえば3色など応用もできます。
一言
初めはh2
と親要素のheader
の:beforeと:afterを使って4つを作っていて、要領の悪いことをしていましたが、boder-bottom(right)
を使うだけでなくgradation
も使い作成出来るというとで実践。かなり勉強になりました。
もし間違いがありましたらご指摘頂けると幸いです。
divタグ,sectionタグ、articleタグの整理
<HTML>-div,section,articleの違いについて
HTML5から学習を開始して、div,section,articleの違いについて理解が浅かったので調べた事を含めて備忘録
※お気付きの点があればご指摘よろしきお願い致します。
参考:articleタグとsectionタグとdivタグ,HTMLクイックリファレンス,oli.jp
divタグ
HTML5以前のdivの使い方は、「header」、「footer」などをidの名称に指定して使用。現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになった。
- divタグは、ひとかたまりの範囲として定義する際に使用。特に意味はない。
- 他に適切な要素が無い場合の使用が推奨されている。
→ウェブページのアクセシビリティやメンテナンス性が低下を招く - div 自体に意味はないため section や article を内包可
articleタグ
- ブログの投稿や記事1件、コメント1件分など独立して成立するコンテンツに使用
- article は section 同様、文脈的な意味がある コンテンツに対し使用
- 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。またsectionも内包できる。
- レイアウトのために基本的はdivを使用使わない
- 無理して使わなくてもよい
<article> <h1>Title</h1> <section> <h2>Section title</h2> <p>Content</p> </section> <section> <h2>Section title</h2> <p>Content</p> </section> <section> <h2>Section title</h2> <p>Content</p> </section> </article>
sectionタグ
- 章や節の区切りやまとまりなどに使用
- 意味や機能のまとまり
- div と違い、文脈的な意味があるコンテンツに対し使用する。 よってsection 内には見出しが必須
- 文章の論理構造用タグ
- article同様、基本的にレイアウトのためには使わない
- articleを内包可(あまり腑に落ちてない。。。)
– 無理して使わなくてもよい - コンテナーとして使うならdivを使用
<section id="main-content"> <article> <h1>Article title</h1> <p>Summary</p> </article> <article> <h1>Article title</h1> <p>Summary</p> </article> <article> <h1>Article title</h1> <p>Summary</p> </article> </section>
現在、FjordBootCampでプログラミング学習中!
8/7よりFjordBootCampに参加
始めてのはてなブログ投稿。
Fjordではブログを書き自身のアウトプットやエンジニアとしての素養を高める為、ブログを書くことを進めている。
慣れない部分はご容赦いただくとして、コンスタントにアウトプットし、自信と知識を積み重ねていきたい。
今日はTerminalの基本について学習
- 黒い画面入門をPart.9まで学習
学んだこと 気づいた事
そもそもあの黒い画面では何が行われているのか
今まで3ヶ月勉強をして見てlsやpwdしか使わず意味すらも理解せず使っていた。反省。
Terminalはファイル名を打ち込む事でプログラムを実行している。例えばファイルやディレクトリを一覧表示される$ ls
というコマンドを叩くと、カレントディレクトリーに入っているファイルやディレクトリを表示してくれる。こちらも参照。
また、Linuxコマンドは単語の意味を理解するとグッと身近なものになるを見てみると捗る。binとは何者なのか
binについては調べたことがなかった。心なしか”b”から始まるものが多く敬遠していた。猛省。
binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があ>ります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。
- binファイルについての疑問
ls
を叩いた時にディレクトリ内のファイルが一覧で表示される為、どこかのディレクトリ内のコマンドという認識がなかった。ただ/bin/ls
と叩くと、 今までは何も気にせずls
やpwd
を叩いていたが、「PATHを通す」という行為をしなければで、フルパスを打ち込んで実行しなくてはいけない。というのも/bin/ls
はbinディレクトリの中にあるlsというコマンドを実行している。「PATHを通すことでフルパスを打たずともls
のコマンドを実行出来るようになる。
- 叩いたコマンド
touch
touchコマンドは空のファイルを作成します。本来既にあるファイルに触って(touchして)最終更新日を更新するだけのコマンドですが、空ファイルを作るのにも使われます。
→新規ファイル作成とばかり思っていたので、意味を理解できて良かった。
cat
catはconCATenateの略でファイルの中身を表示するコマンドです。concatenateは連結させるという意味で本来は引数に渡した二つのファイルを繋げて表示するコマンドですが、一つしかファイルを渡さなければ単に中身を表示するのでその用途の方で主に使われている悲しいコマンドです。lsやrmやcatのような基本的なコマンドは問答無用で覚えさせられることが多いので「cat?何で猫がファイルを表示するんだろう?」と思う人は多い(ハズ)です。
→初心者だから表示のみの仕方しか使わないが、エンジニアの方は頻繁に使っているのでしょうか。体感覚で連結時にさらっと使ってみたい。
sudo rm -rf /
→見るからに怖いコマンド。きっと使うことはない!!
作業の自動化
...いかに効率良く作業を行うかが生産性に関わる。ただあまりパソコンを触ってこなかったので自動化したい作業が見当たらない。強いて挙げるなら、集中できる時間が1時間半なのでDashboardのタイマーで1時間半のタイマーをコマンド一つで実行できるような簡単なものから作っていきたい。スクリプトを単体で実行するためにshebang(シバン)という機能
自分自身でも理解できるスクリプトがあるか探して見たが、なかなか見当たらないので、簡単なコードを書いて見る為、以下を練習用に!
read -p "Please input your name: " name
echo "Hi, $name."をimput.shというファイルを作成し、保存。
$ chmod u+x input.sh
$ ./input.sh
Please input your name: Tsubasa
Hi, Tsubasa.
と、簡単なもので練習。所感
今まで深く調べてみようと思ってはいたが、怠けていた黒い画面。分からないことを後回しにする事や、その場で掘り下げない事のツケが今になって表面化してしまった。Part.1-9までを自分なりに理解したが、まだまだものになっていないので、作業の自動化など効率化したいものを見つけ、それを形にできるよう技術を深めたい。黒い画面入門はとてもわかりやすく効率よく開発ができるよう何度か復習もしていきたい。