これは、このセクションの複数ページの印刷可能なビューです。 印刷するには、ここをクリックしてください.

このページの通常のビューに戻る.

Blog

Amazon EC2 で Nuxt.js 環境を構築する方法

Amazon EC2（Amazon Linux 2）に Nginx と Nuxt.js の環境を構築する手順を解説します。

はじめに

Amazon EC2 に Nuxt.js 環境を構築する手順を解説します。

環境

  • Amazon Linux 2 AMI (HVM), SSD Volume Type（無料枠）

Nginx のインストール

サーバーアプリケーションとして Nginx をインストールします。

インストール手順

# amazon-linux-extras で nginx を有効化
sudo amazon-linux-extras enable nginx1

# nginx をインストール
sudo yum -y install nginx

# nginx を起動
sudo systemctl start nginx.service

# OS 再起動時に自動起動する設定
sudo systemctl enable nginx

セキュリティグループの設定

AWS コンソールでセキュリティグループの HTTP（ポート 80）を許可します。

セキュリティグループ設定

設定が正しければ、EC2 のパブリック IP にアクセスすると Nginx のデフォルトページが表示されます。

Nginx デフォルトページ

Git のインストール

Nuxt.js プロジェクトをサーバーに配置するため、Git をインストールします。

# yum を最新の状態に更新
sudo yum update

# git をインストール
sudo yum install git

# インストール確認
git version

nvm（Node.js）のインストール

Node.js のバージョン管理ツール nvm をインストールします。

# システムを更新
sudo yum update

# nvm をクローン
git clone https://github.com/creationix/nvm.git ~/.nvm

# nvm を読み込み
source ~/.nvm/nvm.sh

パスの永続化

ログアウト後も nvm を使用できるよう、.bash_profile に設定を追加します。

vi ~/.bash_profile

以下を追記します:

# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
  source ~/.nvm/nvm.sh ;
fi

Node.js のインストール

# インストール可能なバージョン一覧を表示
nvm ls-remote

# Node.js をインストール（バージョンは適宜変更）
nvm install v14.10.1

Nginx の設定

Nginx をリバースプロキシとして設定し、Nuxt.js アプリケーション（ポート 3000）に転送します。

sudo vi /etc/nginx/nginx.conf

location / ブロックを以下のように編集します:

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

設定を反映するため Nginx を再起動します:

sudo systemctl restart nginx.service

Nuxt.js プロジェクトの配置

作成済みの Nuxt.js プロジェクトをサーバーに配置します。

# ホームディレクトリに移動
cd /home/ec2-user/

# プロジェクトをクローン
git clone <リポジトリURL> nuxt-project

# プロジェクトディレクトリに移動
cd nuxt-project

# 依存関係をインストール
npm install

# アプリケーションを起動
npm run start

まとめ

EC2 のパブリック IP にアクセスすると、Nuxt.js アプリケーションが表示されます。

本番環境では PM2 などのプロセスマネージャーを使用して、アプリケーションをバックグラウンドで実行することをお勧めします。

【DokuWiki】 Bootstrap3 Templateのタイトルをかっこよく編集する

はじめに

自分が運用している DokuWiki サイト(Bootstrap3 Template)がインデックスされるときに 【dokuwiki [タイトル]】と表示されるのは他とかぶってダサいし見づらい。 以下にバージョン【v2018-02-16】でのタイトルを変更してみた。 追記【v2019-05-22】での変更方法も挙げておきます。

サイト設定から修正する

Bootstrap3 Template を使うと管理画面から tpl»bootstrap3»browserTitle 【@TITLE@-@WIKI@】 を設定すると 【dokuwiki-タイトル】に修正できる ただこの方法だけだと名前空間を使用していた場合 【dokuwiki-first:second:third】と表示されてさらにダサくなる

ソースを修正する

以下のファイルを修正する 【dokuwiki フォルダ】/lib/tpl/bootstrap3/tpl_functions.php

18 行目あたり

include_once(dirname(__FILE__) . '/inc/simple_html_dom.php');

以下に修正する

include_once(dirname(__FILE__) . '/inc/parserutils.php');
include_once(dirname(__FILE__) . '/inc/simple_html_dom.php');

1308 行目あたり

return str_replace(array('@WIKI@', '@TITLE@'),
       array(strip_tags($conf['title']),　$browser_title),
       bootstrap3_conf('browserTitle'));

以下に修正する

$browser_title = p_get_metadata($ID,$key='title');

return str_replace(array('@WIKI@', '@TITLE@'),
       array(strip_tags($conf['title']), $browser_title),
       bootstrap3_conf('browserTitle'));

getBrowserPageTitle 関数の戻り値がそのまま Dokuwiki ページのタイトルとなる。

以上の変更で、ページの metadate から見出しを引っ張ってそのまま$browser_title を上書いてあげれば見出しがそのままタイトルとなる。つまり 【===== 見出し ======】 こういう見出しをページに設定していた場合 【dokuwiki-見出し】となる

注意しなければならないのは見出しを設定しないと dokuwiki- となってしまう 以上。

v2019-05-22 での対応方法 最近バージョンが上がったため、ソースの編集方法を変えてあげなければならなくなった。 と言ってもより簡単になったので、上の記載内容ができる人だったら問題にならないだろう。

【/lib/tpl/bootstrap3/Template.php】の 1308 に以下を追加してあげればいいだけだ。

$browser_title = p_get_metadata($ID,$key='title');

【Lambda + Boto3】AWSアカウント間でよりセキュアなSTS認証を行う

はじめに

STS とは AWS Security Token Service (AWS STS) を使用して、AWS リソースへのアクセスをコントロールできる一時的セキュリティ認証情報を持つ、信頼されたユーザーを作成および提供することができます。 アクセスキー認証情報と違いは以下の通りです。

  1. STS が発行する、認証情報は一時的なものであり、一定時間で消失します。(時間は数分から数時間まで設定可能)
  2. STS が発行する、認証情報はユーザーとともに保存されることはなく、ユーザーのリクエストによって提供されます。 IAM ユーザーが所有するアクセスキーをそのまま使用すると思いもよらない、セキュリティー事故が起こる可能性があります。 STS が発行する一時的なアクセスキーを持つユーザーを作成し、利用するほうが安全です。

以上を踏まえて、よりセキュアな別アカウントの情報を参照する Lambda を作成します。

参照先で AssumeRole を作成する

参照するテーブルの作成

