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

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

Blog

Amazon EC2 で vue.js(nuxt) 環境構築してみた

初めに

Amazon EC2 にて nuxt 環境を構築したときの手順を載せておきます。
Bolume Type は Amazon Linux 2 AMI (HVM), SSD Volume Type(無料枠) です。

nginx インストール

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

  1. yum install の有効化
    sudo amazon-linux-extras enable nginx1
  2. nginx のインストール
    sudo yum -y install nginx
  3. nginx の起動
    sudo systemctl start nginx.service
  4. OS 再起動時に nginx を起動する設定を追加 sudo sudo systemctl enable nginx
  5. セキュリティーグループで http を許可する。

ここまで問題なければ以下が表示されます。

Git インストール

Git をインストールします。nuxt プロジェクトをサーバーに置くための方法として無難かと思います。他方法でやりたい人はお好みで nuxt プロジェクトを取り込んでください。npx を使う方法でもいいのかと思います。

  1. 下記コマンドを実行して yum を最新の状態にする。
    sudo yum update
  2. 下記コマンドを実行して git のパッケージをインストールする。
    sudo yum install git
  3. 下記コマンドを実行して git のインストールを確認する。
    git version

nvm(node.js) インストール

  1. yum コマンドでシステムのアップデート
    sudo yum update
  2. GitHub から nvm をクローンします
    git clone https://github.com/creationix/nvm.git ~/.nvm
  3. nvm へパスの通す
    source ~/.nvm/nvm.sh
  4. nvm コマンドへのパスの設定
    このままではログアウトすると、nvm へのパスがリセットされ nvm コマンドが使用できなくなり、その度に、パスを設定しなおさなくてはなりません。そこで、Linux にログインしたときに実行される.bash_profile に設定を書き込みます。 ユーザのホームディレクトリにある .bash_profile (/home/ec2-user/.bash_profile) を vi エディタで開きます。
  5. 以下テキスト追加

nvm

if [[ -s ~/.nvm/nvm.sh ]] ; then
  source ~/.nvm/nvm.sh ;
fi
  1. インストール可能な Node.js のバージョン一覧を表示します
    nvm ls-remote
  2. node をインストール
    ここでは最新をインストールします。 nvm install v14.10.1

nginx のルートを Nextjs アプリケーションが稼働するローカルサーバーに設定します

  1. /etc/nginx/nginx.conf を編集し、proxy_pass に http://localhost:3000; を設定する
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
  worker_connections 1024;
}

http {
  log_format main '$remote\_addr - $remote\_user \[$time_local\] "$request" '
                      '$status $body\_bytes\_sent "$http_referer" '
  '"$http\_user\_agent" "$http_x_forwarded_for"';

  access\_log  /var/log/nginx/access.log  main;

  sendfile            on;
  tcp\_nopush          on;
  tcp\_nodelay         on;
  keepalive\_timeout   65;
  types\_hash\_max\_size 2048;

  include             /etc/nginx/mime.types;
  default\_type        application/octet-stream;

  # Load modular configuration files from the /etc/nginx/conf.d directory.
  # See http://nginx.org/en/docs/ngx\_core\_module.html#include
  # for more information.
  include /etc/nginx/conf.d/\*.conf;
  server {
    listen       80 default\_server;
    listen       \[::\]:80 default\_server;
    server\_name  \_;
    root /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/\*.conf;

    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;
    }

    error\_page 404 /404.html;
      location = /40x.html {
    }
    error\_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}
  1. nginx の再起動
sudo systemctl start nginx.service

プロジェクトを配置

作成済みの nuxt.js を/home/ec2-user に配置する

  1. 移動
cd /home/ec2-user/
  1. git クーロン
git clone 'nuxt-project'
  1. npm install
npm install
  1. nuxt start
npm run start

終わりに

これで ec2 のグローバル ip にアクセスすると表示されたかと思います。 以上です。

【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系にPHPバージョン7をインストールする方法

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

初めに

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

リポジトリの追加

何も準備していない状態で yum install を試みても、centOS の標準リポジトリでは php7 はありません。そのため外部のリポジトリを使う必要があります。

EPEL リポジトリを追加し、php が常に最新に更新され提供されている Remi リポジトリを順番に追加しましょう。

EPEL リポジトリの追加 以下コマンドを実行し、EPEL リポジトリを追加してください。

[user@ip-123-45-67-891 ~]$ 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 リポジトリの追加

以下を実行し Remi リポジトリを追加してください。

[centos@ip-172-31-21-151 ~]$ 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%]

最新の PHP をインストールする

試しに 2019 年 05 月 20 日、現在最新の PHP7.2 をインストールしてみます。

yum install --enablerepo=remi,remi-php71 php

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

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

初めに

Docker 環境がすでにあることを前提で進めます。

読んでなくても問題ないですが、以下記事も読むことをお勧めします。 [Docker+Go 環境を作成]

