React x SCSS x Webpack開発環境セットアップ手順まとめ

スタイルシートをSCSSで、JSはES6で記述するReactJSのアプリケーションを、Webpackでビルドする手順についてまとめてみました。

スタイルシートはバンドルされたJSに含めず、ExtractTextWebpackPluginを利用してファイルを分けるようにしています。

この記事を試したnodeのバージョンは以下の通りです

$ node -v
v6.9.4
$ npm -v
3.10.10

プロジェクトの構成とnpmの初期化

プロジェクトのディレクトリ構成は以下のようにします

“React x SCSS x Webpack開発環境セットアップ手順まとめ” の続きを読む

TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ

TypeScriptの公式チュートリアル React & Webpack · TypeScriptをベースに、TypeScriptで記述したReactJSアプリをWebpackでビルドする開発環境の構築手順についてまとめています。

プロジェクトのディレクトリ構成を準備

プロジェクトの構成は、以下のようにsrcディレクトリにReactJSのコンポーネントを置き、distディレクトリをWebpackのビルドターゲットとします。

以下コマンドで、プロジェクトのディレクトリ構成を作成します

$ mkdir reactjs-ts-webpack
$ cd reactjs-ts-webpack/
$ mkdir dist
$ mkdir -p src/components
$ tree
.
├── dist
└── src
    └── components

3 directories, 0 files

“TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ” の続きを読む

Symfony 3.x FOSRestBundleとJMSSerializerBundleでREST APIを実装する

FOSRestBundleと、シリアライザーとしてJMSSerializerBundleを利用し、SymfonyでREST APIを実装する手順についてまとめました。

FOSRestBundleは、非常に多機能で柔軟な実装が可能ですが、ここではレスポンスフォーマットはjsonのみに対応したシンプルなREST APIを実装する手順について紹介してみます。

バンドルのインストールと読み込み

Step 1: Setting up the bundleに従って以下の手順でインストールします

friendsofsymfony/rest-bundlejms/serializer-bundleをComposerでインストール

$ composer require friendsofsymfony/rest-bundle
$ composer require jms/serializer-bundle

“Symfony 3.x FOSRestBundleとJMSSerializerBundleでREST APIを実装する” の続きを読む

Azure Web AppにデプロイしたPHPからHTTPSサイトにアクセスする

cUrlGuzzleで外部のAPIを利用するアプリケーションをAzure WebAppで動かした場合、証明書が見つからずAPIにHTTPSで接続できない問題が発生します。

HTTPSアクセスする際のSSL証明書の場所は、php.iniのcurl.cainfoに設定しますが、Azure Web Appではd:\home\site\ini/settings.iniファイルで設定できます。

公式ドキュメントは、Azure App Service Web Apps での PHP の構成方法
「PHP_INI_SYSTEM 構成設定の変更」を参照ください。

settings.iniの場所をアプリ設定で指定

[アプリケーション設定] > [アプリの設定]に、キー PHP_INI_SCAN_DIR、値 d:\home\site\ini を追加します。

guzzle-on-azure-webapp
“Azure Web AppにデプロイしたPHPからHTTPSサイトにアクセスする” の続きを読む

AnsibleでUbuntu 14.04にLAMPをセットアップ

管理ホスト、対象ホスト共にUbuntu 14.04の環境でAnsibleを利用する手順について調べたことをまとめました。

インストール、動作確認、LAMP環境構築の順に解説しています。

LAMP環境を構築するPlaybookについてはGithubに公開していますので、全体のコードはこちらを参照ください:
https://github.com/hrendoh/ansible-lamp-simple

動作確認は、Ansibleの実行をVagrant上で、環境構築の対象サーバーはAWS EC2インスタンスで行っています。
Ansibleを実行する管理ホスト用のVagrantfileもGithubプロジェクトにいれてあるので、プロジェクトをClone後、この記事の内容をすぐに試せるようにしています。

また、LAMP構築のPlaybookは、公式のサンプル集 ansible/ansible-examples のLAMPサンプル lamp_simple をUbuntu 14.04用に修正したものになります。
CentOS、RHELを利用の場合は、公式のPlaybookが利用できます。

インストール

Ubuntu 14.04にAnsibleをインストールします。

デフォルトのAptリポジトリからインストールすると古い1.5.xがインストールされてしまうので、公式のPPAリポジトリを追加してインストールします。

$ sudo apt-get install software-properties-common
$ sudo apt-add-repository ppa:ansible/ansible
$ sudo apt-get update
$ sudo apt-get install ansible

“AnsibleでUbuntu 14.04にLAMPをセットアップ” の続きを読む

AWS API GatewayのバックエンドAPIをLaravel 5x Swagger-PHPで構成するには

Laravel 5で作成したAPIをAWS Elastic Beanstalkにデプロイし、AWS API GatewayのHTTPプロキシのバックエンドとする構成について確認したメモになります。

Swagger-PHPを利用して生成したSwaggerドキュメントをAPI Gatewayにインポートする場合、API Gateway固有の設定をSwaggerドキュメントに追加する必要があります。

ここでは、前の記事「Swagger-PHPについてLaravel 5.2で確認したメモ」で実装したAPIに、API GatewayのSwagger拡張を追加してSwaggerドキュメントを生成しなおしAPI Gatewayにインポートする流れで解説していきます。

システム構成

この記事の目的は、バックエンドのAPIをLaravelで実装した場合に、API Gatewayに統合するにはどんな感じか概要をつかむことです。

LaravelやRailsのような、フレームワークを利用してAPIのデプロイ先としては、AWSでは、マネジメントサービスを利用する場合、ElasticBeanstalkかContainer Serviceが選択肢となるかと思いますが、ここではより構成手順が少ないElastic Beanstalkを選択します。