AssumeRole とは STS の利用を許可するためのロールです。 IAM ロール作成に進んでください。

【アカウント ID】には連携先の AWS アカウントのアカウント ID を入力

このロールには DynamoDB のアクセス権限が欲しいため、 ポリシー【AmazonDynamoDBFullAccess】を選択

必要あれば入力してください。 今回は未入力です。

ロール名を適当に入力。 今回は【assumeRoleDynamoDB】とします。 これでロールの作成を行いましょう。

参照元で DynamoDB を作成

テスト用に参照する DyanmoDB を作成します。 名前は【sample_tbl】とします。

参照先で Lambda 関数を作成

以下コードを入力し、Lambda 関数を実行してみてください。

import boto3

def get_external_account_session():
   // 先ほど作ったロールのArnを入力
   role_arn = "arn:aws:iam::***********:role/assumeRoleDynamoDB"

   assume_role = boto3.client('sts').assume_role(
       RoleArn = role_arn,
       RoleSessionName = 'testSession'
   )

   session = boto3.session.Session(
       aws_access_key_id = assume_role.get('Credentials').get('AccessKeyId'),
       aws_secret_access_key = assume_role.get('Credentials').get('SecretAccessKey'),
       aws_session_token = assume_role.get('Credentials').get('SessionToken'),
       region_name = "us-east-1"
   )
   return session

def lambda_handler(event,context):
   external_session = get_external_account_session()
   external_dynamodb = external_session.client('dynamodb')
   external_table = external_dynamodb.scan(TableName = "sample_tbl")

   return external_table

以上です。

【Linux】URLエンコードされてしまったファイル名を修正する方法

URL エンコードとは

フォームでデータを送信する際に、application/x-www-form-urlencoded の仕様に 沿ってエンコードされる。
以下のようなパーセントと 16 進で変換されたもの修正する方法を記載する

テスト →%e3%83%86%e3%82%b9%e3%83%88

修正方法

以下を実行し、convmv をインストール

[example@123-45-67-89 ~]# sudo yum install convmv

修正対象ファイルが存在するか確認

[example@123-45-67-89 ~]# ls
%e3%83%86%e3%82%b9%e3%83%88.txt

convmv を実行

[example@123-45-67-89 ~]# convmv --notest --unescape ./%e3%83%86%e3%82%b9%e3%83%88.txt

デコードされたか確認

[example@123-45-67-89 ~]# ls
テスト.txt

おまけ

ディレクトリ内を再帰的にデコードする

[example@123-45-67-89 ~]# ls
%e3%83%86%e3%82%b9%e3%83%88.txt
%e8%a9%a6%e9%a8%93.txt

直下ディレクトリを再帰的にデコード

[example@123-45-67-89 ~]# convmv -r --notest --unescape ./*

デコードされたか確認

[example@123-45-67-89 ~]#
テスト.txt 試験.txt

以上です。

Amazon EC2 で Let'sEncrypt の証明書を取得する

はじめに

Amazon EC2 で LetsEncrypt でサーバー証明書を発行する必要があったため、備忘録として書き残しておきます。

Bolume Type は Amazon Linux 2 AMI (HVM), SSD Volume Type(無料枠) です。

certbot の取得

  1. wget で取得する
wget https://dl.eff.org/certbot-auto

2. 権限追加

chmod 700 certbot-auto

certbot-auto を Amazon Linux で使えるように修正

  1. 以下を検索し
elif [ -f /etc/issue ] && grep -iq "Amazon Linux" /etc/issue ; then
  Bootstrap() {
    ExperimentalBootstrap "Amazon Linux" BootstrapRpmCommon
  }
  BOOTSTRAP_VERSION="BootstrapRpmCommon $BOOTSTRAP_RPM_COMMON_VERSION"

2. 以下のように修正

 elif grep -i "Amazon Linux" /etc/issue > /dev/null 2>&1 || \
   grep 'cpe:.*:amazon_linux:2' /etc/os-release > /dev/null 2>&1; then
  Bootstrap() {
    ExperimentalBootstrap "Amazon Linux" BootstrapRpmCommon
  }
  BOOTSTRAP_VERSION="BootstrapRpmCommon $BOOTSTRAP_RPM_COMMON_VERSION"

3. コマンドで使えるように bin に移動する

sudo mv ./certbot-auto /usr/local/bin

4. certbot debug 起動 必要なモジュールとか入れてくれる

 certbot-auto --debug

実際に使ってみる

 certbot-auto certonly --standalone -t

エラーが出た場合は、web サーバーは停止してください

終わり

これで問題なく取得できたかと思います 以上です。

CentOS7 に PHP7 をインストールする方法

CentOS7 に PHP7 をインストールする手順を解説します。EPEL と Remi リポジトリを使用します。

はじめに

CentOS7 に PHP7 をインストールする手順を備忘録として残しておきます。

前提条件

  • CentOS 7 系のサーバー
  • root 権限または sudo 権限

リポジトリの追加

CentOS の標準リポジトリには PHP7 が含まれていないため、外部リポジトリを追加する必要があります。

EPEL リポジトリの追加

まず EPEL リポジトリを追加します。

sudo yum install epel-release

実行結果:

Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: mirrors.advancedhosters.com
 * extras: mirrors.advancedhosters.com
 * updates: mirrors.advancedhosters.com
...
Installed:
  epel-release.noarch 0:7-11

Complete!

Remi リポジトリの追加

次に、PHP の最新版が提供されている Remi リポジトリを追加します。

sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

実行結果:

Retrieving http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
warning: /var/tmp/rpm-tmp.BuE36r: Header V4 DSA/SHA1 Signature, key ID 00f97f56: NOKEY
Preparing...                          ################################# [100%]
Updating / installing...
   1:remi-release-7.6-2.el7.remi      ################################# [100%]

PHP7 のインストール

Remi リポジトリを有効にして PHP7 をインストールします。

# PHP 7.1 の場合
sudo yum install --enablerepo=remi,remi-php71 php

# PHP 7.4 の場合
sudo yum install --enablerepo=remi,remi-php74 php

インストール確認

PHP のバージョンを確認します。

php -v

まとめ

以上で CentOS7 への PHP7 のインストールは完了です。

Docker で Go 環境を作成する方法

Docker と docker-compose を使って Go（Gin フレームワーク）の開発環境を構築する手順を解説します。

はじめに

Docker を使って Go の開発環境を構築する手順を解説します。

