ページ 8

S3+CloudFront+Route 53を使った静的コンテンツ配信 Part 2 （lambda@edge編）

福岡拠点の野田です。

前回、S3を使った静的コンテンツ配信を実現しましたが、ちょっとカッコ悪い点がありました。

ドメイン直下については、 Default Root Object 設定すると https://サイト名/でアクセスしたときindex.html を参照するようにできます。ただし、サブディレクトリ配下はDefault Root Objectの設定が効きません。サブディレクトリ配下で/news/とアクセスしたとき、/news/index.htmlを参照するためにはlambda@edgeを使う必要があります。

/で終わるuriの場合に/index.htmlを参照する設定について、今回は以下の流れで設定を行います。

lambdaを追加
CloudFrontで使えるようにIAMを修正
lambdaにトリガーを追加し、CloudFrontと関連付け

lambdaを追加

リージョンus-east-1のlambda画面から関数を追加します。ほかのリージョンではCloudFrontへのトリガーを作成できないため、正しいリージョンが選択されているか確認してください。

https://console.aws.amazon.com/lambda/home?region=us-east-1

lambdaは１から作る形で進めます。

・関数名：subdir-redirect （適宜適当な名前を設定してください）
・ランタイム：nodejs (バージョンはデフォルトでOK）
・アクセス権限：AWSポリシーテンプレートから新しいロールを作成
・ロール名：cloudfront-lambda （適宜適当な名前を設定してください）
・ポリシーテンプレート：基本的なlambda@edgeのアクセス権限

関数詳細ページが表示されるので、関数コードに以下を追加します。

[crayon-685fee8f216b7407421611  ]'use strict';
exports.handler = (event, context, callback) => {
    var request = event.Records[0].cf.request;
    request.uri = request.uri.replace(/\/$/, '\/index.html');
    return callback(null, request);
};

[crayon-685fee8f216b7407421611 ]'use strict';

exports.handler = (event, context, callback) => {

var request = event.Records[0].cf.request;

request.uri = request.uri.replace(/\/$/, '\/index.html');

return callback(null, request);

};

[/crayon]

画面右上の「保存」を押下してコードを保存します。

CloudFrontで使えるようにIAMを修正

そのままでは使うことができないため、関数詳細ページ「アクセス権限」のタブを選択します。実行ロール「 cloudfront-lambda 」を編集し、末尾の「 IAM コンソールで cloudfront-lambda ロールを表示します。」のリンクをクリックします。

ロールの詳細ページから「信頼関係」のタブをクリックします。「信頼関係の編集」ボタンを押下して、以下のようにedgelambdaの設定を追加します。

[crayon-685fee8f216bc652876766  ]{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "lambda.amazonaws.com",
          "edgelambda.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

[crayon-685fee8f216bc652876766 ]{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Allow",

"Principal": {

"Service": [

"lambda.amazonaws.com",

"edgelambda.amazonaws.com"

]

"Action": "sts:AssumeRole"

}

]

}

[/crayon]

これにより信頼されたエンティティにedgelambdaが追加されます。

信頼されたエンティティ
ID プロバイダー lambda.amazonaws.com
ID プロバイダー edgelambda.amazonaws.com

続いて「アクセス権限」のタブに再度戻ります。＋インラインポリシーの追加から以下のポリシーを追加します。

Lambda: GetFunction, EnableReplication (対象リソースは、先ほど登録したsubdir-redirect lambda のARNを指定)
IAM: CreateServiceLinkedRole（対象リソースはすべて）
CloudFront: UpdateDistribution（対象リソースは、展開するCloudFrontのARNを指定）

ここまでやってようやくlambda@edgeが使えるようになります。

lambdaにトリガーを追加し、CloudFrontと関連付け

仕上げにlambdaの関数詳細画面に戻ります。画面上の「アクション」から新しいバージョンを発行します。コメントは必要あれば適宜入力してください。

そののちにデザイナーから「トリガー」を追加します。トリガーの種類は、CloudFrontを選択します。ここでCloudFrontが選択できない場合はlambdaのリージョンが間違っていますので、最初からやり直してください。設定はデフォルトのままで以下のチェックボックスにチェックを入れます。

[crayon-685fee8f216c0472677908  ] Lambda@Edge へのデプロイを確認 
関数のこのバージョンが上記のトリガーと関連付けられ、利用可能なすべての AWS リージョン間でレプリケートされることに同意します。

1 2	[crayon-685fee8f216c0472677908 ] Lambda@Edge へのデプロイを確認関数のこのバージョンが上記のトリガーと関連付けられ、利用可能なすべての AWS リージョン間でレプリケートされることに同意します。

[/crayon]

追加ボタンを押下するとCloudFrontへの更新が入ります。Distributionの更新が終わるまでしばし待つと、晴れてサブディレクトリのリダイレクト処理を利用することができるようになります。

まとめ

lambdaというと単機能のAPIや軽量サーバーとして使うイメージが強いですが、実はいろいろなところに組み込めます。lambda@edgeを利用することでCloudFrontに対してヘッダーのカスタマイズ、 BASIC認証など多岐にわたって処理を組み込むことができます。静的コンテンツに対してちょっとした動的処理を行いたいな、というときはlambda@edgeの出番です。是非ご活用いただければと思います。

面倒なところもありますが、ひと手間かけるといろいろなことができるのがAWSの良いところ。いろいろエンジニアとしていろいろHackしていければと思います。

S3+CloudFront+Route 53を使った静的コンテンツ配信

福岡拠点の野田です。

WordPressで運用していた個人サイトをメンテしなくなったので、S3とCloudFrontとRoute 53を使って静的コンテンツ配信方式に切り替えてみました。手順の大きな流れは以下のようになります。

S3にコンテンツを配置
CloudFrontを設定
Route53でCloudFrontへ振り分け

S3 にコンテンツを配置

まずは、wget で既存サイトを取得します。

[crayon-685fee8f21a24736608653  ]wget --mirror --page-requisites --span-hosts --quiet --show-progress --no-parent --convert-links --no-host-directories --adjust-extension --execute robots=off （サイトURL）

1	[crayon-685fee8f21a24736608653 ]wget --mirror --page-requisites --span-hosts --quiet --show-progress --no-parent --convert-links --no-host-directories --adjust-extension --execute robots=off （サイトURL）

[/crayon]

日本向けに配信することを考え、 S3 の東京リージョンにて新規バケットを作成して、上記取得したファイルを配置します。

S3における設定ですが、アクセス権限の設定を行います。静的コンテンツとして公開するため、以下のバケットポリシーのブロックをオフにすることで外部からのアクセスを行えるようにします。

新規のパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックするオフ
任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックするオフ

バケットポリシーは、以下のようなCloudFrontからの接続を許可する設定を行いますが、CloudFront側から設定ができるため、ひとまずスキップで大丈夫です。

[crayon-685fee8f21a28946894931  ]{
     "Version": "2012-10-17",
     "Statement": [
         {
             "Sid": "2",
             "Effect": "Allow",
             "Principal": {
                 "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity OAIのID"
             },
             "Action": "s3:GetObject",
             "Resource": "arn:aws:s3:::バケット名/"
         }
     ]
 }

[crayon-685fee8f21a28946894931 ]{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "2",

"Effect": "Allow",

"Principal": {

"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity OAIのID"

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::バケット名/"

}

]

}

[/crayon]

CloudFrontを設定

Create DistributionでCDNを新規作成します。