DockerFile 作成

作業ディレクトリを作成し、【DockerFile】作成し以下をコピペする

# ベースとなるDockerイメージ指定
FROM golang:latest
# コンテナ内に作業ディレクトリを作成
RUN mkdir /go/src/work
# コンテナログイン時のディレクトリ指定
WORKDIR /go/src/work
# Ginフレームワーク インストール
RUN go get github.com/gin-gonic/gin
# GoApp起動
CMD ["go","run","main.go"]
# ホストのファイルをコンテナの作業ディレクトリに移行
ADD . /go/src/work

docker-compose.yml 作成

同ディレクトリに【docker-compose.yml】ファイルを作成し以下をコピペする

version: '3' # composeファイルのバーション指定
services:
  app: # service名
    build: . # ビルドに使用するDockerfileがあるディレクトリ指定
    tty: true # コンテナの起動永続化
    volumes:
      - .:/go/src/work # マウントディレクトリ指定
    ports:
      - 8080:8080

CLI でコマンド実行

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

docker-compose build

docker-compose up -d

http://localhost:8080 にアクセスしてみてください。

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でES6(JS)を自動整形する

はじめに

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

管理ルールはhttp://cou929.nu/data/google_javascript_style_guide/を参照する。

  1. パッケージ管理ツール npm
  2. 使用モジュール ESLint
  3. 使用ルール eslint-config-google

node をインストールする

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

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

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'));

以上です。

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,MoiraDB,PHP)環境を作成する方法

はじめに

1 から作成すると少し大変な LAMP 環境を作成したので、 備忘録として残しておきます。

環境

  1. CentOS 7

以下コマンドで Apache がインストールされているか確認します。

[user@123-45-67-89 ~]# httpd -v
bash: httpd: command not found

ない場合はインストールします。

[user@123-45-67-89 ~] # sudo yum install httpd
Loaded plugins: fastestmirror
Determining fastest mirrors
 * base: ty1.mirror.newmediaexpress.com
 * extras: ty1.mirror.newmediaexpress.com
 * updates: ty1.mirror.newmediaexpress.com
~~~~~~
~~~~~~
Complete!

Apache がインストールされたか確認します。

[user@123-45-67-89 ~]# httpd -v
Server version: Apache/2.4.6 (CentOS)
Server built:   Apr 24 2019 13:45:48

[user@123-45-67-89 ~]# service httpd status
Redirecting to /bin/systemctl status httpd.service
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: inactive (dead)
     Docs: man:httpd(8)
           man:apachectl(8)

動されていないようなら起動します。

起動されていないようなら起動する
[user@123-45-67-89 ~]# sudo service httpd start
Redirecting to /bin/systemctl start httpd.service

起動されたか確認します。

[user@123-45-67-89 ~]# service httpd status
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: active (running) since Fri 2019-05-17 02:28:43 UTC; 21s ago
     Docs: man:httpd(8)
           man:apachectl(8)
~~~~~~~
~~~~~~~
Hint: Some lines were ellipsized, use -l to show in full.

ついでにサーバ起動時に Apache も起動する設定を追加します。

[user@123-45-67-89 ~]# sudo systemctl enable httpd

サーバ IP にアクセスし以下画面が表示されることを確認します。

以上の画面が表示されない場合は FireWall が邪魔している可能性があります。

以下のコマンドを実行し、Firewall が設定されているか確認します。

[user@123-45-67-89 ~]# sudo firewall-cmd --state
runnnig

【runnnig】と表示された場合、以下のコマンドたたいてください。

[user@123-45-67-89 ~]# sudo firewall-cmd --zone=public --add-service=http --permanent
success

[user@123-45-67-89 ~]# sudo firewall-cmd --reload

問題がなければもう一度アクセスしてみてください。

PHP をインストールする

CentOS 7 の標準の yum リポジトリでは PHP5.4 までしか提供されていません。最新の PHP バージョンをインストールしたい場合は以下の記事を参考にしてください。 [CentOS7 に PHP7 をインストールする]

PHP5.4 でも構わないという方は、ここで PHP のインストールを 以下コマンドを実行し PHP がインストールされていないか確認してください。

[user@123-45-67-89 ~]# php -v
bash: php: command not found

インストールされていなければ以下を実行し、PHP をインストールします。

[centos@ip-172-31-38-77 ~]$ sudo yum install php
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ty1.mirror.newmediaexpress.com
 * extras: ty1.mirror.newmediaexpress.com
 * updates: ty1.mirror.newmediaexpress.com
~~~~~~~~
~~~~~~~~
Complete!

Apache を再起動します。

[user@123-45-67-89 ~]# service httpd restart

テストページを作成して表示させます。その前に httpd.conf を開きドキュメントルートを確認します。

[user@123-45-67-89 ~]# cd /etc/httpd/conf

[user@123-45-67-89 conf]# ls
httpd.conf  magic