前提条件

  • Docker がインストール済みであること
  • docker-compose が使用可能であること

Dockerfile の作成

作業ディレクトリを作成し、Dockerfile を作成します。

# ベースとなる Docker イメージ指定
FROM golang:latest

# コンテナ内に作業ディレクトリを作成
RUN mkdir /go/src/work

# コンテナログイン時のディレクトリ指定
WORKDIR /go/src/work

# Gin フレームワークをインストール
RUN go get github.com/gin-gonic/gin

# ホストのファイルをコンテナの作業ディレクトリにコピー
ADD . /go/src/work

# Go アプリケーションを起動
CMD ["go", "run", "main.go"]

docker-compose.yml の作成

同じディレクトリに docker-compose.yml を作成します。

version: '3'

services:
  app:
    build: .                    # Dockerfile があるディレクトリを指定
    tty: true                   # コンテナの起動を永続化
    volumes:
      - .:/go/src/work          # ホストとコンテナのディレクトリをマウント
    ports:
      - 8080:8080               # ポートマッピング

コンテナの起動

以下のコマンドを順番に実行します。

1. サンプルコードの取得

curl https://raw.githubusercontent.com/gin-gonic/examples/master/basic/main.go > main.go

2. Docker イメージのビルド

docker-compose build

3. コンテナの起動

docker-compose up -d

動作確認

ブラウザで http://localhost:8080 にアクセスして、Gin のサンプルページが表示されれば成功です。

まとめ

以上で Docker を使った Go 開発環境の構築は完了です。

dokuwiki-install

はじめに

プラグインが充実しており多機能で DB も不要な wiki ツール、Dokuwiki をインストールしてみた 。

前提

LAMP または LEMP 環境が作成済みであること。

Dokuwiki をダウンロードし配置

以下コマンドを実行

wget https://download.dokuwiki.org/out/dokuwiki-8a269cc015a64b40e4c918699f1e1142.tgz

tar -xzvf dokuwiki-8a269cc015a64b40e4c918699f1e1142.tgz

mv ./dokuwiki /ドキュメントルートへ

Dokuwiki のインストール

【サーバー IP/dokuwiki/install.php】にアクセスし下記をの画像を確認してください。パーミッションを設定していないためエラーが出ています。

ダウンロードした、dokuwiki ディレクトリに移動し、以下を実行

[example@123-45-67-89 dokuwiki]# chmod 777 conf
[example@123-45-67-89 dokuwiki]# chmod 777 data
[example@123-45-67-89 dokuwiki]# chmod 777 ./lib/plugins
[example@123-45-67-89 dokuwiki]# cd ./data
[example@123-45-67-89 data]# chmod 777 ./cache ./index ./locks ./media ./attic ./media_attic ./media_meta ./meta ./pages ./tmp

再度【サーバー IP/dokuwiki/install.php】にアクセスしてください。 以下の警告が表示されているかと思います。 これはユーザーに公開してはならないディレクトリが公開されていることで表示される警告です。非公開設定するべきディレクトリは以下の通りです。

  1. data
  2. conf
  3. bin
  4. inc
  5. vendor

apache サーバーの場合 /etc/httpd/conf/httpd.conf を編集します。 以下を追加

<Directory /var/www/html/dokuwiki>
   AllowOverride All
</Directory>

nginx サーバーの場合 /etc/nginx/conf/nginx.conf を編集します。

location ~ /(data|conf|bin|inc|vendor)/ {
  deny all;
}

以上が完了したら DokuWiki Installer で入力項目を記入し、Save を押下してください。以下の画面が表示されるはずです。

install.php を削除してくださいと書かれています。 【サーバー IP/dokuwiki】ディレクトリに移動し install.php を削除しましょう。

[example@123-45-67-89 dokuwiki]#rm -rf install.php

以上です。お疲れ様でした。

ESLint で JavaScript を自動整形する

ESLint と Google スタイルガイドを使って JavaScript コードを自動整形する方法を解説します。

はじめに

JavaScript で開発する際、コードスタイルのルールを統一することは重要です。ESLint を使用してコードを自動整形する方法を解説します。

使用するツール

  • パッケージ管理: npm
  • リンター: ESLint
  • スタイルガイド: eslint-config-google

Node.js のインストール

Node.js 公式サイト から Node.js をインストールし、npm を使用できる状態にしてください。

ESLint のインストール

作業ディレクトリで以下のコマンドを実行し、ESLint と Google スタイルガイドをインストールします。

npm install eslint eslint-config-google

ESLint の設定

作業ディレクトリに .eslintrc ファイルを作成し、以下の内容を記述します。

{
  "extends": ["google"],
  "rules": {
    "linebreak-style": ["error", "windows"]
  },
  "env": {
    "es6": true
  }
}

テストコードの作成

test.js というファイル名でテストコードを作成します。Google スタイルガイドでは、文字列にはシングルクォートを使用し、文末にはセミコロンが必要です。

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y
}
document.write(add("Hello", "World"));

ESLint で自動整形

以下のコマンドを実行すると、ルールに従ってコードが自動修正されます。

eslint --fix test.js

整形後のコード:

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y;
}
document.write(add('Hello', 'World'));

変更点:

  • 文末にセミコロン（;）が追加された
  • ダブルクォート（"）がシングルクォート（'）に変更された

まとめ

以上で ESLint による JavaScript コードの自動整形は完了です。

HTMLHintでHTML5を自動整形をしてみた

はじめに

HTML5 で開発していく上で、ある程度のルールは決めておく必要がある。 htmlhint を使用し、コード管理を自動化してみました。

  1. パッケージ管理ツール npm
  2. 使用モジュール htmllint prettier

node をインストール

nodeをインストールし npm を使用できる状態にしてください。

package.json 作成

作業フォルダ内で、以下コマンドを叩いてください。 対話式で聞かれる項目はすべてデフォルト状態で問題ないです。

npm init

以下が出力されます。

こんなのができます。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

htmlhint とルールとフォーマッターをインストールする 作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install htmlhint prettier

htmlhlint ルールを記述する

作業ディレクトリ内で、【.htmlhintrc】ファイルを作成し以下を記述する。

{
  "tagname-lowercase": true,
}

package.json を編集

以下を追記

"format": "prettier --write"
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "htmlhint": "^0.11.0",
    "prettier": "^1.18.2"
  }
}

テストコードを記述する