Web/RTMPの選択でWebを選択
Origin Domain NameにS3のバケットを選択
Origin Pathは空欄でOK
Origin IDは任意のIDを設定（S3-バケット名みたいな感じで設定しました)
Restrict Bucket Accessは、YES
Origin Access Identityは、 Create a New Identity。
Grant Read Permissions on Bucketは Yes, Update Bucket Policy （これが先ほどのS3バケットポリシーに反映されますので、一応S3側でも設定されているか確認）
Viewer Protocol Policyは、Redirect HTTP to HTTPS (httpからhttpsリダイレクト)
Allowed HTTP Methodsは、GET/HEADのみで対応（CORSを考えるとOPTIONSまでやってもいいかもしれません）
Compress Objects Automaticallyは、true（圧縮化。転送量削減）
Price Classはベストパフォーマンス
AWS WAF Web ACLは、None
Alternate Domain Namesは割り当てるドメイン名を改行区切りで入力。
証明書については、独自ドメインで割り当てる場合、ACMに登録したものを選択。
残りはデフォルトで登録

Distribution作成後、 GeneralタブでEditボタンを押下して、以下を設定します。

Default Root Objectにindex.htmlを設定

続いて Restrictionsタブを選択して、GeoRestrictionをEditします。

今回は、日本のみを対象とします。全世界を対象とするとコストと直結します。1日1000円以上かかってもいい！どんな攻撃もどんとこい！という方以外は、対象を絞ったほうが良いと思います（私もこれで当初1日放置して1000円かかってしまい冷や汗、急遽制限を追加しました）。

Route53でCloudFrontへ振り分け