[user@123-45-67-89 conf]# sudo vi httpd.conf

DocumentRoot を確認します。恐らくデフォルト で”/var/www/html”で設定されているかと思います。

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/var/www/html"

DocumentRoot へ移動します。

[user@123-45-67-89 conf]# cd /var/www/html

[user@123-45-67-89 html]# sudo vi phpinfo.php

<!--phpinfo.php -->
<?php
phpinfo();
?>

上記ソースを配置できたら、【IP アドレス】/phpinfo.php でアクセスし、以下の画面が表示されることを確認してください。

これで PHP の設定は完了です。

MariaDB を設定する

[user@123-45-67-89 ~]# mysql --version

MariadDB をインストールする。

[user@123-45-67-89 ~]# sudo yum install mariadb mariadb-server
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * base: ty1.mirror.newmediaexpress.com
 * extras: ty1.mirror.newmediaexpress.com
 * updates: ty1.mirror.newmediaexpress.com
~~~~~~~~~
~~~~~~~~~
Complete!

MariaDB がインストールされたか確認する。

[user@123-45-67-89 ~]# mysql --version
mysql  Ver 15.1 Distrib 5.5.60-MariaDB, for Linux (x86_64) using readline 5.1

MariaDB が起動しているか確認する。

[user@123-45-67-89 ~]# service mariadb status
Redirecting to /bin/systemctl status mariadb.service
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; disabled; vendor preset: disabled)
   Active: inactive (dead)

恐らく【Active: incative（dead）】が表示され、MariaDB が起動できていないことを確認できると思います。以下コマンドを実行し MariaDB を起動します。

[user@123-45-67-89 ~]# sudo service mariadb start
Redirecting to /bin/systemctl start mariadb.service

ではもう一度確認します。

[user@123-45-67-89 ~]# service mariadb status
Redirecting to /bin/systemctl status mariadb.service
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; disabled; vendor preset: disabled)
~~~~~~~~
~~~~~~~~
Hint: Some lines were ellipsized, use -l to show in full.

これで MoiraDB をインストールできました。きちんと動作するか確認するため、テーブルを作ってみます。

以下コマンドを実行し sql サーバーにログインしてください。パスワードを求められますが、そのまま Enter を押してください。

[user@123-45-67-89 ~]# mysql -u root -p
Enter password:【Enterキーを押してください】

DB を作成します。

MariaDB [(none)]>create database db_name;
Query OK, 1 row affected (0.00 sec)

作成されたか確認します。

MariaDB [(none)]>show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| db_name            |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.00 sec)

ここまで問題なければ 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 の検索エンジンの技術力をもっており、それはビッグデータの解析に役立てらています。

デメリット

ワイヤフレームとは

ワイヤーフレームとは、コストと再現度が一番低いデザイン表現です。
主に以下のデザイン構造を持っています。

  1. コンテンツのグループ
  2. コンテンツの配置
  3. コンテンツの説明とインターフェース同士の関係

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

  1. 情報の整理ができる。
    1. レイアウト（コンテンツの配置）はどのようにするか、あらかじめ整理することができます。
    2. 表示する情報、画像や文章などのコンテンツはどのようにするか、あらかじめ整理することができます。
  2. 認識合わせができる。
    1. エンジニアとデザイナー、お客さんとのコミュニケーションツールとして利用でき、相互の認識のずれを起こるのを防ぎます。結果的に工数を短縮できます。
  3. アイディアだしやたたき台として、スタートアップ時の土台にすることができる。

ワイヤフレームを作る上での注意点

  1. 不適切な色を使用しない
  2. デザインを凝りすぎない
  3. 醜い画像とアイコンと奇抜なフォントは使用しない
  4. 色合いを凝りすぎない（ワイヤフレームはカラフルである必要がないため
    1. インターフェースとコンテンツのワイヤフレーム構造に灰色の陰影を使用する
    2. 階層を視覚的に提案し、さまざまななグレーの色合いを使用してワイヤーフレームに順序を設定する
    3. 画像やアイコンは常にグレー（視覚的に目立たせたくない場合
    4. 要素間に適切なコントラスト　特にテキストは読みやすくする必要がある
    5. リンクには青、アラートには赤のボックス、確認には緑のボックス、情報には青のボックス、警告には黄色を使用できます
    6. 黒は避ける　例えば黒の境界線、ワイヤフレームを乱雑にする。
  5. 実際のサイズを使用する。（存在するスマートフォンサイズを使用する。例 980px
  6. 他の人が理解できない標識やコードは記載しない。
  7. 理解しやすいアフォーダンスを想像し記載する。

ワイヤフレームを作る上で事前に知っておくこと

  1. 役立つ画面間ドキュメントの記載する。（アラートとボックスのような小さいドキュメントに対して記載することをお勧めする
  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"
    }
  ]
},
～～～～～～～～～～
～～～～～～～～～～

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