ファイル名は【test.html】とします。 htmlhint のルールとしてタグの大文字は許可されません。

<!DOCTYPE html>
<html>
<head>
  <META charset="UTF-8" />
  <title>HTML5サンプル</title>
</head>
<body>
  <p>HTML5で作成しました！</p>
</body>
</html>

npm run format test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTML5サンプル</title>
  </head>
  <body>
    <p>HTML5で作成しました！</p>
  </body>
</html>

以上です。

Lambda boto3で別アカウントのAWSを操作しよう

はじめに

Lambda boto3 で他 AWS の環境を簡単に操作する方法を記載します

参照元のアクセスキー ID とシークレットアクセスキーを取得

以下手順を実施

  1. AWS サービス【IAM】に移動
  2. ユーザー押下
  3. 【AdministratorAccess】ポリシーがアタッチされているユーザーを選択
  4. 認証情報タブを押下
  5. アクセスキーの作成
  6. アクセスキー ID をシークレットアクセスキーをメモ

参照元で dynamoDB 作成

テーブルを作成。 名前は【sample_tbl】とします。

参照先アカウントで Lambda 関数を作成

以下コード

import boto3

def get_external_dynamodb():
    client = boto3.client('dynamodb',
        aws_access_key_id=[アクセスキー ID],
        aws_secret_access_key=[シークレットアクセスキー] ,
        region_name=[リージョンコード]
    )
    return client

def lambda_handler(event, context):
    external_dynamodb = get_external_dynamodb()
    external_table = external_dynamodb.scan(TableName = "sample_tbl")
    return external_table

以上です

LAMP（Linux, Apache, MariaDB, PHP）環境を構築する方法

CentOS7 で LAMP 環境（Linux, Apache, MariaDB, PHP）を構築する手順を解説します。

はじめに

LAMP 環境を構築する手順を備忘録として残しておきます。

環境

  • CentOS 7

Apache のインストール

まず Apache がインストールされているか確認します。

httpd -v

インストールされていない場合は以下のように表示されます。

bash: httpd: command not found

Apache をインストールします。

sudo yum install httpd

バージョンを確認します。

httpd -v

Server version: Apache/2.4.6 (CentOS)
Server built:   Apr 24 2019 13:45:48

Apache の起動

ステータスを確認します。

service httpd status

起動していない場合は起動します。

sudo service httpd start

自動起動の設定

サーバー起動時に Apache も自動起動するよう設定します。

sudo systemctl enable httpd

Apache の動作確認

サーバーの IP アドレスにブラウザでアクセスし、Apache のデフォルトページが表示されることを確認します。

Apache デフォルトページ

Firewall の設定

ページが表示されない場合は Firewall が原因の可能性があります。

# Firewall の状態を確認
sudo firewall-cmd --state

running と表示された場合は HTTP を許可します。

# HTTP を許可
sudo firewall-cmd --zone=public --add-service=http --permanent

# 設定を反映
sudo firewall-cmd --reload

PHP のインストール

PHP がインストールされているか確認します。

php -v

CentOS7 の標準リポジトリでは PHP5.4 までしか提供されていません。最新版が必要な場合は CentOS7 に PHP7 をインストールする を参照してください。

sudo yum install php

Apache を再起動します。

sudo service httpd restart

PHP の動作確認

ドキュメントルート（通常は /var/www/html）にテストファイルを作成します。

sudo vi /var/www/html/phpinfo.php

以下の内容を記述します。

<?php
phpinfo();
?>

ブラウザで http://[IPアドレス]/phpinfo.php にアクセスし、PHP の情報ページが表示されることを確認します。

PHP info ページ

MariaDB のインストール

MariaDB をインストールします。

sudo yum install mariadb mariadb-server

バージョンを確認します。

mysql --version

mysql  Ver 15.1 Distrib 5.5.60-MariaDB, for Linux (x86_64) using readline 5.1

MariaDB の起動

sudo service mariadb start

MariaDB の動作確認

MariaDB にログインします（初期状態ではパスワードは空です）。

mysql -u root -p

テスト用のデータベースを作成します。

CREATE DATABASE db_name;

データベース一覧を確認します。

SHOW DATABASES;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| db_name            |
| mysql              |
| performance_schema |
+--------------------+

まとめ

以上で LAMP 環境の構築は完了です。

NginxサーバーのwebサイトををLet’sEncryptでHTTPS化してみた

はじめに

自サイトを HTTPS 通信できるようにしたかったので、 無料で証明書を発行してくれる Let’s Encrypt を使用して みました。

環境

  1. CentOS 7
  2. nginx

Let’s Encrypt のインストール

  1. git を使用するので、install していない場合は、install してください
[user@123-45-67-89 ~]# sudo yum install git

Letsencrypt をインストール

[user@123-45-67-89 ~]#git clone  https://github.com/letsencrypt/letsencrypt.git

[user@123-45-67-89 ~]# cd letsencrypt

[user@123-45-67-89 letsencrypt]# ./letsencrypt-auto --help

証明書を発行する

[user@123-45-67-89 letsencrypt]# ./letsencrypt-auto certonly --standalone -d 【所有しているドメイン名】

以下エラーが出た場合

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator standalone, Installer None
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for example.com
Cleaning up challenges
Problem binding to port 80: Could not bind to IPv4 or IPv6.

http サーバを起動してる場合起きるエラーです。下記コマンドで nginx を停止しましょう。apache を使用している場合も同様に停止してください。

nginx -s stop

再度実行

[user@123-45-67-89 letsencrypt]# ./letsencrypt-auto certonly --standalone -d 【所有するドメイン】
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator standalone, Installer None
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for wiki.ricedoc.com
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/【所有するドメイン】/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/【所有するドメイン】/privkey.pem
   Your cert will expire on 2019-08-08. To obtain a new or tweaked
   version of this certificate in the future, simply run
   letsencrypt-auto again. To non-interactively renew *all* of your
   certificates, run "letsencrypt-auto renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

証明書が発行されたか確認しましょう。 以下ディレクトリが存在していたら成功です。

/etc/letsencrypt/live/【所有するドメイン】/

nginx.conf の編集

[user@123-45-67-89 letsencrypt]# vi /etc/nginx/nginx.conf

以下を追加してください。

server {
    listen 443 ssl;
    server_name 【所有するドメイン】;
    ssl_certificate      /etc/letsencrypt/live/【所有するドメイン】/fullchain.pem;
    ssl_certificate_key  /etc/letsencrypt/live/【所有するドメイン】/privke
y.pem;
}