仕上げにRoute53からCloudFrontへ振り分けします。A(IPv4アドレス)およびAAAA(IPv6アドレス）のエイリアス指定でCloudFrontにつなげることができます。

まとめ

Cloudは設定をミスると高額な請求が発生してしまうリスクはありますが、うまく使えば個人で使っても安く運用することができます。最近では予算設定や請求が高額になりそうなときにアラートも出せる機能もありますので、そうしたものを組み合わせて、安全に運用すると良いと思います。先月からの運用の感じだとアクセス数次第なところがありますが、100円～300円/月ぐらいで運用できそうな感じでした。

初心者にはおすすめはしませんが、興味ある方は是非チャレンジしてみてください。

何度も同じフォーマットをコピペして編集したくない人の為に

沖縄拠点の久保田です。

何度も同じフォーマットをコピペして編集したくない人向けのテクニックを紹介したいと思います。

用意するソフトウェアは以下となります。

■必要な環境
Microsoft Excel 2016

まずは完成形から見ていきましょう。

※完成図

[＠雛形]セルの１つ下のセルに雛形を書きます。置き換えた対象となる部分に[＠０１]や[＠０２]のように設定します。
[＠値]セルの１つ下のセルに雛形で使用するパラメータ[＠０１]や[＠０２]を設定します。行を増やしながら埋め込みたい値を設定します。
[実行]ボタンを押下後、クリップボードに出力結果が設定されます。

■クリップボードへの出力結果

[crayon-685fee8f21d46081317282  ]$param = array(
    "corp"    => "06",
    "account" => "19000001",
    "id"      => "487012345",
    "phoneNo" => "0746669999",
    "pay" => "1",
    "verify"  => "6654"
);
$param = array(
    "corp"    => "06",
    "account" => "19000002",
    "id"      => "487012346",
    "phoneNo" => "0746670000",
    "pay" => "2",
    "verify"  => "7777"
);
$param = array(
    "corp"    => "39",
    "account" => "19000006",
    "id"      => "487012350",
    "phoneNo" => "0746670004",
    "pay" => "1",
    "verify"  => "1111"
);

[crayon-685fee8f21d46081317282 ]$param = array(

"corp" => "06",

"account" => "19000001",

"id" => "487012345",

"phoneNo" => "0746669999",

"pay" => "1",

"verify" => "6654"

);

$param = array(

"corp" => "06",

"account" => "19000002",

"id" => "487012346",

"phoneNo" => "0746670000",

"pay" => "2",

"verify" => "7777"

);

$param = array(

"corp" => "39",

"account" => "19000006",

"id" => "487012350",

"phoneNo" => "0746670004",

"pay" => "1",

"verify" => "1111"

);

[/crayon]

こんな感じのツールです。

何故このツールを作ろうと思ったのか

何故このツールを作ろうと思った経緯ですが、getter や setter を大量に半手動で作らないといけない事があり（今では便利なプラグインがあるのですが、）さらに、コメントも決まったフォーマットで書かないといけないという事がありました。

この時はインターネットにも接続できない環境で、必要なプラグインの入手までに時間がかかりました。（プラグインやツールの申請に1週間程かかりました）

例えば↓のような場合です。

[crayon-685fee8f21d4b646532118  ]  /** 画面ID */
  private String screenId;

  /**
   * 画面IDを取得します。
   * @return 画面ID
   */
  public String getScreenId() {
    return screenId;
  }

  /**
   * 画面IDを設定します。
   * @param screenId 画面ID
   */
  public void setScreenId(String screenId) {
    this.screenId = screenId;
  }

[crayon-685fee8f21d4b646532118 ] /** 画面ID */

private String screenId;

/**

* 画面IDを取得します。

* @return 画面ID

public String getScreenId() {

return screenId;

}

/**

* 画面IDを設定します。

* @param screenId 画面ID

public void setScreenId(String screenId) {

this.screenId = screenId;

}

[/crayon]

あー、もうこんなの手動で書くなんて信じられませんね。

getter, setter までは自動で出力してくれますが、コメントの形式までプロジェクトで決められていて、IDEの内包ツールではそこまで対応していませんでした。
手動でなんてやってたら時間かかるしミスは出るしで良い事なんて１つもありません。

そこで限られた環境で効率化を図る事にしたのです。

実際に作ってみよう

と、いうわけでここからは本ツールの作成方法を書きたいと思います。

※[開発]タブを使用しますので、表示されていない方は、[ファイル] → [オプション] → [リボンのユーザー設定] の[リボンのユーザ設定]の[開発]チェックボックスをオンにして、事前に [開発]タブを表示して下さい。

まず、下のような感じでシートを作成します。

[開発]タブ → 挿入 → フォームコントロール[ボタン]を選択して、任意の場所にボタンを配置します。

ボタンを配置するとマクロの登録画面になりますので、何も変更せず[新規作成]ボタンを押して下さい。

[ Visual Basic Editor ]が起動しますので、以下のソースを貼り付けて保存して下さい。
私の環境では Subプロシージャ [ボタン10_Click()]ですので、自身の環境に合わせて修正して下さい。

[crayon-685fee8f21d50494515241  ]Sub ボタン10_Click()

    Dim Rng As Range
    Set Rng = Cells.Find(What:="＠値", LookIn:=xlValues, LookAt:=xlWhole)
    If Rng Is Nothing Then
        MsgBox "＠値セルが存在しません。"
    End If
    
    Dim tempRng As Range
    Set tempRng = Cells.Find(What:="＠雛形", LookIn:=xlValues, LookAt:=xlWhole)
    If tempRng Is Nothing Then
        MsgBox "＠雛形セルが存在しません。"
    End If
    
    Dim valueRow As Integer
    Dim valueCol As Integer
    
    valueRow = Rng.Row
    valueCol = Rng.Column
    
    If Not Cells(valueRow + 1, valueCol).Value = "＠０１" Then
        MsgBox "＠値セルの直下に＠01セルを定義してください。"
        Exit Sub
    End If
    
    valueRow = valueRow + 1
    
    Dim cValueArray As New Collection
    
    Do
        If Cells(valueRow, valueCol) = "" Then
            Exit Do
        End If
    
        cValueArray.Add Cells(valueRow, valueCol)
    
        valueCol = valueCol + 1
    Loop
    
    valueRow = valueRow + 1
    
    Dim result As String
    Dim tempStr As String
    Dim tempFlg As Boolean
    
    Do
        valueCol = Rng.Column - 1

        tempFlg = False
        
        ' 値存在チェック
        For i = 1 To cValueArray.Count
            If Not Cells(valueRow, valueCol + i) = "" Then
               tempFlg = True
               Exit For
            End If
        Next
        
        ' 値が無い場合終了
        If Not tempFlg Then
            Exit Do
        End If
        
        tempStr = Cells(tempRng.Row + 1, tempRng.Column).Value
        
        ' templateを置換文字で実行
        For i = 1 To cValueArray.Count
            tempStr = Replace(tempStr, cValueArray(i), Cells(valueRow, valueCol + i))
        Next
        
        ' 置換後の文字列を
        result = result + tempStr + vbLf
        
        ' 次の行へ移動
        valueRow = valueRow + 1
    Loop
    
    result = Replace(result, vbLf, vbCrLf)
    
    Dim CB As New DataObject
    With CB
        .SetText result
        .PutInClipboard
    End With
    
    MsgBox "実行結果をクリップボードへコピーしました。"
End Sub

[crayon-685fee8f21d50494515241 ]Sub ボタン10_Click()

Dim Rng As Range

Set Rng = Cells.Find(What:="＠値", LookIn:=xlValues, LookAt:=xlWhole)

If Rng Is Nothing Then

MsgBox "＠値セルが存在しません。"

End If

Dim tempRng As Range

Set tempRng = Cells.Find(What:="＠雛形", LookIn:=xlValues, LookAt:=xlWhole)

If tempRng Is Nothing Then

MsgBox "＠雛形セルが存在しません。"

End If

Dim valueRow As Integer

Dim valueCol As Integer

valueRow = Rng.Row

valueCol = Rng.Column

If Not Cells(valueRow + 1, valueCol).Value = "＠０１" Then

MsgBox "＠値セルの直下に＠01セルを定義してください。"

Exit Sub

End If

valueRow = valueRow + 1

Dim cValueArray As New Collection

If Cells(valueRow, valueCol) = "" Then

Exit Do

End If

cValueArray.Add Cells(valueRow, valueCol)

valueCol = valueCol + 1

Loop

valueRow = valueRow + 1

Dim result As String

Dim tempStr As String

Dim tempFlg As Boolean

valueCol = Rng.Column - 1

tempFlg = False

' 値存在チェック

For i = 1 To cValueArray.Count

If Not Cells(valueRow, valueCol + i) = "" Then

tempFlg = True

Exit For

End If

' 値が無い場合終了

If Not tempFlg Then

Exit Do

End If

tempStr = Cells(tempRng.Row + 1, tempRng.Column).Value

' templateを置換文字で実行

For i = 1 To cValueArray.Count

tempStr = Replace(tempStr, cValueArray(i), Cells(valueRow, valueCol + i))

' 置換後の文字列を

result = result + tempStr + vbLf

' 次の行へ移動

valueRow = valueRow + 1

Loop

result = Replace(result, vbLf, vbCrLf)

Dim CB As New DataObject

With CB

.SetText result

.PutInClipboard

End With

MsgBox "実行結果をクリップボードへコピーしました。"

End Sub

[/crayon]

[ Visual Basic Editor ] 画面を閉じます。
では、先ほど配置したボタンを押してみましょう。メッセージボックスに「実行結果をクリップボードへコピーしました。」と表示されれば完成です。テキストエディター等に貼り付けして出力結果を確認して下さい。

■メモ帳に貼り付け結果

シートをコピーして増やすことで、雛形を多数準備する事も可能です。

作成にはVBAの知識が少し必要ですが、[マクロの記録]で必要なコードを収集しながら作成する事も可能ですので、是非VBAを使っていろいろ作成してみて下さい。

便利な使い方

便利な使い方をするには、まずインプットデータを本ツールにあまり加工せずに貼り付けできる状態が好ましいです。

例えばテーブル定義書です。

テーブル定義書のカラムの物理名と論理名を使用して、コードとコメントを書く時に役に立ったりします。

エクセルなので当然セル内に関数を埋めこんだり、別シートのセルを参照したりできるわけで、それだけでも利用方法が広がると思います。

いろいろ工夫して使ってみて下さい。

＜免責事項と注意事項＞

本ページの内容について

発生した一切の損害（機会の損失、結果的損害等を含む）について、いかなる責任も負いません。
ご利用は各個人での私的な使用に限るものとし、商用又は、営利を目的として、また公共の場での使用を一切禁止します。

さくらクラウドVPCルータ（サイト間VPN)とOpenVPNを利用したVPN拠点の構築

昨今、コロナ禍により業務を遂行するにあたり、テレワークを余儀なくされてます。

社内のNASやら、運用・保守業務で「IPアドレス制限されている」サーバにアクセスするために、会社ルータ（RTX-1210)にVPN接続をすることが多々発生しています。

そうした中、RTX-1210にVPN（L2TP）接続ができないというスタッフが続々と発生するという問題が顕著化しました。（以前よりそういった問題がちょくちょくありましたが、特に業務への影響は軽微であったことから、放置していました。）

ログ、コンフィグなどを見直して、ある程度あたりはつけましたが、業務に影響がでるかもしれない作業を実施する時間的余裕もないのと、本当にそれで問題が解消する保証もないのと、別件で使ってる拠点間接続だと、通信が安定しているという事もあり、　外部にVPNサーバを立てて、そいつと、会社のRTX-1210を拠点間接続でつないでしまえばいいのじゃなかろうかと思い立ったが吉事。さっそくやってみました。

さくらクラウドのVPCルータにもVPN（L2TP)サービスがあるので、最初これが使えるか？と試したのですが、VPCルータから全パケットを拠点間接続の接続先に転送するルーティングを入れると、VPN(L2TP)サービスに接続できなくなってしまうという問題（というかあたりまえなんですが。。）があり、以下のようなネットワークを作ってみました。

簡単に説明すると、さくらVPCルータを拠点間接続だけに利用して、VPNサーバは別にサーバを立てて、VPNクライアントから接続されたパケットはすべて、VPCルータ経由・拠点間VPN接続を得て会社のRTX-1210から出ていくルーティングを設定するというものです。

つまり、以下のような通信ラインを確保しようという試みです。

以下構築の手順メモ

OpenVPNを設定する

【設定前提情報】

ローカルスイッチネットワーク情報：　192.168.100.0/23
接続先スイッチ：　local-switch(1)
サーバのNetwork:　eth0 （Global側） 30.30.30.1
サーバのNetwork:　eth1 （Loal側） 192.168.100.2
OS: CentOS 7.6

【手順】

STEP1) 必要パッケージをインストールする

yum -y update<br>yum install epel-release -y<br>yum --enablerepo=epel -y install openvpn easy-rsa

1	yum -y update<br>yum install epel-release -y<br>yum --enablerepo=epel -y install openvpn easy-rsa

STEP2) 各種設定準備を行う
※パスワード、CAのcommonnameは好きな値を設定の事

mkdir /etc/openvpn/easy-rsa<br>cp /usr/share/easy-rsa/3.0.7/* /etc/openvpn/easy-rsa/ -R

1	mkdir /etc/openvpn/easy-rsa<br>cp /usr/share/easy-rsa/3.0.7/* /etc/openvpn/easy-rsa/ -R

cd /etc/openvpn/easy-rsa

1	cd /etc/openvpn/easy-rsa

./easyrsa init-pki<br>./easyrsa build-ca<br>./easyrsa gen-dh<br>./easyrsa build-server-full server_r nopass<br>./easyrsa build-client-full client1 nopass<br>openvpn --genkey --secret /etc/openvpn/ta.key<br>cd /etc/openvpn/<br>cp /usr/share/doc/openvpn*/sample/sample-config-files/server.conf server_r.conf

./easyrsa init-pki ./easyrsa build-ca ./easyrsa gen-dh ./easyrsa build-server-full server_r nopass ./easyrsa build-client-full client1 nopass openvpn --genkey --secret /etc/openvpn/ta.key cd /etc/openvpn/ cp /usr/share/doc/openvpn*/sample/sample-config-files/server.conf server_r.conf

STEP3)　server_r.confの設定を行う

