プログラミングを生活の一部に

時間と場所からの解放へ

さくら& 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/sudoersroot ALL=(ALL:ALL) ALLのしたにsubasa ALL=(ALL:ALL) ALLを追加。

4.ssh設定

参考:SSHなるものをよくわからずに使っている人のための手引書

Debian操作よりMacでの操作を先に!

$ 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

~/.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 -Pssh -pPが大文字か小文字かではまったので注意! ②なるべく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で起動! f:id:tsubasa0105:20181014183632p:plain できました。

6.ドメインを取得してnginxでVirtulHost

参考:プログラミングビギナーNekoteniがあなたに贈る!NginxでVirtual Hostの巻 全体的なディレクトリを視覚的にわかりやすく説明してくれている! - 新しく取得したドメインお名前.comのネームサーバを登録 f:id:tsubasa0105:20181014210139p:plain

  • ディレクトリ作成や設定ファイルに関しては上記のサイトを参考に実行し、Chrome(ブラウザ)でアクセス!間違いがなければtsuba.workのページが表示されるはず!

7. nginxでSSL

簡単な図解 f:id:tsubasa0105:20181015225657p:plain

  • やること
    秘密鍵(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完了
f:id:tsubasa0105:20181015230518p:plain はまったのは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-getapt-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;
}

bodyh1も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を併せて書いておくといいのかと。

まとめ

相対値で計算とかよくわからないと思って敬遠していたrememには使う理由があり、使いやすい方法があります。なんとなくpxが使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね!

参考: あなたはどれにする?CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

CSSの擬似要素を使った見出しデザイン

CSSの擬似要素を使った見出しデザイン

今学習しているフィヨルブートキャンプの課題で見出しデザインを作成。CSSだけでデザインを忘れないように備忘録として!
以下のページタイトルの横の4つの四角を2通りの記法を用いて作っていきます!!

f:id:tsubasa0105:20180821205905p:plain
HTMLコード:

<header class="main-header">
            <h2 class="main-header__title">ページタイトル</h2>
 </header>

擬似要素について

まずは擬似要素についてCSSpositionを総まとめ!absoluteやfixedの使い方は?を参考。
:before:afterで四角2つずつ作ってドッキングする為にborder-bottomgradationを使っていきます。
まずは一つ目の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;
}

f:id:tsubasa0105:20180821211920p:plain
まずは左側だけいけました!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;
}

f:id:tsubasa0105:20180821205905p:plain
これで四角の完成です。こちらの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の基本について学習

binについては調べたことがなかった。心なしか”b”から始まるものが多く敬遠していた。猛省。

binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があ>ります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。

  • binファイルについての疑問
    lsを叩いた時にディレクトリ内のファイルが一覧で表示される為、どこかのディレクトリ内のコマンドという認識がなかった。ただ/bin/lsと叩くと、 今までは何も気にせずlspwd を叩いていたが、「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までを自分なりに理解したが、まだまだものになっていないので、作業の自動化など効率化したいものを見つけ、それを形にできるよう技術を深めたい。黒い画面入門はとてもわかりやすく効率よく開発ができるよう何度か復習もしていきたい。