ファイアーウォールの設定

ファイアーウォールが https を許可するように設定します。

[user@123-45-67-89 letsencrypt]# firewall-cmd --add-service=https --zone=public --permanent
[user@123-45-67-89 letsencrypt]# firewall-cmd --reload

サイトに https でアクセスできるか確認してください。
以上です。お疲れ様でした。

node.jsでDynamoDBのデータを取得する方法まとめてみた

はじめに

個人で DynamoDB を使う機会があり、node で操作する方法が AWS のドキュメントだとわかりづらかったため自分なりに修正してコーディングしてみました。

aws の DynamoDB に保存されているデータを取得するとき、色々な方法があったので個人的によく使う物を以下にまとめておきます。

getItem()を使って個別に取得する方法

一番簡単なデータ取得方法です。

パーティションキーを指定して、一件だけデータを取得できます。 ログインユーザー情報などを取得するときに使えばいいのかなと思います。

ただパーティションキーだけしか指定できないため、使い勝手はあまりよろしくない。

以下の例では id をパーティションキーとして使います。

const dynamodb = new AWS.DynamoDB({ region: "ap-northeast-1" });

router.get("/get", (req, res, next) => {
  const params = {
    TableName: "user",
    Key: {
      id: { S: 1 }
    }
  };
  dynamodb.getItem(params, function(err, user) {
    const user = {
      id: "",
      name: "",
    };
    user.id = user.Item.id.S;
    user.name = user.Item.name.S;
    res.json(user);
  });
});

batchGetItem()でまとめデータを取得する方法

getItem があるんだから getItems もあるだろうと思ったのんですが、ありませんでした。

代替として、batchGetItem があったのでこれを使いましょう。

こちらもパーティションキーを指定しますが、getItem とは違い配列で送った値に相当するデータを返してくれます。

以下例です。先ほどと同じで id がパーティションキーです。

const dynamodb = new AWS.DynamoDB({ region: "ap-northeast-1" });

router.get("/batchGet", (req, res, next) => {
  const keys = [{id:{S:'1'}},{id:{S:'2'}},{id:{S:'3'}}];
  const params = {
    RequestItems: {
      user: {
        Keys: keys
      }
    }
  };
  dynamodb.batchGetItem(params, function(err, data) {
    data.Responses.user.forEach(function(element, index, array) {
      questions.push({
        id: element.id.S,
        name: element.name.S
      });
    });
    res.send(questions);
  });
});

Query()で細かい検索抽出を行う方法

個人的にこれがよく使う関数です。

前二つで紹介した getItem と batchGetItem の問題点は、パーティションキーでしか検索をかけられず、テーブル内の別キーで検索をかけたくてもできないのがつらいところでした。。

Query を使用して、セカンダリインデックスのパーティションキーで検索かけたら幸せになれそうです。

以下例です。

const dynamodb = new AWS.DynamoDB({ region: "ap-northeast-1" });

router.get("/query", (req, res, next) => {
  params = {
    TableName: "user",
    IndexName: "name-index",
      KeyConditionExpression: "#attrName = :attrValue",
      ExpressionAttributeNames: {
        "#attrName": "name"
      },
      ExpressionAttributeValues: {
        ":attrValue": { S: "Sakuraba" }
      }
    };
  }
  dynamodb.query(params, function(err, user) {
    return res.send(user.Items);
  });
})

終わりに

AWS のドキュメントを見ると他に抽出する方法はありますが、個人的に使うのが上の 3 つです。

見た感じそこまで複雑ではないので初心者の方にもとっつきやすいかと思います。

DynamoDB を利用するとメンテナンスが容易でデメリットよりメリットのほうが多いです。

ぜひ使いこなせるようになっておきたいものです。

以上です。

PHPのライブラリ管理ツールComposerをインストールしてみた

初めに

PHP のライブラリ管理ツール Composer をインストールしたので備忘録として残しておきます。 参考: 　composer 公式サイト

環境

  1. Linux(CentOS)
  2. PHP7.0.33
  3. Apache

インストーラーをダウンロードします。

[user@123-45-67-89 ~]# php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
[user@123-45-67-89 ~]# ls
composer-setup.php

インストーラーのチェック

問題ないとは思いますが、 インストーラが有効なものかチェックします。 【Installer verified】が表示されたら問題ないです。

[user@123-45-67-89 ~]# php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Installer verified

インストーラーを実行

インストーラーを実行し、【composer.phar】が出力します。

[user@123-45-67-89 ~]# php composer-setup.php
All settings correct for using Composer
Downloading...

Composer (version 1.8.5) successfully installed to: /home/centos/composer.phar
Use it: php composer.phar

[user@123-45-67-89 ~]# ls
composer.phar composer-setup.php

グローバルでコマンド実行できるように設定

composer.phar がちゃんと実行されるか確認する

[user@123-45-67-89 ~]# php composer.phar
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.8.5 2019-04-09 17:46:47

Usage:
  command [options] [arguments]

~~~~~~~~~
~~~~~~~~~
  validate             Validates a composer.json and composer.lock.
  why                  Shows which packages cause the given package to be installed.
  why-not              Shows which packages prevent the given package from being installed.

問題がないことを確認出来たら、bin ディレクトリに composer.phar を移動します。

[user@123-45-67-89 ~]# sudo mv composer.phar /bin/composer

composer コマンドが使えるか確認

[user@123-45-67-89 ~]# composer
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.8.5 2019-04-09 17:46:47

Usage:
  command [options] [arguments]

~~~~~~~~~
~~~~~~~~~
  validate             Validates a composer.json and composer.lock.
  why                  Shows which packages cause the given package to be installed.
  why-not              Shows which packages prevent the given package from being installed.

最後に

必要なくなったインストーラーを削除します。

php -r "unlink('composer-setup.php');"

以上です。お疲れ様でした。

spreadsheet

初めに

インストール方法を紹介する前に、以下の記事を参考に php7 系と Composer がインストールされている Linux 環境を準備してください。

https://wiblok.com/blog/it/composer-install/

必須ライブラリのインストール

以下コマンドを実行し PhpSpreadsheet で必須のライブラリをインストールしてください。

[user@ip-123-45-67-891 ~]$ sudo yum --enablerepo=emi,remi-php72 install -y php-xml php-gd php-mbstring php-zip