vi /etc/openvpn/server_r.conf

1	vi /etc/openvpn/server_r.conf

デフォルト値から以下を変更する

ca /etc/openvpn/easy-rsa/pki/ca.crt
cert /etc/openvpn/easy-rsa/pki/issued/server_r.crt
key /etc/openvpn/easy-rsa/pki/private/server_r.key  # This file should be kept secret
dh /etc/openvpn/easy-rsa/pki/dh.pem
push "route 192.168.0.0 255.255.255.0"
push "redirect-gateway def1 bypass-dhcp"
comp-lzo
user nobody
group nobody
status /var/log/openvpn-status.log
log         /var/log/openvpn.log
log-append  /var/log/openvpn.log

ca /etc/openvpn/easy-rsa/pki/ca.crt

cert /etc/openvpn/easy-rsa/pki/issued/server_r.crt

key /etc/openvpn/easy-rsa/pki/private/server_r.key # This file should be kept secret

dh /etc/openvpn/easy-rsa/pki/dh.pem

push "route 192.168.0.0 255.255.255.0"

push "redirect-gateway def1 bypass-dhcp"

comp-lzo

user nobody

group nobody

status /var/log/openvpn-status.log

log /var/log/openvpn.log

log-append /var/log/openvpn.log

STEP4)　net.ipv4.ip_forward の設定を行う

vi /etc/sysctl.d/10-ipv4_forward.conf

1	vi /etc/sysctl.d/10-ipv4_forward.conf

net.ipv4.ip_forward = 1

1	net.ipv4.ip_forward = 1

sysctl --system

1	sysctl --system

STEP5)　iptablesの設定を行う

yum -y install iptables-services<br>systemctl disable firewalld<br>systemctl stop firewalld<br>systemctl enabled iptables<br>systemctl start iptables

1	yum -y install iptables-services<br>systemctl disable firewalld<br>systemctl stop firewalld<br>systemctl enabled iptables<br>systemctl start iptables

vi /etc/sysconfig/iptables

1	vi /etc/sysconfig/iptables

*filter
 :INPUT ACCEPT [0:0]
 :FORWARD ACCEPT [0:0]
 :OUTPUT ACCEPT [6:813]
 -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT
 -A INPUT -p icmp -j ACCEPT
 -A INPUT -i lo -j ACCEPT
<strong> -A INPUT -p udp -m udp --dport 1194 -j ACCEPT
</strong> -A INPUT -p tcp -m state --state NEW -m tcp --dport 22 -j ACCEPT
 -A INPUT -j REJECT --reject-with icmp-host-prohibited
<strong> -A FORWARD -d 192.168.100.0/23 -i tun+ -j ACCEPT
</strong> -A FORWARD -o eth0 -m state --state NEW -j ACCEPT
 -A FORWARD -o eth1 -m state --state NEW -j ACCEPT
 -A FORWARD -m state --state RELATED,ESTABLISHED -j ACCEPT
 -A FORWARD -j REJECT --reject-with icmp-host-prohibited
 COMMIT
<strong> *nat
</strong> :PREROUTING ACCEPT [51:3492]
 :INPUT ACCEPT [0:0]
 :OUTPUT ACCEPT [2:152]
 :POSTROUTING ACCEPT [3:212]
<strong> -A POSTROUTING -s 10.8.0.0/24 -o eth1 -j MASQUERADE
</strong> COMMIT

*filter

:INPUT ACCEPT [0:0]

:FORWARD ACCEPT [0:0]

:OUTPUT ACCEPT [6:813]

-A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT

-A INPUT -p icmp -j ACCEPT

-A INPUT -i lo -j ACCEPT

-A INPUT -p udp -m udp --dport 1194 -j ACCEPT

-A INPUT -p tcp -m state --state NEW -m tcp --dport 22 -j ACCEPT

-A INPUT -j REJECT --reject-with icmp-host-prohibited

-A FORWARD -d 192.168.100.0/23 -i tun+ -j ACCEPT

-A FORWARD -o eth0 -m state --state NEW -j ACCEPT

-A FORWARD -o eth1 -m state --state NEW -j ACCEPT

-A FORWARD -m state --state RELATED,ESTABLISHED -j ACCEPT

-A FORWARD -j REJECT --reject-with icmp-host-prohibited

COMMIT

*nat

:PREROUTING ACCEPT [51:3492]

:INPUT ACCEPT [0:0]

:OUTPUT ACCEPT [2:152]

:POSTROUTING ACCEPT [3:212]

-A POSTROUTING -s 10.8.0.0/24 -o eth1 -j MASQUERADE

COMMIT

※ボールドの部分がポイント

systemctl restart iptables

1	systemctl restart iptables

STEP6) OpenVPN起動

systemctl enable openvpn@server_r<br>systemctl start openvpn@server_r

1	systemctl enable openvpn@server_r<br>systemctl start openvpn@server_r

STEP7) ルーティングの設定

ip rule add from 10.8.0.0/24 table 100 prio 100

1	ip rule add from 10.8.0.0/24 table 100 prio 100

ip route add 10.8.0.0/24 dev eth0 proto kernel scope link metric 100 table 100

1	ip route add 10.8.0.0/24 dev eth0 proto kernel scope link metric 100 table 100

ip route add default via 192.168.100.1 table 100

1	ip route add default via 192.168.100.1 table 100

※このルーティングがポイント（10.8.0.0/24からのパケットは全部、192.168.100.1へルーティングするという内容を用意する）

STEP7)　ルーティングの永続化

※設定方法確認中
　とりあえずいまは起動時にスクリプトで実行させておく。

STEP8)　クライアントで利用するcert / keyは以下ファイルを利用する

/etc/openvpn/easy-rsa/pki/ca.crt
/etc/openvpn/ta.key
/etc/openvpn/easy-rsa/pki/issued/client1.crt
/etc/openvpn/easy-rsa/pki/private/client1.key

.ovpnファイルを作ると接続設定するのが楽になります。
以下のようなファイルを作る

client
 dev             tun
 proto           udp
 remote          30.30.30.1 1194
 resolv-retry infinite
 nobind
 persist-key
 persist-tun
 remote-cert-tls server
 tls-client
 key-direction 1
 cipher AES-256-CBC
 comp-lzo
 verb 3
<ca>
 ここに、「/etc/openvpn/easy-rsa/pki/ca.crt」の内容を張り付ける 
</ca>
<key>
 ここに、「/etc/openvpn/easy-rsa/pki/private/client1.key」の内容を張り付ける 
</key>
<cert>
 ここに、「/etc/openvpn/easy-rsa/pki/issued/client1.crt」の内容を張り付ける 
</cert>
<tls-auth>
 ここに、「/etc/openvpn/ta.key」の内容を張り付ける 
</tls-auth>

client

dev tun

proto udp

remote 30.30.30.1 1194

resolv-retry infinite

nobind

persist-key

persist-tun

remote-cert-tls server

tls-client

key-direction 1

cipher AES-256-CBC

comp-lzo

verb 3

<ca>

ここに、「/etc/openvpn/easy-rsa/pki/ca.crt」の内容を張り付ける

</ca>

<key>

ここに、「/etc/openvpn/easy-rsa/pki/private/client1.key」の内容を張り付ける

</key>

<cert>

ここに、「/etc/openvpn/easy-rsa/pki/issued/client1.crt」の内容を張り付ける

</cert>

<tls-auth>

