AWS Client VPN
AWS Client VPNを使ってみる
【やること】
クライアントPCからプライベートサブネットのEC2にSSHで接続する。
【前提】
VPC（10.0.0.0/16）、EC2インスタンスは作成済み。
クライアント VPN の開始方法 - AWS クライアント VPN
1. 証明書作成
以下を参照し証明書を作成する。
2. キーをACMに登録する
- 証明書本文：server.crt
- 証明書のプライベートキ：server.key
- 証明書チェーン：ca.crt
クライアント証明書
3. クライアント VPN エンドポイントを作成
※VPCのCIDRは10.0.0.0/16
4. サブネット関連付け
作成しておいたVPC、サブネットを選択する。
しばらくすると使用可になる。
5. クライアントのネットワークへのアクセスを承認
VPCのCIDRを指定して、「すべてのユーザーにアクセスを許可する」を選択。
6. VPN接続
ダウンロードしたファイルの末尾に以下を追加。
cert C:/custom_folder/client1.domain.tld.crt
key C:/custom_folder/client1.domain.tld.key
VPNクライアントアプリで設定ファイルを読み込み。
接続後、IPアドレスが「クライアント IPv4 CIDR」に設定したネットワークのIPアドレス「192.168.0.34」が設定されていることがわかる。
7. EC2にSSH
料金
【参考】
AWS VPN接続の料金を2パターン紹介！メリットや注意事項も紹介 | ITエンジニアの派遣なら夢テクノロジー
React
目的
Reactの知識を深める。簡単なWebアプリ（EMSっぽい）を作成する。
Reactについて
SPA(Single-Page Application) を実現する JavaScript フレームワークの一つ。
アプリの構成
アプリ
・フロントソース
・APIサーバソース
ログイン画面
TOP画面
プロフィール画面
ユーザ一覧画面
関連技術
・Redux
Reduxとは、React.jsで使用するstateつまりアプリケーションの状態を管理するフレームワーク
参考：Reduxを分かりやすく解説してみた | フューチャー技術ブログ
・redux-saga
redux-sagaは「タスク」という概念をReduxに持ち込むための支援ライブラリ。
参考：redux-sagaで非同期処理と戦う - Qiita
・mongodb
データを非定型のデータ構造の集合体として管理する、ドキュメント指向データベースの一つ。
その他メモ
・Mongodb起動
C:\Users\ry071\Documents\source\server\express-api>mongod --dbpath ./db
・APIサーバ起動
ry071@DESKTOP-TNRJJVD MINGW64 ~/Documents/source/server/express-api/app
$ node app.js
・React起動
ry071@DESKTOP-TNRJJVD MINGW64 ~/Documents/source/React/react-sample-app
$ npm start
まとめ
Reactの知識を深めることができた。vue.jsのほうが分かりやすいと思う。
Selenium(WebDriver)
目的
Selenium(WebDriver)が何なのかを知る。実際に動かして知識を深める。
Selenium（WebDriver）とは
Seleniumはブラウザのオートメーションツール。自動でブラウザを操作することでWebサイトの動作のテストを行うことができる。
Selenium WebDriverは各種ブラウザごとにドライバが用意されいる。それらのドライバはJSON Wire ProtocolというSeleniumが定義しているRESTful API*に対応しており、このAPIにしたがってリクエストすることでブラウザを操作することができる。
とりあえず動かしてみる
１．まずはWebDriver for Chromeをダウンロード。
Downloads - ChromeDriver - WebDriver for Chrome
２．WebDriverを起動する。
$ ./chromedriver.exe
３．SessionIdを確認する。
実際には各言語のライブラリが使いやすいインターフェースを提供してくれるので不要。
$ curl -X POST -H "Content-Type: application/json" -d '{"desiredCapabilities":{"browser":"chrome"}}' http://localhost:9515/session
"sessionId":"af2a478154d6a7161822d2922e53e318"
４．特定のページを開く（Google）
$ curl -X POST -H "Content-Type: application/json" -d '{"url":"https://www.google.com/"}' http://localhost:9515/session/af2a478154d6a7161822d2922e53e318/url
Pythonで動かしてみる
１．seleniumモジュールをインストールする。
$ pip install selenium
２．サンプルソース
artist = "B'z"
album_list = ["ELEVEN", "BIG MACHINE", "ACTION", "MONSTER", "MAGIC"]
for i, album in enumerate(album_list):
if i > 0:
# 新しいタブ
# グーグルを開く
# 検索ワード入力
search_words = artist, album
search_box.send_keys(" ".join(search_words))
# 検索実行
search_box.send_keys(Keys.RETURN)
# 先頭のタブに戻る
３．実行
ブラウザが起動し、検索。
Python Webアプリフレームワーク
フレームワークDjangoを使ってサンプルアプリを作り、Seleniumを動かす。
ログインページでログインできることの確認をする。
Selenium（LiveServerTestCaseクラス）を使ったテストコード
from django.test import LiveServerTestCase
from django.urls import reverse_lazy
from selenium.webdriver.chrome.webdriver import WebDriver
class TestLogin(LiveServerTestCase):
@classmethod
def setUpClass(cls):
super().setUpClass()
cls.selenium = WebDriver(executable_path='C:/tool/chromedriver.exe')
@classmethod
def tearDownClass(cls):
cls.selenium.quit()
super().tearDownClass()
def test_login(self):
# ログインページを開く
self.selenium.get('http://localhost:8000' + str(reverse_lazy('account_login')))
# ログイン
username_input = self.selenium.find_element_by_name('login')
username_input.send_keys('XXXX@gmail.com')
password_input = self.selenium.find_element_by_name('password')
password_input.send_keys('XXXXXXXX')
self.selenium.find_element_by_class_name('btn').click()
# ページタイトルの検証
self.assertEqual('日記一覧 | Private Diary', self.selenium.title)
まとめ
実際に動かすことで、Selenium(Webdriver)について少し理解を深めることができた。
参考サイト
Dockerを使ってWebアプリを開発
目的
Dockerの知識を深める。また、勤怠管理アプリを作成し、Webアプリの知識も深める。
やることは以下。
１．勤怠管理アプリ（簡易）を作成する。（vue.js、java等で作る）
２．AWSのEC2にDockerをインストールし、Docker上で勤怠管理アプリを動かし公開する。
Dockerとは
Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。
Dockerは、Linuxのコンテナ技術を使ったもので、よく仮想マシンと比較されます。VirtualBoxなどの仮想マシンでは、ホストマシン上でハイパーバイザを利用しゲストOSを動かし、その上でミドルウェアなどを動かします。それに対し、コンテナはホストマシンのカーネルを利用し、プロセスやユーザなどを隔離することで、あたかも別のマシンが動いているかのように動かすことができます。そのため、軽量で高速に起動、停止などが可能です。
参考：https://knowledge.sakura.ad.jp/13265/
勤怠管理アプリ（簡易）の構成
勤怠管理アプリ（簡易）
【機能】
ログインし、日々の勤怠を登録できる。
管理者の機能は今回実装しない。
↓↓↓ ログインはこちらから（URLはまた変更します） ↓↓↓
【ソース】
Nuxt.jsを使用。
SpringBootで作成。java8。
このプロジェクトはdocker-compose.ymlのみ。
AWS 環境構築
EC2にDocker等をインストール
- インストール、起動
$ sudo yum update
$ sudo yum install -y docker
$ sudo service docker start
- ec2-userをdockerグループに追加
$ sudo usermod -a -G docker ec2-user
$ cat /etc/group |grep docker
- docker-composeインストール
$ sudo curl -L https://github.com/docker/compose/releases/download/1.21.0/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ docker-compose --version
- mavenインストール（spring bootのアプリを実行するため）
$ sudo wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel-apache-maven.repo -O /etc/yum.repos.d/epel-apache-maven.repo $ sudo sed -i s/\$releasever/6/g /etc/yum.repos.d/epel-apache-maven.repo $ sudo yum install -y apache-maven $ mvn --version
プロジェクトをクローンしたら以下も実施
chmod +x mvnw
Gitメモ（覚書）
・git init
・git remote add <任意のリポジトリ名> <追加したいpush先のリポジトリ>
・git push <任意のリポジトリ名> <ブランチ名>
まとめ
Dockerを使えば、コマンド１つでフロントエンド、バックエンド、DBを起動できるので慣れるとかなり楽かも。