phpSpreadsheet のインストール

以下コマンドを実行し PhpSpreadsheet をインストールしてください。

[user@ip-123-45-67-891 ~]$ sudo composer require phpoffice/phpspreadsheet

以下コマンドで vendor ディレクトリが作成されていることを確認してください。

[user@ip-123-45-67-891 ~]$ ls
vendor

php と composer の設定さえできていれば割と簡単にインストールできちゃうと思います。

サンプルを動かしてみる

では公式サイトで公開されているサンプルを動かしてみましょう。 PhpSpreadsheet 公式

[user@ip-123-45-67-891 ~]$ sudo vi HelloWorld.php
<?php

require 'vendor/autoload.php';

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

$spreadsheet = new Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
$sheet->setCellValue('A1', 'Hello World !');

$writer = new Xlsx($spreadsheet);
$writer->save('hello world.xlsx');

以下コマンドで実行します。

[user@ip-123-45-67-891 ~]$ sudo php HelloWorld.php

HelloWorld.php を実行すると同ディレクトリに hello world.xlsx が作成されることを確認してください。

[user@ip-123-45-67-891 ~]$ ls
hello world.xlsx vendor

以上です。お疲れ様でした。

StyleHintでCSS を自動整形する

はじめに

CSS で開発していく上で、ある程度のルールは決めておく必要がある。
stylelint を使用し、コード管理する。
コードルールは stylelint-config-standard を使用する。

  1. パッケージ管理ツール npm
  2. 使用モジュール stylelint prettier
  3. 使用ルール stylelint-config-standard

node をインストール

nodeをインストールし npm を使用できる状態にしてください。

package.json 作成

作業フォルダ内で、以下コマンドを叩いてください。
対話式で聞かれる項目はすべてデフォルト状態で問題ないです。

npm init

package.json ができます。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

stylelint とルールとフォーマッターをインストールする 作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install stylelint stylelint-config-standard prettier

stylelint ルールを記述する

作業ディレクトリ内で、【.stylelintrc】ファイルを作成し以下を記述する

{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "double"
  }
}

package.json を編集する

scripts に以下を追記してください。

"format": "prettier --write"
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "prettier": "^1.18.2",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0"
  }
}

テストコードを記述する ファイル名は【test.css】とします。 stylelint-config-standard のルールだとインデントは 2 以外を 追加ルールとして”は許されていません。

.add {
    content: 'x';
}

整形する

以下コマンドを実行し、ルール通りに修正されるか確認してください。

npm run format test.css

.add {
  content: "x";
}

終わり

ファイルのインデントが修正されたら完了です。 お疲れ様です。

Vagrant で Ruby on Rails 環境の作成する方法

はじめに

以下記事を確認し、Ruby 環境を作成してください。
https://wiblok.com/blog/it/vagrant_ruby/

必要なモジュールをインストール

sudo apt-get update
sudo apt-get -y install git curl g++ make
sudo apt-get -y install zlib1g-dev libssl-dev libreadline-dev
sudo apt-get -y install libyaml-dev libxml2-dev libxslt-dev
sudo apt-get -y install sqlite3 libsqlite3-dev nodejs

Rails インストール

gem install rails

以上です。

VagrantでRuby環境を作成する方法

はじめに

Ruby 環境を作成するとき、配布もバックアップも容易な Vagrant を 使用することをお勧めします。
やること

  1. VirtualBox のインストール
  2. 仮想化ソフトの VirtualBox をインストールします。
  3. 使用バージョンは 6.0.8 公式サイトから VirtualBox インストール

Vagrant のインストール

VirtualBox の設定や機能を簡単に使えるようにしたコマンドツールである Vagrant をインストールします。 使用バージョンは 2.2.5 公式サイトから Vagrant インストール

Linux 環境を作成

Vagrant コマンドを使用し、環境を作成します。 コマンドラインツールで以下を入力してください。 Windows に標準で入っているコマンドプロンプトでもかまいません。

# 作業フォルダ作成
C:\Users\> mkdir ruby_env
# 作業フォルダに移動
C:\Users\> cd ruby_env
# vagrantファイル作成
C:\Users\ruby_env> vagrant init bento/ubuntu-18.04
# 環境を作成し、起動
C:\Users\ruby_env> vagrant up
# 環境にSSHログイン
C:\Users\ruby_env> vagrant ssh　

RVM インストール

Ruby のバージョン管理ツール RVM をインストールします。 そのまま Ruby をインストールしてもかまわないですが、Ruby のバージョンを柔軟に変更できるようにしておいたほうがよいでしょう。 環境に SSH ログインした後以下を実行してください。 参考

gpg キー取得 公式

vagrant@vagrant:~$ gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

RVM[安定板]インストール

vagrant@vagrant:~$ \curl -sSL https://get.rvm.io | bash -s stable --ruby

インストールしただけですと、RVM が使用できないので以下を実行し再起動してください。

環境のログアウト

vagrant@vagrant:~$ exit

VirtualBox の再起動

C:\Users\ruby_env> vagrant reload

もう一度 SSH ログインを行い、RVM コマンドで最新の ruby をインストールします。

環境に SSH ログイン

C:\Users\ruby_env> vagrant ssh

最新の安定板 ruby をインストール

vagrant@vagrant:~$　rvm install ruby --latest

環境のログアウト

vagrant@vagrant:~$　exit

VirtualBox の再起動

C:\Users\ruby_env> vagrant reload

以上で環境は完成しました。 もう一度環境に入り ruby コマンドを実行してみてください。

終わりに

以下のコマンドを実行し、ruby を確認してください。

環境に SSH ログイン

C:\Users\ruby_env> vagrant ssh

Ruby バージョン確認

vagrant@vagrant:~$ ruby --version
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

以上です。

VirtualboxをVagrantで賢く使う方法

Virtualbox とは

既存ホスト OS 上に別のゲスト OS を起動することができる仮想化アプリケーションです。

簡単に書くと、自分の PC 上に別の PC を起動できるアプリケーション。

利点としては、Windows OS 上で LinuxOS を使うことができ、 以下のような機能があります。

  1. スナップショット機能(バックアップ)
  2. シームレス・モード(ホスト OS とゲスト OS での同時並行作業)
  3. 共有フォルダ(ホスト OS とゲスト OS 間でのファイル共有)
  4. クリップボード共有

Vagrant とは