ここに、「/etc/openvpn/ta.key」の内容を張り付ける

</tls-auth>

さくらクラウド VPCを利用した「拠点間VPN接続」の設定を行う。

さくらクラウドVPCの設定を行う

■さくらクラウド　ネットワーク情報

【設定前提情報】
ローカルスイッチネットワーク情報：　192.168.100.0/23
接続先スイッチ：　local-switch(1)
VPCルーター（インターフェース：プライベート１）に割り当てるIP： 192.168.100.1
対向IPアドレス： 10.10.10.1
対向ID： 192.168.100.1
Pre Shared Secret: unko123
対向Prefix: 0.0.0.0/0
ローカルPrefix: 192.168.100.0/23

【手順】

STEP1) VPCルーターを追加する
　　　　プラン：　スタンダード
　　　　インターネット接続：　有効
　　　　そのほかの項目は任意で入力する
　　　　
STEP2) VPCルーターのインターフェースの設定
　　　　スイッチ：　既存スイッチを接続
　　　　接続先スイッチ：　local-switch(1)
　　　　IPアドレス：　192.168.100.1
　　　　プレフィックス： /23

STEP3)　サイト間VPNの設定
　　　　対向IPアドレス： 10.10.10.1
　　　　対向ID： 192.168.100.1
　　　　Pre Shared Secret: unko123
　　　　対向Prefix: 0.0.0.0/0
　　　　ローカルPrefix: 192.168.100.0/23

STEP4)　「反映」を行う

RTX-1210側の設定を行う

【設定前提情報】
■RTX-1210ネットワーク情報
Global-IP:　 10.10.10.1
LAN-IP: 172.16.100.1 (NetworkAddress: 172.16.100.0/23)
■さくらクラウド VPC（サイト間VPN設定情報）
Global-IP: 20.20.20.1
対向IPアドレス： 10.10.10.1
対向ID： 192.168.100.1
Pre Shared Secret: unko123
対向Prefix: 0.0.0.0/0
ローカルPrefix: 192.168.100.0/23

【手順】

★RTX-1210側への設定手順
参考：　https://knowledge.sakura.ad.jp/7051/

１）　RTX-1210のGUIツールにて、拠点間VPNの設定を行う。　（簡単設定→VPN→拠点間接続）
　接続種別の選択： IPSec
　ネットワーク環境：自分側と接続先の両方とも固定のグローバルアドレスまたはネットボランチDNSホスト名を持っている
　自分側の設定（設定名）： SAKURA VPN
　接続先の情報（接続先のホスト名またはIPアドレス）： 10.10.10.1
接続先と合わせる設定（認証鍵 (pre-shared key)）： unko123
接続先と合わせる設定（認証アルゴリズム）： HMAC-SHA
接続先と合わせる設定（暗号アルゴリズム）： AES-CBC
　経路に関する設定：接続先のLAN側のアドレス
192.168.100.0 / 255.255.254.0(23bit)
10.8.0.0 / 255.255.254.0(24bit)
２）　CONFIGを取得して、「description tunnel “SAKURA VPN”」の設定部分を探して、設定情報を変更する

※例えば、

tunnel select 16
 description tunnel "SAKURA VPN"
 ipsec tunnel 9
  ipsec sa policy 9 9 esp aes-cbc sha-hmac
  ipsec ike keepalive log 9 off
  ipsec ike keepalive use 9 on heartbeat 10 6
  ipsec ike local address 9 172.16.100.1
  ipsec ike nat-traversal 9 on
  ipsec ike pre-shared-key 9 text unko123
  ipsec ike remote address 9 20.20.20.1
 ip tunnel tcp mss limit auto
 tunnel enable 16

tunnel select 16

description tunnel "SAKURA VPN"

ipsec tunnel 9

ipsec sa policy 9 9 esp aes-cbc sha-hmac

ipsec ike keepalive log 9 off

ipsec ike keepalive use 9 on heartbeat 10 6

ipsec ike local address 9 172.16.100.1

ipsec ike nat-traversal 9 on

ipsec ike pre-shared-key 9 text unko123

ipsec ike remote address 9 20.20.20.1

ip tunnel tcp mss limit auto

tunnel enable 16

であった場合、以下のような設定情報を作成。

tunnel select 16
  description tunnel "SAKURA VPN"
  ipsec tunnel 9
   ipsec sa policy 9 9 esp aes-cbc sha-hmac
   ipsec ike always-on 9 on
   ipsec ike duration ipsec-sa 9 1800
   ipsec ike duration ike-sa 9 28800
   ipsec ike encryption 9 aes-cbc
   ipsec ike group 9 modp1024
   ipsec ike hash 9 sha
   ipsec ike keepalive log 9 off
   ipsec ike keepalive use 9 on dpd 15 2
   ipsec ike local address 9 172.16.100.1
   ipsec ike local id 9 172.16.100.0/23
   ipsec ike nat-traversal 9 off
   ipsec ike pfs 9 on
   ipsec ike pre-shared-key 9 text unko123
   ipsec ike remote address 9 20.20.20.1
   ipsec ike remote id 9 192.168.100.0/23
   ipsec auto refresh 9 on
  ip tunnel mtu 1280
  ip tunnel tcp mss limit auto
  tunnel enable 16

tunnel select 16

description tunnel "SAKURA VPN"

ipsec tunnel 9

ipsec sa policy 9 9 esp aes-cbc sha-hmac

ipsec ike always-on 9 on

ipsec ike duration ipsec-sa 9 1800

ipsec ike duration ike-sa 9 28800

ipsec ike encryption 9 aes-cbc

ipsec ike group 9 modp1024

ipsec ike hash 9 sha

ipsec ike keepalive log 9 off

ipsec ike keepalive use 9 on dpd 15 2

ipsec ike local address 9 172.16.100.1

ipsec ike local id 9 172.16.100.0/23

ipsec ike nat-traversal 9 off

ipsec ike pfs 9 on

ipsec ike pre-shared-key 9 text unko123

ipsec ike remote address 9 20.20.20.1

ipsec ike remote id 9 192.168.100.0/23

ipsec auto refresh 9 on

ip tunnel mtu 1280

ip tunnel tcp mss limit auto

tunnel enable 16

これを、RTX-1210の「コマンド実行」で実行する。

以上

C#でWOL（Wake-on-LAN）

福岡の香月です。

コロナ対応で世の中はリモートワークが進んでいるようです。中程度スペックの中古PCもたくさん売れているようで、在庫が少なくなっているようですね。

自宅作業する場合、会社のPCにリモートデスクトップでつないで作業することも多いと思いますが、気付いたらPCがシャットダウンしていることがあります。間違って電源切ったとか、夜中にWindows Updateが動いたとか。

そんな時はWOL（Wake-on-LAN）ですが、私はこれについて知識が無かったので調べがてらC#プログラムのWOLツールを作ってみました。プラットフォームは.Net Core 3.1です。
以下全文です。どん！

[crayon-685fee8f22340530784879  ]
using System;
using System.IO;
using System.Net.Sockets;
using System.Reflection;
using Microsoft.Extensions.Configuration;

