VPSで動かしてるdockerのmysqldumpをAmazonS3にアップロードする

特殊なケースかもしれないし、こんなことやってるのはアホらしいかもしれないけどメモ的に記録しておきます。VPSで動かしてるubuntuサーバー上のmysql dockerコンテナのバックアップをs3にアップロードします。そもそもAWS使っておけばバックアップはホント楽なのに…といってもしょうがないのでやりました。

まずはubuntuaws cliを導入します。

導入にはpythonとpipが必要になります。pythonはもう入っていたのでpipのインストールからやりました。pipは

からインストールが可能です。そして本題のaws cliのインストールですが

でインストールします。インストールが終わったらaws cliの設定を開始します。その際にIAMのアクセスキーIDとシークレットアクセスキーが必要になります。取得方法はこちらにあります(というかpipの導入などもここにありますが…)

引用しておくと

1.IAM コンソールを開きます。
2.コンソールのナビゲーションペインで、[Users] を選択します。
3.IAM のユーザー名 (チェックボックスではありません) を選択します。
4.[Security credentials] タブを選択し、次に [Create access key] を選択します。
5.新しいアクセスキーを表示するには、[Show] を選択します。認証情報は以下のようになります。

アクセスキー ID: AKIAIOSFODNN7EXAMPLE
シークレットアクセスキー: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
6.キーペアをダウンロードするには、[Download .csv file] を選択します。このキーは安全な場所に保存してください。

 これはそのまんまなので特に迷うことはないはずです。もちろんここのアクセスキーなどはダミーです…

それで設定は以下のコマンドの実行です

実行すると上記アクセスキーIDとシークレットアクセスキーが聞かれますのでコピペ、あとはリージョンとoutput formatが聞かれますので、東京リージョンであれば「ap-northeast-1」、output formatはよくわかりませんがjsonでいいでしょう。

これでaws cliの設定は完了です。

 

dockerコンテナのmysqlのダンプの取得方法はこちらです。

日本語のところは適宜自分の環境に置き換えてください。最後のディレクトリ・ファイル名指定はなんでも構いません。バックアップファイルに日付を指定していますが、cronで定期実行する際はエスケープしないとちゃんと動かないので%をエスケープしております。

ここからあとはS3にアップロードするだけです 

 上記コマンドでアップロード可能なのであとは手動でやるなりcronでやるなりすればOKです。

 

私たちはyyUXというUXレビューサイトを運営しています。あらゆるサービスのUX改善を目指しています。一度のぞいてみて下さい。よろしくお願いします。

yyux.jp

CPU脆弱性(Meltdown/Spectre)におけるEC2の対応についてとインスタンスの再起動について

aws.amazon.com

先日から話題になっています、CPUの脆弱性(Meltdown/Spectre)についてAWSでの対応方法が発表されました。多くの人が使っているのがEC2とRDSあたりかと思いますが、RDSは対応が必要なく、私が使っているサービスではEC2のみが対象でした。

EC2インスタンスで必要な作業は(1月8日以降に起動したものは対応の必要なし)以下となっています。

・sudo yum update kernelの実行

インスタンスの再起動

の以上で完了です。あっという間に終わるので、特にブログにする必要もないくらいなのですが、一つ気になったことがありました。インスタンスの再起動と言いますが、オートスケーリンググループに属している場合、インスタンスを再起動するとELB等のヘルスチェックに引っかかってしまい、インスタンスが破棄されてしまうのではないかと。ヘルスチェックの感覚や再起動にかかる時間にもよりますがこの懸念は間違いないです。

この場合

パッチ当てる→AMI取得→起動設定・オートスケーリンググループに設定→希望台数を増減させて新しいインスタンスに入れ替える

という作業を行っていました。ダウンタイムも発生せず、今回もこの作業で問題ないのですが、ここで

「オートスケーリンググループ使ってる場合インスタンスの再起動って無理じゃね?」

と思いました。ただAWSに限ってそんなことはないだろうと思い調べたところ

docs.aws.amazon.com

ドキュメントにしっかり記載がありました。オートスケーリンググループの機能でインスタンスをスタンバイにすることでヘルスチェックから逃れることが可能です。今回この機能を使う必要は特になかったのですが、今回ふと疑問に思って調べたのでメモとして残しておきます。

 