それを踏まえ、簡単に図にすると以下のようになります。

api-gateway-and-laravel-api-on-elastic-beanstalk
“AWS API GatewayのバックエンドAPIをLaravel 5x Swagger-PHPで構成するには” の続きを読む

Laravel 5プロジェクトをElastic Beanstalkにデプロイ

Laravel 5で作成したWeb APIのswagger.jsonをAWS API Gatewayにインポートして動作を確認するにあたって、Laravel 5 APIの動作環境はElastic Beanstalkで簡単に用意してしまいたいと思い、Laravel 5 プロジェクトをAWS Elastic Beanstalkで動作させる手順について調べてみました。

LaravelをBeanstalkにデプロイする手順については、公式ドキュメント「Elastic Beanstalk への Laravel アプリケーションのデプロイ」にも説明があります。
こちらの内容は、Zipアーカイブを作成してアップロードする手順になっています。
この記事では「Symfony2 アプリケーションを Elastic Beanstalk にデプロイする」を参考に、Gitとebコマンドを使ってデプロイする手順を確認し、その内容をまとめています。

EB CLIのインストール

Elastic Beanstalk コマンドラインインターフェイス(EB CLI)のインストールを参考にインストールします。

pipコマンドが使える環境であれば以下のコマンドでインストールできます。

$ sudo pip install awsebcli

“Laravel 5プロジェクトをElastic Beanstalkにデプロイ” の続きを読む

Laravel Angular Material Starter API認証周りの構成についてのメモ

Laravel Augnlar Material Starterは、フロントエンドにAngular Material、バックエンドAPIにLaravelを利用したシングルページアプリケーションを開発するためのスターターパッケージです。

Laravelは、Laravel ElixirというJavascriptやCSSなどのアセットをビルドするためのgulpタスクがフレームワークに予め含まれていますが、Laravel Angular Material Starterは、AngularJSとAngularJSベースのUIコンポーネントフレームワーク Angular MaterialをビルドするためにLaravel Elixirが予め構成されたLaravelプロジェクトと言った構成になっています。
また、フロントエンドのAngularJSから呼び出されるLaravel側のAPIに対する認証はJWTを利用します。

この記事では、主にフロントエンドのAPIの呼び出しと、バックエンドのJWT生成、検証に利用されるパッケージの構成について調べたことをまとめていきます。

含まれるパッケージ

Laravel Angular Material Starterには、2016.7時点でLaravel 5.2とAngularJS 1.5をベースに以下のパッケージが含まれています。

公式ドキュメントでは「Libraries involved」に載っています。

Composerパッケージ

Laravel側のパッケージは、バックエンドAPIおよび認証をサポートする以下のようなパッケージを含んでいます。

  • dingo/api: Laravel、LumenでRestful APIを管理するミドルウェアを提供するパッケージ
  • tymon/jwt-auth: Laravel、Lumen用のJWTの生成、認証の仕組みを提供するパッケージ
  • barryvdh/laravel-cors: Laravel、Lumen用のCross-Origin Resource Sharingを提供するパッケージ

“Laravel Angular Material Starter API認証周りの構成についてのメモ” の続きを読む

Swagger-PHPについてLaravel 5.2で確認したメモ

SwaggerのPHP実装であるSwagger-PHPの使い方についてLaravelプロジェクトで確認し、Swaggerとはどんなものか調査したメモになります。

Swaggerの全体像については、「RESTful APIの記述標準化を担うSwaggerとは? | NTT Communications Developer Portal」が参考になりました。

Swaggerを利用したアプリケーション開発は、まずSwaggerドキュメントを作成して、サーバーのスタブとクライアントライブラリを生成し、APIロジックとクライアントUIなどを実装していくような流れになるといったところのようです。
Laravelはありませんが、コード生成ツール swagger-codegen には、Laravelの軽量版であるLumen用のサーバースタブは生成可能です。

この記事では、Laravel 5.2プロジェクトでAPIを作成して、Swagger-PHPのアノテーションからSwaggerドキュメントを生成してSwagger-UIでテストするまでを解説します。
つまり、APIの開発とSwaggerドキュメントの開発は平行して行っていく手順を想定しています。

前提条件

この記事内容を試すにあたって必要な準備は、以下のとおりです。

  • Laravelの動作するPHPバージョンがインストール済み
  • Composerがグローバルにインストール済み
  • Laravel 5.2プロジェクトを生成済み

Laravelの実行環境をすぐに作るにはVagrant Homesteadが便利です。
Laravel homesteadを利用したLaravel 5 ローカル開発環境の構築」も参考にしてください。

Laravel プロジェクトに Swagger-PHP をインストール

Swagger-PHPを、ComposerでLaravelプロジェクトに追加します。

$ composer require zircote/swagger-php

“Swagger-PHPについてLaravel 5.2で確認したメモ” の続きを読む

HerokuのPHPアプリからRedis To Goを利用するには

HerokuのPHPアプリケーションから、Redis To Goを利用する手順について確認したメモになります。

前提条件

Redis To GoにはFreeプランがありますが、Heroku Add-onsを利用するには、アカウントのBillingにクレジットカードを登録する必要があります。

アドオンの追加

herokuコマンドで、RedisToGoを追加できます。

$ heroku addons:add redistogo

PhpRedisのインストール

PHPのRedis拡張 phpredis/phpredis をComposerでインストールします。

$ composer require ext-redis

“HerokuのPHPアプリからRedis To Goを利用するには” の続きを読む