namespace WakeOnLAN
{
    class Program
    {
        static void Main(string[] args)
        {
            string name = Assembly.GetEntryAssembly().GetName().Name;
            ConfigurationBuilder builder = new ConfigurationBuilder();
            builder.SetBasePath(Directory.GetCurrentDirectory());
            builder.AddIniFile(name + ".ini");
            IConfiguration config = builder.Build();

            string host = config["host"];
            string sport = config["port"];
            string macAddr = config["macAddr"];

            if (string.IsNullOrEmpty(host))
            {
                Console.WriteLine("設定ファイルに host が設定されていません。");
                return;
            }
            if (string.IsNullOrEmpty(sport))
            {
                Console.WriteLine("設定ファイルに port が設定されていません。");
                return;
            }
            if (string.IsNullOrEmpty(macAddr))
            {
                Console.WriteLine("設定ファイルに macAddr が設定されていません。");
                return;
            }

            int port = 0;
            if (!int.TryParse(sport, out port))
            {
                Console.WriteLine("ポート番号が不正です。");
                return;
            }

            // macアドレス文字列をバイト配列に
            string[] bsary = macAddr.Split('-');
            if (bsary.Length != 6)
            {
                Console.WriteLine("macアドレスが正しくありません。\nipconfig /all で確認してください。\n例）1A-2B-3C-D4-EE-99");
                return;
            }
            byte[] bmac = new byte[6];
            for (int i = 0; i &lt; 6; ++i)
                bmac[i] = Convert.ToByte(bsary[i], 16);

            byte[] packet = new byte[6 + 6 * 16];
            Array.Copy(new byte[] { 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF }, 0, packet, 0, 6);
            for (int i=1; i&lt;=16; ++i)
                Array.Copy(bmac, 0, packet, i * bmac.Length, bmac.Length);

            try
            {
                UdpClient udp = new UdpClient();
                udp.Send(packet, packet.Length, host, port);
            }
            catch (Exception e)
            {
                Console.WriteLine("マジックパケットの送信時に例外が発生しました。\n" + e.ToString());
            }
        }
    }
}

[crayon-685fee8f22340530784879 ]

using System;

using System.IO;

using System.Net.Sockets;

using System.Reflection;

using Microsoft.Extensions.Configuration;

namespace WakeOnLAN