私たちはyyUXというUXレビューサイトを運営しています。あらゆるサービスのUX改善を目指しています。一度のぞいてみて下さい。よろしくお願いします。

yyux.jp

iPhoneのバッテリー劣化に伴いパフォーマンスを低下させていた件について

ここ数日iPhoneがバッテリー低下に伴い意図的に速度を低下させていた事がわかり、批判的な記事・コメントをよく目にするようになった。そしてついにAppleが謝罪、バッテリー交換費用を値下げするという発表をした。

iPhoneのバッテリーとパフォーマンスについて、お客様にお伝えしたいこと

何よりもまずお伝えしたいのは、お客様による製品の買い替えを促すために、私たちが意図的にApple製品の寿命を縮めたり、お客様の体験が損なわれるようにしたことはこれまでに一度もなく、今後も決してないということです。

 さらにバッテリーについて以下の記事も公開している

iPhone のバッテリーとパフォーマンス 

シンプルで使い勝手のよいユーザ体験を提供する — これが iPhone に対する Apple の基本的な姿勢です。 

「お客様の体験」「ユーザ体験」つまりUXです。UXを損なわないために、高めるために行ったAppleの対応が必ずしも適切でなかったことから今回の問題が発生しました。ハードウェア周りのことはあまり知識がありませんが、Appleにとってユーザーが突然のシャットダウンを受けてしまうということは最大に避けなければならないことであった。そしてそれを防ぐためにバッテリー劣化に伴い、性能を下げるということは合理的判断であったのだと思う。

ただ、当然消費者心理として、この対応はAppleが買い替えを促進するために行っていると解釈されても仕方がないと思う。

ただこの報道を受けてSamsungとLGは

qetic.jp

このような発表を行い、バッテリー劣化に伴い性能を下げる必要がないようにとれる発表をしており、さらにAppleの印象は悪くなった。

おそらく、パフォーマンスを下げない選択をすれば突然のシャットダウンという事象は発生しうる事はあるのではあろうが。

ともかく、筆者としてはハードウェアメーカーとしてパフォーマンスを下げる下げないはそれぞれの選択に任せるもので、更にいうと選択できるのはユーザー(シャットダウンを許容するか、パフォオーマンスの低下を許容するか)であったほうがいいのでは?と思う。

ともかくパフォーマンス低下を”公にせず行っていた”ため、今回結果的に最低のUXを提供することとなった。ユーザーに情報を提供し、情報の非対称性をなるべく減らすということが重要だということが改めてわかった。これが最終的にはUXを高めわれることがあるのが(もちろん知らなくて良いことはたくさんあるが)

ただ今回これを記事にしたのは、バッテリー劣化にどう対応するのが正解か?というわけではない。

こういったUXをどのようにデザインしていくべきかと言うのを話し合う場のサイトがあればいいなと思い、それを作り、リリースしたからだ。

yyux.jp

このサイト、yyUX(ワイワイユーエックス)はUXのレビューサイトです。UXレビューを通して、世の中のUXがもっと良くなればなと思っています。

EC2インスタンスのメモリ使用量がとれない!ってときは

AWSでサーバーを運用しているとデフォルトでCPU使用量などが把握できるので、細かい監視まで必要としないサービスを運用しているときは非常に助かりますよね。 ただなぜかこのデフォルトのCloudWatchではメモリ使用量が取れない…

AWSのドキュメントにはこれこれこういうふうにやるととれますよーってのが書いてあります。

docs.aws.amazon.com

上記リンクを参考にすればそんなには難しくありません。 ほとんどコピペでやっていけば問題ないはずです。

ただ、「値の取得」ってのが目標だとある日突然値が取れなくなることがあります(ちゃんとやってる人は取れます…)

特にAutoScalingを利用して運用して、インスタンスのLunch、Terminateが頻繁に起こっているのであればこの現象が起こるかもしれません。 これも実は上記ドキュメントの最下部に記載があるのですが

CloudWatchClient.pm モジュールは、インスタンスメタデータをローカルでキャッシュします。モニタリングスクリプトを実行しているインスタンスから AMI を作成すると、キャッシュ TTL (デフォルト: 6 時間、Auto Scaling グループでは 24 時間) 以内にこの AMI から起動したすべてのインスタンスは、元のインスタンスインスタンス ID を使用してメトリクスを出力します。キャッシュ TTL 期間が経過した後は、スクリプトは新しいデータを取得し、モニタリングスクリプトは現在のインスタンスインスタンス ID を使用します。これをすぐに修正するには、次のコマンドを使用してキャッシュされたデータを削除します。