Virtualbox でゲスト OS(仮想環境)を作成を簡単にかつ管理しやすく 再配布を用意にしてくれる CLI ツールです。

Virtualbox をインストール

VirtualBox を公式サイトからダウンロードしてインストール　 virsion は 6.0.6

デフォルトで以下のフォルダにインストールされる “C:\Program Files\Oracle\VirtualBox\VirtualBox.exe”

Vagrant をインストール

Vagrant を公式サイトからダウンロードしてインストール virsion は 2.2.4

以下コマンドでインストールされたか確認する(Git Bash)を使用

user MINGW64 ~/
$ vagrant --version
Vagrant 2.2.4

Vagrant Box のインストール

Vagrant Box とは、仮想マシンのテンプレートとなるファイルです。 他社と共有するときはこの Box ベースで仮想環境を共有します。 試しに他者が構築した CentOS 環境の Vagrant Box をインストールして使ってみます。

$ vagrant box add centos/7
==> box: Loading metadata for box 'centos/7'
    box: URL: https://vagrantcloud.com/centos/7
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.

1) hyperv
2) libvirt
3) virtualbox
4) vmware_desktop

Enter your choice: 3

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

仮想環境の起動

では、実際に Vagrant Box を起動してみます。

作業フォルダの作成

user MINGW64 ~/
$ mkdir local
$ cd local

Vagrant の設定ファイル作成

$ vagrant init centos/7

$ vagrant init centos/7
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! please read

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ファイルが作成されたか確認

$ ls
Vagrantfile

Virtualbox 起動 以下で仮想環境が立ち上がります。

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
===> default: Importing base box 'centos/7'...
===> default: Matching MAC address for NAT networking...


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ゲスト OS に接続

最後に仮想環境に接続してみましょう！！。

$ vagrant ssh
[vagrant@localhost ~]

以上です。お疲れ様でした。

WordPressプラグインYadaWikiを使ってみた

はじめに

WordPress で簡単な wiki サイトを使ってみたいと思い、人気の高い YadaWiki をインストールして使ってみました。

なぜ YadaWiki なのか

  • プラグインであること
    私自身が使いたいテーマがあり、Wiki テーマだとそれが使えないから
  • 無料で使えること
    お金がないから
  • サポート体制が充実されていること
    開発者の dmccan さんが、記事作成時点ではすべての問題に答えてくれており、サポートされていると判断

  • 定期的にアップデートされていること
    記事作成時点では、二か月前に更新されておりました。
  • ユーザーからの評価が高い
    以下の画像の通り高評価でした。

YadawWiki の特徴

このプラグインをインストールするだけで、使用しているテーマをそのままに、新しいインデックスを作成し、その下に wiki ページを作成できます。

さらに wiki ページはカスタムタグとカテゴリに分けることができ、目次オプションも提供してくれるので、サイトの利便性を向上させることができます。

サイトエディタには、2 つのショートコードボタンが提供されます。 Wiki のリンクを追加するボタンと Wiki リスト追加ボタンです。 ブログサイトから Wiki サイトに飛ばす際に活用しましょう!

使ってみた感想

上述の通り使いやすいプラグインなのですが、私の使っているテーマと相性が悪かったのか、バグが出まくりました。

一応対応できる内容だったので修正はできたのですが、PHP の知識がないと、厳しいかもしれないです。 デフォルトで入っているテーマでしたら問題なく運用できるので、 このプラグインを使いたい人はそちらでの運用をお勧めします。

他に少し気になったのが、Wiki 内で検索機能はそのままでは使えないです。 頑張ればできるらしいです。 今回は緊急の内容ではなかったので私は試していません。

ですが PHP の多少の知識がある方ならば、利用することでサイトを簡単に wiki 化できる素晴らしいプラグインだと思います。興味がある方はぜひ使ってみましょう！

クラウドプラットフォーム(AWS vs Azure vs GCP)比較

Linux の centos7 に PHP をインストールする必要があったため備忘録として挙げておきます。

概要

クラウドプラットフォームの採用は、新機能の導入・コストの削減・拡張性の向上のため様々な企業・案件で採用されてきました。
また個人でも使用する人が増えてきており、昨今のビジネスのスタートアップを推進してきました。
この状況からかオンプレミス（自社設備）から、クラウドに移行するという会社も少なくないです。

クラウドプラットフォームは基本的に、インターネットを通じて、サーバーやストレージ、データベース、ソフトウェアなどの開発を手助けするサービスが提供されており、それぞれの会社が提供するクラウドプラットフォームで値段や機能、利便性が違います。

ここでは、それぞれのクラウドプラットフォームを比較し、あなたのプロジェクトにとって最良の選択肢を紹介します。

AWS(Amazon Web Service)

Amazon が提供するクラウドプラットフォームです。

クラウドプラットフォームの元祖であり、2004 年に登場してからシェア率トップを維持してきた巨大なクラウドプラットフォームです。
現在でも様々な選択肢が増えてきたにも関わらずシェア率は 30%を超えています。

クラウドプラットフォームのデファクトスタンダートといえるサービスであり、
幅広い開発要件に対応できるのが強みです。とりあえず候補に入れるべき存在です。

メリット

  1. デファクトスタンダード
    クラウドプラットフォームのデファクトスタンダードであり、ドキュメントも豊富です。調べれば大概の不具合は解決できます。
  2. 日本で 2 つのリージョン提供
    日本だけのメリットですが、東京・大阪リージョンを提供しています。これにより日本で公開するサービスにおいて速度向上のメリットが受けられます。
  3. 豊富なサービス
    AWS で提供されていなくて他のクラウドプラットフォームで提供されているサービスはほぼないです。開発要件にあったサービスが必ずあります。
  4. 豊富なドキュメント
    ドキュメントが豊富なことです。

デメリット

  1. ハイブリッドクラウド戦略を無視
    オンプレミスとクラウドを使用を同時に使用する戦略をハイブリッドクラウドと呼ぶのですが、AWS はそれを認めていません。もしあなたがオンプレミスも同時に運用したいというのであれば、AWS は少し難しい選択肢になると思われます。
  2. 管理が難しい
    AWS 自体様々なサービスがあり、それをどのように組み合わせて使うかは技術者の手にゆだねられます。しかし多くの場合、一人で管理することが難しくどのようなサービスが使用されているか管理者も理解できなくなってくるでしょう。例えば EC2 で WEB サービスを公開したい場合を例に出してみると、EC2 管理画面で Elastic IP を取得し、Route53 でドメイン登録、DB を使用する場合は RDS を契約し紐づけたりします。単純な WEB サービスを公開するだけでもこれほど必要な操作が多いですが、Lambda で静的サイトを作ろうとしたときもっと大変になることが予想されるかと思います。そのため、クラウドプロバイダーなど AWS を使うことに消極的です。