{

class Program

{

static void Main(string[] args)

{

string name = Assembly.GetEntryAssembly().GetName().Name;

ConfigurationBuilder builder = new ConfigurationBuilder();

builder.SetBasePath(Directory.GetCurrentDirectory());

builder.AddIniFile(name + ".ini");

IConfiguration config = builder.Build();

string host = config["host"];

string sport = config["port"];

string macAddr = config["macAddr"];

if (string.IsNullOrEmpty(host))

{

Console.WriteLine("設定ファイルに host が設定されていません。");

return;

}

if (string.IsNullOrEmpty(sport))

{

Console.WriteLine("設定ファイルに port が設定されていません。");

return;

}

if (string.IsNullOrEmpty(macAddr))

{

Console.WriteLine("設定ファイルに macAddr が設定されていません。");

return;

}

int port = 0;

if (!int.TryParse(sport, out port))

{

Console.WriteLine("ポート番号が不正です。");

return;

}

// macアドレス文字列をバイト配列に

string[] bsary = macAddr.Split('-');

if (bsary.Length != 6)

{

Console.WriteLine("macアドレスが正しくありません。\nipconfig /all で確認してください。\n例）1A-2B-3C-D4-EE-99");

return;

}

byte[] bmac = new byte[6];

for (int i = 0; i < 6; ++i)

bmac[i] = Convert.ToByte(bsary[i], 16);

byte[] packet = new byte[6 + 6 * 16];

Array.Copy(new byte[] { 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF }, 0, packet, 0, 6);

for (int i=1; i<=16; ++i)

Array.Copy(bmac, 0, packet, i * bmac.Length, bmac.Length);

try

{

UdpClient udp = new UdpClient();

udp.Send(packet, packet.Length, host, port);

}

catch (Exception e)

{

Console.WriteLine("マジックパケットの送信時に例外が発生しました。\n" + e.ToString());

}

[/crayon]

特徴

マジックパケットを飛ばします。マジックパケットとは…
- UDPで送信するパケット
- 先頭6バイトに{ 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF }
- 続けて対象PCのmacアドレスを16回
- 合わせて102バイトのパケットとなる。
exeと同じ名前のiniファイルを設定ファイルとして読み込む
設定ファイルにて以下を設定
- host=対象PCのIPアドレス
- post=UDPポート（ルータが許可したポートであれば何でもOK）
- macアドレス=対象PCのmacアドレス
エラーが発生した場合はコンソール上にエラーを表示

プログラムは案外簡単でびっくりしました。
それよりもWOLが使える環境の設定が大変そうですね。BIOS、ネットワークカード、Windowsの設定など、情報はぐぐればいろいろ出てきますので一度お試しあれ。

Swagger-PHPでOA\PathItem()エラー

福岡拠点の野田です。
OpenAPI(Swagger)の仕様書を使っていますか？

PHPでは、アノテーションでOpenAPIを定義できるSwagger-PHPというものがあります。使うためには以下を実行します。

[crayon-685fee8f22508050614363  ]composer require --dev zircote/swagger-php

1	[crayon-685fee8f22508050614363 ]composer require --dev zircote/swagger-php

[/crayon]

対象のコントローラーを指定するとアノテーションで記載したコメントがAPI仕様書になるという素晴らしいライブラリです。swagger.ymlの書き出し方は、以下。

[crayon-685fee8f2250c089741298  ]vendor/zircote/swagger-php/bin/openapi app/Http/Controllers/Api/*Controller.php -o swagger.yml

1	[crayon-685fee8f2250c089741298 ]vendor/zircote/swagger-php/bin/openapi app/Http/Controllers/Api/*Controller.php -o swagger.yml

[/crayon]

ここで少しはまりどころがあります。
OA\Infoを定義したクラスには必ずOA\GetやOA\PutといったAPIをセットで定義しなければなりません。それをしないと以下のエラーで怒られます。

[crayon-685fee8f22510867525717  ]Required @OA\PathItem() not found

1	[crayon-685fee8f22510867525717 ]Required @OA\PathItem() not found

[/crayon]

ちょー分かりにくいエラーなので、私もはまりました。そんなときは汎用エラーレスポンスでも定義してしのぎましょう。

[crayon-685fee8f22513730025452  ]    /**
     * @OA\Put(
     *     path="/api/*",
     *     tags={"ErrorCommon"},
     *     description="APIエラー共通",
     *     @OA\Response(
     *          response="default",
     *          description="APIエラー時の返却データ",
     *          @OA\JsonContent(
     *              @OA\Property(property="error", type="integer", description="エラー値(0:正常/1:エラー)"),
     *              @OA\Property(property="errorId", type="string", description="エラーID"),
     *              @OA\Property(property="code", type="string", description="エラーコード"),
     *              @OA\Property(property="message", type="string", description="エラーメッセージ"),
     *          )
     *     )
     * ),
     */
    private function error() {
        throw new UnsupportedOperationException();
    }

[crayon-685fee8f22513730025452 ] /**

* @OA\Put(

* path="/api/*",

* tags={"ErrorCommon"},

* description="APIエラー共通",

* @OA\Response(

* response="default",

* description="APIエラー時の返却データ",

* @OA\JsonContent(

* @OA\Property(property="error", type="integer", description="エラー値(0:正常/1:エラー)"),

* @OA\Property(property="errorId", type="string", description="エラーID"),

* @OA\Property(property="code", type="string", description="エラーコード"),

* @OA\Property(property="message", type="string", description="エラーメッセージ"),

* )

* ),

private function error() {

throw new UnsupportedOperationException();

}

[/crayon]

これはライブラリ側でなんとかしてほしかったところではありますが、めげずにswaggerを使っていきましょう。

それでは、また！

nuxt.js環境を構築する

福岡拠点の野田です。

サーバーサイドでレンダリングするSSR(Server Side Rendering)を次の案件で使うことにしました。API側は慣れ親しんだLaravel。

最初に悩むのが環境構築。
どうしようか、というところで参考にしたのが、次の記事。

LaravelとNuxt.jsを同一レポジトリで管理するときの構成https://www.wantedly.com/companies/roxx/post_articles/84615

client フォルダ以下に環境を作る例ですが、とても参考になりました。以下おっかけになりますが手順になります。

[crayon-685fee8f226e9193661909  ]install -d client/pages/.gitkeep
install -d client/assets/.gitkeep
install -d client/components/.gitkeep
install -d client/layouts/.gitkeep
install -d client/middleware/.gitkeep
install -d client/plugins/.gitkeep
install -d client/static/.gitkeep
install -d client/store/.gitkeep

[crayon-685fee8f226e9193661909 ]install -d client/pages/.gitkeep

install -d client/assets/.gitkeep

install -d client/components/.gitkeep

install -d client/layouts/.gitkeep

install -d client/middleware/.gitkeep

install -d client/plugins/.gitkeep

install -d client/static/.gitkeep

install -d client/store/.gitkeep

[/crayon]

nuxtは起動フォルダ配下に.nuxtという一時ファイルを作成します。このため設定ファイルをclient以下に配置して、このフォルダを起動フォルダとします。

設定ファイル (nuxt.config.js)

[crayon-685fee8f226ec091651249  ]module.exports = {
    srcDir: '../client/',

    server: {
        port: 5000, // デフォルト: 3000
        host: 'localhost', // デフォルト: localhost,
        timing: false
    },
    css: [
        'bootstrap/dist/css/bootstrap.css',
        'bootstrap-vue/dist/bootstrap-vue.css',
    ],
    plugins: [
        '@/plugins/bootstrap',
    ]
}

[crayon-685fee8f226ec091651249 ]module.exports = {

srcDir: '../client/',

server: {

port: 5000, // デフォルト: 3000

host: 'localhost', // デフォルト: localhost,

timing: false

css: [

'bootstrap/dist/css/bootstrap.css',

'bootstrap-vue/dist/bootstrap-vue.css',

plugins: [

'@/plugins/bootstrap',

]

}

[/crayon]

起動シェル(再起動シェル)は以下のような感じで作ります。

[crayon-685fee8f226f1874792517  ]#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
while [ $nuxt_count -gt 0 ]
do
    ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9
    sleep 1
    export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`
done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

[crayon-685fee8f226f1874792517 ]#!/bin/bash

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`

while [ $nuxt_count -gt 0 ]

ps aux |grep nuxt.config.js | grep -v -E '(grep|\.sh)' | gawk '{print $2}' | xargs -r kill -9

sleep 1

export nuxt_count=`grep -a "" /proc/*/cmdline | xargs -P1 -r -0 | grep -s nuxt.config.js | grep -v -E '(grep|\.sh)' | wc -l`

done

echo "" | ../node_modules/.bin/nuxt -c ./nuxt.config.js &

[/crayon]

ちなみにecho “” | はjenkinsから呼び出したとき、標準入力を要求されたので、それ対策で入れています。

このシェルを実行することでnuxt.jsサーバーが起動します。

nuxtは素のvueでやるよりも以下の点で優れていると思います。

自動でルーティングしてくれる。
レイアウト機構を持っている。
API連携の仕組みも実装しやすい形で持っている。

VueやReactやAngularは、マイクロサービスをつなげる糊の役割をしているフレームワークだと思います。これからもっと深く使っていきたいと思います。

JQコマンドをおぼえた

福岡拠点の野田です。久しぶりの投稿です。

ある案件でAWSを扱っており、ELBからインスタンスが切り離されたか確認してほしいと連絡がありました。生憎、AWS Consoleへの接続アカウントをもらっていない状態で調べられない…と思ったのですが、aws-cliがインストールされてあるサーバーがあることに気づき、そちらで確認してみました。

ELBの一覧を表示するコマンドは以下のようなものになります。

[crayon-685fee8f228a5664771342  ] aws --output json --region ap-northeast-1 elb describe-load-balancers

1	[crayon-685fee8f228a5664771342 ] aws --output json --region ap-northeast-1 elb describe-load-balancers

[/crayon]

けれども、awsのコマンドで出てくる内容はjsonで縦に長い！必要な情報だけに整理したいときに役立つのがjq(恐らくjson queryの略)コマンドになります。jsonの中からDNSNameと紐づくインスタンスを見たい場合は、以下のようなクエリをjqに投げます。

[crayon-685fee8f228a9824204240  ] aws --output json --region ap-northeast-1 elb describe-load-balancers | jq -r '.LoadBalancerDescriptions[] | {DNSName, Instances}'

1	[crayon-685fee8f228a9824204240 ] aws --output json --region ap-northeast-1 elb describe-load-balancers \| jq -r '.LoadBalancerDescriptions[] \| {DNSName, Instances}'

[/crayon]

jqコマンドの基本は、配列のフィルターと生成。.から始まる要素がフィルターされる内容になります。{}や[]で配列を再構築します。詳しいやり方は以下をご参考ください。

https://dev.classmethod.jp/tool/jq-manual-japanese-translation-roughly/

すぐれものなのは、jsonからcsvを作れること。以下のような感じでフィルターと配列の再構築を利用すれば、@csvでcsvの作成も楽々です。

[crayon-685fee8f228ad426659847  ]aws --output json --region ap-northeast-1 elb describe-load-balancers | jq -r '.LoadBalancerDescriptions[] | [.DNSName, .Instances[].InstanceId] | @csv'

1	[crayon-685fee8f228ad426659847 ]aws --output json --region ap-northeast-1 elb describe-load-balancers \| jq -r '.LoadBalancerDescriptions[] \| [.DNSName, .Instances[].InstanceId] \| @csv'

[/crayon]

zabbixと連携させたりとか、レポート出力を簡易化できないかとか夢が広がりますよね？是非、jqを使ってより良いjsonライフを！

PHPUnit_その３(データプロバイダ)

福岡拠点の永嵜です。

前回に引き続きPHPUnitの機能を紹介します。

今回はデータプロバイダ機能を紹介します。
データプロバイダ機能とは、テストメソッドに任意の引数を渡せる機能です。
データプロバイダを使用すると同じテストメソッドで様々なテストができる利点があります。

データプロバイダ機能

例題を示しながら説明します。
前回使用したテストケースにデータプロバイダを追加します。

■テストケース

class AreaCalcTest extends TestCase
{

    /**
     * @dataProvider traiangleProvider
     */
    public function testGetTriangleArea($width,$height,$expected)
    {
        
        $actual = AreaCalc::getTriangleArea($width,$height);
        
        //$expected と　$actualが等しくない場合エラー
        $this->assertEquals($expected,$actual);
    }
    
    public function  traiangleProvider()
    {
        return [
            'ok pattern' => [4, 2, 4],
            'ng pattern' => [4, 2, 10],
        ];
        
    }

}

class AreaCalcTest extends TestCase

{

/**

* @dataProvider traiangleProvider

public function testGetTriangleArea($width,$height,$expected)

{

$actual = AreaCalc::getTriangleArea($width,$height);

//$expected と　$actualが等しくない場合エラー

$this->assertEquals($expected,$actual);

}

public function traiangleProvider()

{

return [

'ok pattern' => [4, 2, 4],

'ng pattern' => [4, 2, 10],

];

}

traiangleProviderメソッドがデータプロバイダになります。
[4, 2, 4]、 [4, 2, 10※1]がテストメソッドに渡す引数になります。
[横、縦、想定値]のデータをテストメソッドに渡します。
配列一つが1テスト用のデータになります。

※1 今回データプロバイダの説明のために想定値に誤った値を設定してテスト失敗を発生させています。

データプロバイダのデータにラベルを付けることができます。
(‘ok pattern’/’ng pattern’)
ラベルを付けることによってテスト失敗時にどのデータで失敗しているかを確認しやすくなります。
データプロバイダからデータを受け取るにはテストメソッドに@dataProviderアノテーションを付けます。

■実行

vendor\bin\phpunit test\
PHPUnit 7.5.6 by Sebastian Bergmann and contributors.

.F                                                                  2 / 2 (100%)

Time: 853 ms, Memory: 14.00 MB

There was 1 failure:

1) Tests\Unit\Test\AreaCalcTest::testGetTriangleArea with data set "ng pattern" (4, 2, 10)
Failed asserting that 4 matches expected 10.

/var/www/everegi/tests/Unit/Test/AreaCalcTest.php:20

FAILURES!
Tests: 2, Assertions: 2, Failures: 1.

vendor\bin\phpunit test\

PHPUnit 7.5.6 by Sebastian Bergmann and contributors.

.F 2 / 2 (100%)

Time: 853 ms, Memory: 14.00 MB

There was 1 failure:

1) Tests\Unit\Test\AreaCalcTest::testGetTriangleArea with data set "ng pattern" (4, 2, 10)

Failed asserting that 4 matches expected 10.

/var/www/everegi/tests/Unit/Test/AreaCalcTest.php:20

FAILURES!

Tests: 2, Assertions: 2, Failures: 1.

‘ng pattern’のデータでテスト失敗となりました。

また、実行時にfilterオプションを使用すると実行したいテストデータだけテストすることができます。

■データ指定(ok pattern)で実行

vendor\bin\phpunit test\  --filter '@ok pattern'
PHPUnit 7.5.6 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 711 ms, Memory: 14.00 MB

OK (1 test, 1 assertion)

vendor\bin\phpunit test\ --filter '@ok pattern'

PHPUnit 7.5.6 by Sebastian Bergmann and contributors.

. 1 / 1 (100%)

Time: 711 ms, Memory: 14.00 MB

OK (1 test, 1 assertion)

最後に

前回、今回、PHPUnitの概要を説明しましたが、PHPUnitには
コマンドオプション、アノテーション、アサーションなど他にも便利な機能があるので詳細を知りたい方は下記をチェックしてみてください。

PHPUnit マニュアル

https://phpunit.readthedocs.io/ja/latest/index.html

PHPUnit_その２(実行手順)

福岡拠点の永嵜です。

前回に引き続き、PHPUnitを紹介します。
今回はPHPUnitの実行手順を紹介します。実行環境は前回 Composer を使用してインストールした環境で行います。

PHPUnitの実行

PHPUnitでは理解するべき３つの要素があります。

①テスト対象クラス
ユニットテストを行うテスト対象のクラスです。

②テストケースクラス
テストケースは原則としてテスト対象クラスに対して1つ作成します。テストケースは、PHPUnit\Framework\TestCase※1 を継承して作成します。一般的にテストするクラス名の末尾に「Test」という文字列を付与したものをテストケース名とします（ファイル名はテストケースクラス名.php）。

- テストケースクラス名 ：「[テストするクラス名]Test」
- ファイル名 ：テストケースクラス名.php

※1:vendorフォルダー配下にあります。

③テストメソッド
テストケース内に記述するメソッドです。実際にテストをする単位となります。
テストメソッドの名称は「test」で始まる文字列にする必要があります。
※@testアノテーションを使用する場合は、「test」でなくてもよいです。

では実際にテストケースを作成し、実行してみましょう。

まず、開発用ディレクトリにテスト対象クラスを格納する src ディレクトリとテストケースクラスを格納する test ディレクトリを作成します。

■テスト対象作成

テスト対象となるクラスを用意します。

<?php

namespace Sample;

class AreaCalc
{
    /**
     * 三角形の面積を算出
     * @param int $width
     * @param int $height
     * @return double
     */
    public static function getTriangleArea($width,$height)
    {
        return $width*$height / 2;
    }
}

<?php

namespace Sample;

class AreaCalc

{

/**

* 三角形の面積を算出

* @param int $width

* @param int $height

* @return double

public static function getTriangleArea($width,$height)

{

return $width*$height / 2;

}

引き数で横、高さを受け取り三角形の面積を返すクラスです。

■テストケースとテストメソッド作成

テスト対象が完成したらテストケースとテストメソッドを作成します。
test ディレクトリに AreaCalcTest.php ファイルを作成し、次のように記入します。

<?php
require_once('vendor/autoload.php');

use PHPUnit\Framework\TestCase;
use Sample\AreaCalc;


class AreaCalcTest extends TestCase
{
    
    /**
     * @group getTriangleArea
     */
    public function testGetTriangleArea()
    {
        $width = 4;
        $height = 2;
        $expected= 4;  // 期待値 4×2 /2 = 4

        $actual = AreaCalc::getTriangleArea($width,$height);
        
        //$expected と　$actualが等しくない場合エラー
        $this->assertEquals($expected,$actual);
    }
    
}

<?php

require_once('vendor/autoload.php');

use PHPUnit\Framework\TestCase;

use Sample\AreaCalc;

class AreaCalcTest extends TestCase

{

/**

* @group getTriangleArea

public function testGetTriangleArea()

{

$width = 4;

$height = 2;

$expected= 4; // 期待値 4×2 /2 = 4

$actual = AreaCalc::getTriangleArea($width,$height);

//$expected と　$actualが等しくない場合エラー

$this->assertEquals($expected,$actual);

}

このテストケースでは、$width(横)と $height(高さ)で計算した面積が正しいかをテストしています。テストメソッドではアサーションと呼ばれる結果判定メソッドを使用します。今回の例ではassertEqualsがアサーションメソッドになります。
ちなみにassertEqualsは2 つの引数が等しくない場合エラーとするメソッドです。
$expectedに想定値、$actualに実測値を設定しassertEqualsで判定しています。

図1のように開発用ディレクトリ(Sample)内にテスト対象(AreaCalc)とテストケース(AreaCalcTest)を配置しています。

■実行

phpunit コマンドを実行してユニットテストを行います。
phpunitはPHPUnitをインストールしたディレクトリのvendor\binフォルダ配下にシンボリックリンクがあります。

全てのテストケースの実行、特定のテストケースだけ実行どちらもできます。
今回はテストケースが1つですが①の方法で実行します。

①テストケースを全て実行する場合
・vendor\bin\phpunit テストケース保存フォルダ
⇒例：vendor\bin\phpunit test\

②テストケースを指定して実行する場合
・vendor\bin\phpunit テストケース指定
⇒例：vendor\bin\phpunit test\AreaCalcTest

※上記方法以外にもコマンドオプションで制御する方法があります。詳しくは PHPUnitマニュアルをご確認ください。

コマンドプロンプトを開き次のように入力します。
test ディレクトリ内のファイルをテストケースとしてテストが実行されます。

vendor\bin\phpunit test\

1	vendor\bin\phpunit test\

■テスト結果

テストが実行されるとテスト結果ステータス(4行目)が表示されます。
AreaCalcは正しい結果を返す状態なので( $width = 4、 $height = 2を引数で与えると4が返ってくる)テスト成功.（ドット）となっています。

PS C:\xampp\htdocs\Sample> vendor\bin\phpunit test\
PHPUnit 8.0.4 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 3.24 seconds, Memory: 4.00 MB

OK (1 test, 1 assertion)

PS C:\xampp\htdocs\Sample> vendor\bin\phpunit test\

PHPUnit 8.0.4 by Sebastian Bergmann and contributors.

. 1 / 1 (100%)

Time: 3.24 seconds, Memory: 4.00 MB

OK (1 test, 1 assertion)

他のステータス表示は以下のようになります。

ステータス	意味
.（ドット）	テスト成功
F	テスト失敗
E	テストが危険としてマーク
S	テストをスキップした
I	テストが未実装

以上がPHPUnitによる一連のテスト手順となります。

次回は今回実行したサンプルプログラムに手を加え、
データプロバイダ機能について説明したいと思います。

2025年6月
月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30