ということだそうです。つまりインスタンスIDをキャッシュしていて、キャッシュの値と現在のインスタンスIDが違うと値が取れなくなってしまうみたいです。 それでそういう場合はどうしたらいいのかってのまで記載があります。下記のコマンドを実行すればそれで終わりです。 キャッシュのinstance-idファイルを削除で完了です。

とまあここまではドキュメント通りの内容です。 それで私が困ったのは

「せっかくAutoScaling使ってるのに起動する度にこのコマンド実行するんかいな…」

ということでまあサーバー・AWSに詳しい人ならそんなアホな…ということですが私は思ってしまいました…それでサポートに問い合わせたところ

常にメモリ使用量を取得するための運用ですが、「ユーザーデータ」を使用してインスタンス起動時にキャッシュファイルを削除していただくのが有効かと存じます。「ユーザーデータ」は AutoScaling の起動設定を登録する際に、起動設定に紐づけることのできるシェルスクリプトで、インスタンス起動時に自動的にこのスクリプトが実行されます。

ということでこの「ユーザーデータ」ってところで上記コマンドを実行すればOK。ドキュメントはここ。 docs.aws.amazon.com

EC2インスタンス起動時でも起動設定作成時でも「3.詳細設定」というところがあって、ここに「高度な設定」を選択すると「ユーザーデータ」があります。 そこでテキストを選択して、シェルとかわかんないよって人は下記のスクリプトを突っ込んでおきましょう

まあさっきのコマンドを実行しているだけですね笑 これだけでインスタンス作成時に上記コマンドを発行してくれて、インスタンスIDのキャッシュファイルを削除してくれます。 正直キャッシュファイルとかそういうのはうまくやってくれないかなぁとは思うものの、それではイメージというものではなくなってしまうということなのでしょうか。

AWSの知識とかまるでないまま最近はいろいろ触っているのですが、ドキュメントの充実(しかも日本語で!)に加えて、サポートの対応の速さ・的確さは素晴らしいなと感じています。 しかしながら今は色々聞いてしまっていますが、なるべくドキュメントを読み込んで、自分で解決できるようなりたいなと思っております。

D-U-N-S® Number(ダンズナンバー)取得方法について

今回はシステム・アプリ開発の上で必要となる場合があるD-U-N-S® Number(ダンズナンバー)の取得方法について案内してみたいと思います(以下DUNSナンバー)。

システム開発をしているとDUNSナンバーが必要となる場合があります。特にAppleが求めてくる事が多くApple Developer Program または Apple Developer Enterprise Program に法人として登録する際には必須となります。今回は

「DUNSナンバーを要求されたけど、DUNSナンバーとはなんぞや?」

という方に向けての記事となります。

DUNSナンバーとは

まずDUNSナンバーについてですが