Azure(MicrosoftAzure)

Azure は、Microsoft が運用・開発を行っているクラウドプラットフォームです。AWS と比較して大きな魅力は、組織的にクラウド以降を支援してくれています。あなたがオンプレで Windows システム(Windows Server、SystemCenter、ActiveDirectory)を利用しておりかつ、クラウドに移行したいと考えている場合、非常に協力な選択肢となります。

またシェア率自体は AWS に負けていますが、ゴールドマンサックスの調査によると、上位の IT エグゼクティブにアンケート調査を実施した結果、Azure のほうが人気でした。

メリット

  1. 22,500 円分の無料リソース
    最初にクラウドを試す段階で、料金がかかってしまうのが気になるかと思います。Azure だと最初にアカウントを作成してから一か月間の間、無料で 22,500 円分のリソースを使用することができます。
  2. ハイブリットクラウドに強い
    Microsoft がハイブリッドクラウドをサポートしています。必要な時に必要なだけサポートを受けることができます。

デメリット

  1. 頻繁に起こる大規模なサービス停止
    Azure は割と頻繁にサービスが停止しています。Twitter の報告量からも見て取れるかと思います。日本で同じ月に三回の障害で発生したことがあります。
    1. 2017 年の 3 月 8 日に東日本リージョンにおいて 2 時間、ストレージの障害
    2. 2017 年の 3 月 28 日に西日本リージョンにおいて 3 時間に渡って仮想マシンの障害
    3. 2017 年に 3 月 31 日に東日本リージョンにおいて、仮想マシンやストレージなど、Azure の殆どのサービスがダウン

GCP(Google CloudPlatform)

AWS や Azure のシェア率には及びませんが、人気のクラウドプラットフォームです。
開発・運用は Google が行っており、非常に安定性があります。

GCP は、Google が開発しているビッグデータ解析ツールや機械学習プロジェクトなどをサービスと指定利用でき、それらを利用してプロジェクトを運用したい場合は非常に強力な選択肢となります。

メリット

  1. ビッグデータの解析
    GCP は、Google の検索エンジンの技術力をもっており、それはビッグデータの解析に役立てらています。

デメリット

ワイヤフレームとは

Webデザインにおけるワイヤフレームの基本と作成時のポイントを解説します。

ワイヤフレームとは

ワイヤーフレームとは、コストと再現度が最も低いデザイン表現です。主に以下の構造要素で構成されています。

  1. コンテンツのグループ - 情報のまとまり
  2. コンテンツの配置 - レイアウト構成
  3. コンテンツの説明とインターフェース同士の関係 - 要素間の繋がり

ワイヤーフレームを作るメリット

1. 情報の整理ができる

  • レイアウト設計: コンテンツの配置をあらかじめ整理できる
  • コンテンツ計画: 表示する情報（画像・文章など）を事前に整理できる

2. 認識合わせができる

エンジニア・デザイナー・クライアント間のコミュニケーションツールとして活用でき、認識のずれを防ぎます。結果的に工数の短縮にも繋がります。

3. アイディア出しの土台になる

スタートアップ時のたたき台として、素早くアイディアを形にできます。

ワイヤフレーム作成時の注意点

色について

  1. 不適切な色を使用しない - ワイヤフレームはカラフルである必要がない
  2. グレーの濃淡を活用 - 階層を視覚的に表現する
  3. 画像やアイコンは常にグレー - 視覚的に目立たせない
  4. テキストは読みやすく - 適切なコントラストを確保する
  5. 機能的な色は使用可能 - リンクは青、アラートは赤、確認は緑、警告は黄色
  6. 黒は避ける - 境界線に黒を使うとワイヤフレームが乱雑になる

デザインについて

  1. デザインを凝りすぎない - シンプルに保つ
  2. 醜い画像・アイコン・奇抜なフォントは使用しない
  3. 実際のサイズを使用する - 例: スマートフォンは 375px、タブレットは 768px など

コミュニケーションについて

  1. 他の人が理解できない記号やコードは記載しない
  2. 理解しやすいアフォーダンスを意識する

ワイヤフレーム作成前に知っておくべきこと

  1. ドキュメントを記載する - アラートやモーダルなど、小さな UI 要素についても説明を書く
  2. メイン画面から作成する - 主要なデザインコンポーネントは他箇所でも再利用される可能性が高く、手戻りが少ない
  3. 状態変化は画面を分けて記載 - ホバー、クリック後など、状態が変わる場合は別画面として表現する

Boto3 で AWS サービス(DynamoDB)の設定を確認する方法

Boto3 とは、AWS が提供している Python ライブラリのことで DynamoDB や S3 等の AWS が提供する様々なサービスの 設定を行うことができます。 使い方によっては開発環境から本番環境への設定をそのまま移行することができるため インフラの設定が容易になるでしょう。

はじめに

Boto3 とは、AWS が提供している Python ライブラリのことで DynamoDB や S3 等の AWS が提供する様々なサービスの 設定を行うことができます。 使い方によっては開発環境から本番環境への設定をそのまま移行することができるため インフラの設定が容易になるでしょう。

今回は Boto3 を活用し、DyanmoDB のデータ内容を確認するところまで行います。

参照するテーブルの作成

Boto3 を使ってみる

Lambda で boto3 が使えるので Lmabda を使います。 関数名は何でもいいですが今回は【watchDynamoDBData】としました。 Python3.7 で作成してください。

実行ロールは DynamoDB にアクセスできる権限を設定している ロールを使用してください。 設定できていない場合、Lambda 実行時に AccessDeniedException と怒られます。

作成した関数を以下のように編集してください。

import boto3

def lambda_handler(event, context):
client = boto3.client('dynamodb')

TableName には、確認したいテーブル名を入力

table = client.scan(TableName = "sample_tbl")
return table

テストイベントを設定し、実行してください。 以下のように出力されたら成功です。

Response:
{
  "Items": [
    {
      "sample_key": {
      "S": "sample_data"
    }
  ]
},
～～～～～～～～～～
～～～～～～～～～～

以上です。お疲れ様です。