The Data Universal Numbering System (D-U-N-S®)、1962年にD&Bが開発した9桁の企業識別コードのことで、世界の企業を一意に識別できる企業コードです。D&Bが独自に管理をしており、日本企業についてはTSRが運営しています。D-U-N-S® Numberを用いることで、データベース上での企業の識別が容易になるため、顧客管理や、調達先管理、さらには各企業が運営する様々なプログラムで活用されています。(引用元:D-U-N-S® Numberとは : 東京商工リサーチ

となっております。つまり国を関係なしに一意に企業を識別できるコードです。 どの会社かというのを一意に識別するためにDUNSナンバーの提出を必須にしているのでしょう。

DUNSナンバー取得元

DUNSナンバーの取得方法は大きく分けて2つあります。

の2つの取得元が考えられます。これ以外にも取得できるところはあるかもしれませんが、メジャーどころ2つなのでここから選択で問題ないかと思います。

DUNSナンバー取得方法比較

2つの取得元があるようなのでそれぞれ見比べてみましょう。以下の表のようになっています。

東京商工リサーチ Apple
申請費用 3240円 無料
申請日数 登記簿謄本が到着から最大3営業日 最大5営業日
申請に必要なもの 登記簿謄本 Apple Developer Account
検索費用 無料 無料
検索日数 1営業日程度 即日
検索に必要なもの 特になし(住所などの会社情報程度) Apple Developer Account
言語 日本語 英語(会社情報はローマ字入力

費用・日数を考えると圧倒的にAppleのほうが有利となっています。ただ最大のネックは入力が英語・ローマ字となるところでしょう。 あまり英語に自信がない、日数にゆとりがあるという方は東京商工リサーチの利用で問題ないのではないのでしょうか?

「3240円でも支払いたくないよ」 という方も多いかと思いますが、DUNSナンバーは基本的に自分から申請しなくても、登記があれば登録が勝手にされることが多いです。 ですので、まず検索してみてはいかがでしょうか?

なお東京商工リサーチは申請と検索が全く別の手続きを取ることになるのですが、Appleの場合はもうちょっと楽になります。 Appleは検索してみて、存在しなければそのまま申請、という一連の流れをそのままやってもらえます。その点でもAppleは優れた「UX」を提供しているように感じます。 Apple Developer Accountが必要になりますが、特に難しいことはありません。特にすでにAppleIDをを持っている場合はそれをそのままDeveloper Accountに使いまわすことができるのであっという間に終わります。

実際の検索は?となるのですが、ここからは各サイトの案内に従っていけば簡単に終えることができます。 基本的には会社の住所などの情報を入力するだけで終えられるようになっています。DUNSナンバーを全然知らない状態でDUNSナンバーを要求されることがあると、割と混乱してしまうので、どういったものなのか、どうやって取得するのかまでご案内させていただきました。

ウェブデザインに関するおすすめ資格7選【独学ウェブデザイナー必見】

 以前に比べてデザインの重要性、必要性を感じている方が多くなってきているのではないでしょうか。ウェブサイトのUI(ユーザーインターフェース)も昔に比べてデザインに凝ったものが増えたように感じます。(もちろんウェブサイトのUIに限らず、お菓子のパッケージなどのデザインも同様です。)
 会社に勤めてデザイナーをしている人も、個人でウェブサイトやアプリを作っている人も、体系的にデザインに関する知識・スキルを学べている人は少ないのではないでしょうか。
 そこで今回は、満遍なく体系的に知識・スキルをつけることができる資格検定について、おすすめを7つご紹介したいと思います。特にデザインといってもウェブ寄りの資格をまとめています。
 ウェブデザイナーになりたい学生や就職活動中の方にも、ウェブデザインを学習するきっかけとなれば思います。

※2017年5月時点の情報を掲載します。

【カラー系の検定】


色彩検定

f:id:yyUX:20170506000119p:plain

公式サイト

 色彩検定は文字通り色の活用能力を検定します。文部科学省後援の検定です。デザイン関連の試験といわれたら一番に思いつく人も多いくらい、知名度の高い資格ではないでしょうか。
 満遍なく色に関する知識を習得することができますが、それを表すように様々な分野の方から受験されているようです。レベルは3級、2級、1級があります。

【主催団体】:色彩検定協会
【キーワード】:色彩心理、色彩調和、配色イメージ、ビジュアルデザインと色彩

3級 2級 1級
実施時期 夏期(6月)
冬期(11月)
夏期(6月)
冬期(11月)
冬期のみ
1次試験(11月)
2次試験(12月)
試験方式 マークシート方式 マークシート方式
(一部記述式)
1次:マークシート方式(一部記述式)
2次:記述式(一部実技)
検定料 7,000円 10,000円 15,000円
試験時間 70分 80分 1次 : 90分
2次 : 90分
合格ライン 満点の70%前後
合格率
2016年度
75.25% 62.84% 29.77%



カラーコーディネーター検定試験

f:id:yyUX:20170506004350p:plain

公式サイト

 カラーコーディネーター検定試験色彩検定と同様に色の活用能力を検定しますが、よりビジネス活用向けで特定分野を意識した検定内容となっています。レベルは3級、2級、1級がありますが、特に1級は3つの分野に分かれており、ファッション色彩(第一分野)、商品色彩(第二分野)、環境色彩(第三分野)となっています。
 主催団体は日商簿記検定試験を主催していることでも有名な東京商工会議所です。

【主催団体】:東京商工会議所
【キーワード】:配色と色彩調和、ファッション色彩、商品色彩、環境色彩

3級 2級 1級
(第一分野)
1級
(第二分野)
1級
(第三分野)
実施時期 夏期(6月)
冬期(12月)
夏期(6月)
冬期(12月)
冬期のみ(12月)
試験方式 マークシート方式 マークシート方式 マークシート方式および論述問題
検定料 5,250円 7,340円 9,440円
試験時間 2時間 2時間 2時間30分
合格ライン 100点満点とし、70点以上
合格率
2016年度
(第41回)
54.9% 46.5% 34.9% 24.9% 9.9%



カラーデザイン検定

f:id:yyUX:20170506035909p:plain

公式サイト

 カラーデザイン検定は、既にご紹介した色彩検定カラーコーディネーター検定試験に比べると歴史の浅い検定ではあります。 「実務に強い「色の戦略家」を育成するカラーデザイン検定」と公式サイトでは謳われています。 学んだ内容が即座に現場で応用可能となるような試験内容となっているようです。

【主催団体】:国際カラーデザイン協会
【キーワード】:素材と色彩、グラフィカル表現、色彩調査の手法、カラープロモーション

3級 2級 1級
実施時期 夏期(7月)
冬期(1月)
夏期(7月)
冬期(1月)
夏期(7月)
試験方式 マークシート方式 マークシート方式 マークシート方式 &
記述式
検定料 7,000円 8,000円 14,000円
試験時間 60分 80分 理論:60分、実技:120分
合格ライン 満点の70%前後
合格率 - - -



【ウェブデザイン全般知識系の検定】


ウェブデザイン技能検定

f:id:yyUX:20170506030543p:plain

公式サイト

 ウェブデザイン技能検定は、合格するとウェブデザイン技能士の資格を取得できます。ウェブデザイン技能士はウェブ業界で唯一の国家資格となっています。 レベルは3級から1級までありますが、どのレベルでも実技があり実戦的です。 なお、2級、1級は受験する際に一定の条件をクリアする必要があるので興味ある方は公式サイトをチェックしてみてください。
 国家資格を取得する検定らしく、すこしホームページにお堅い印象を受けます。

【主催団体】:インターネットスキル認定普及協会
【キーワード】:インターネット概論、ウェブデザインコーディング技術 、インフォメーションデザイン、ウェブサイト設計・運用・管理技術

3級 2級 1級
実施時期 2、3、5、8、11月 2、3、5、8、11月 11月(学科)、2月(実技)
試験方式 マーク方式 & 実技 マーク方式 & 実技 1マーク方式 & 実技 &
ペーパー実技
検定料 学科: 5,000円
実技: 5,000円 (35歳以上)、3,000円(35歳未満)
学科: 6,000円
実技: 12,500円(35歳以上)、7,000円(35歳未満)
学科: 7,000円、 実技: 25,000円
試験時間 学科45分、実技60分 学科60分、実技120分 学科90分、実技180分、
ペーパー実技60分
合格ライン 学科、実技ともに満点の70%
合格率 60-70% 40-50% 10-20%

※実施時期、実施予定地域は年度によって異なるようなので受験する際は公式サイトを必ずチェックしてください。



Web検定 Webデザイナー

f:id:yyUX:20170506033419p:plain

公式サイト

 受験者数がまだまだ少ない検定試験ではありますが、学習内容はとても魅力的です。 試験で扱う学習範囲が広く、検定に合格すればウェブデザインの一般知識を備えているといっても良いでしょう。

【主催団体】:社団法人 全日本能率連盟 【キーワード】:Webサイトの企画・設計、素材とデザイン、フロントエンド制作、サーバーサイドプログラミング

実施時期 年末年始を除く毎日
試験方式 CBT方式
コンピュータ画面に表示される問題に
解答する試験方式
検定料 10,000円
試験時間 90分
合格ライン 正解率70%以上
合格率 累計53.7%



Webデザイナー検定

f:id:yyUX:20170506034348p:plain

公式サイト

 デザインとグラフィックの総合情報誌で有名なMdN公認の検定です。 各種Webサイトのデザインに関して、コンセプトメイキングから制作、運用についての知識や技術が求められます。
 個人の感想ですが、ホームページのデザインに改善の余地ありと感じてしまうところが残念なところ。

【主催団体】:CG-ARTS協会 【キーワード】:コンセプトメイキング、インターフェースとナビゲーション、Webサイトを実現する技術、知的財産権

ベーシック エキスパート
実施時期 7、11月
試験方式 マークシート方式
検定料 5,500円 6,600円
試験時間 60分 80分
合格ライン 得点率70%以上
合格率
(平成28年度後期)
64.0% 27.2%



【コーディング系の検定】


Webクリエイター能力認定試験

f:id:yyUX:20170506032216p:plain

公式サイト

 Webクリエイター能力認定試験は主にコーディング知識が問われる試験となっています。 試験目的としてはWebサイト制作のデザイン能力および、Webページのコーディング能力を認定することのようです。
 レベルはエキスパートとスタンダードの2つがあります。合格率についてですが、80%を超えており勉強をしっかりすれば合格できそうです。 学習プランモデルや公式テキスト、問題集を用意しており、学習のしやすさも合格率が高い理由かもしれません。

【主催団体】:サーティファイ 【キーワード】:HTMLコーディング、CSSコーディング

スタンダード エキスパート
実施時期 3、9月
試験方式 実技 多肢選択形式 & 実技
検定料 5,700円 7,300円
試験時間 実技:70分 知識問題:20分、実技:110分
合格ライン 得点率65%以上
合格率
(平成27年度平均)
86.9%



まとめ

 今回はウェブデザインに関するおすすめ資格を7つ紹介しました。ウェブデザインについての体系的な知識・スキルをつけるために、受験を検討してみてはいかがでしょうか。

Bootstrap 4で、Sticky Footerを実現する

Sticky Footerについて

SNSやオンラインショッピングサイトなどにはページの最下部にフッターを構えるケースが多いですよね。「利用規約」や「お問い合わせ」など、メインサービスからは少し外れる内容を掲載することが多い箇所です。
今回はそんなサイト最下部のフッターを実現する方法について書いていきます。 特に、フッターといってもSticky Footer ((最下部に)くっ付くフッター)について。
なお、Sticky Footerについてですが、以下の特性を持ったフッターのことを言います。

  • 十分にコンテンツがある場合、最下部までスクロールした時に、最下部にフッターがくっ付いている
  • 十分にコンテンツがない場合、コンテンツのすぐ下にフッターがくるのではなく、ブラウザの最下部にフッターがくっ付いている

f:id:yyUX:20170419004804p:plain

このSticky Footerを実現するためにはHTMLやCSSに少しテクニックが必要なのですが、今回は昨今よく利用されているCSSフレームワークのBootstrapを用いて実現したいと思います。特に現時点(2017年4月)で最新のBootstrap v4.0.0-alpha.6での実現方法について紹介していきます。

Sticky Footerの実現方法

Sticky Footerの実現方法はいくつかあるのですが、今回はflexレイアウトボックスモデルを用いた方法を採用します。(flexboxを利用すると、フッターの高さが不確定でも想定通りのSticky Footerを実現できます。)

なお、その他の方法も紹介されている記事としては以下が参考になりました。気になる方はチェックしてみてください。

coliss.com

そもそもflexレイアウトボックスモデルがよくわからないよ!って方は以下の記事がとてもわかりやすいと思います。 liginc.co.jp

Bootstrap 4 (v4.0.0-alpha.6)による実現方法

では早速サンプルコードと共に実現方法を見て行きましょう。ポイントは以下になります。

  • ビューポートの高さをブラウザの高さとします。今回はbodyのstyle属性としてmin-height: 100vh;をあてています。(もちろんhead要素にstyle要素として外だしするのでもOK)
  • bodyをflexコンテナとします。bootstrapのクラスとしてclass="d-flex"を設定しています。
  • bootstrapのflexの軸はデフォルトでは行(横)方向のため、class="flex-column"として軸を縦に変更します。
  • main属性の下マージンをautoとすることでフッターを最下部にくっつけます。bootstrapのクラスとしてclass="mb-auto"を設定しています。(footer属性側にclass="mt-auto"としても同様のことができます。)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <style>
    /*例のため背景色付け*/
    body {background-color: silver;}
    header {background-color: green;}
    main {background-color: pink;}
    footer {background-color: red;}
  </style>
  <title>Sticky Footer</title>
</head>
<body class="d-flex flex-column" style="min-height: 100vh">
  <header>
    header
  </header>
  <main class="mb-auto">
    main
  </main>
  <footer>
    footer
  </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
</html>

なお、ビューポートやflexbox、マージンなど、CSS初心者には難しい部分もあると思いますが、どれも大事な要素なのでこの機会に是非学習してみてください。