GGG

プログラミング言語やソフトウェア開発について思ったことを書いてます

nginx error_pageをS3にしてみる

nginx AWS

nginx + rails および AWS の構成。

Route53のDNS failover機能をつかってsorryページをS3 Bucketに用意するようにした。 nginxがダウンした場合はこれでOKだが, railsがダウン場合も同じようなことをしたい。

rails がダウンした場合(502 Bad gateway)のsorryページをnginx のinternalではなく、DNS failover のsecondary になっているS3 Bucketにしてみようと思ったという話。

任意のリージョンに任意のbucketを作成。sorryページを用意。 オレゴン州にXXXXXXXというbucketを作成。

XXXXXXX.s3-website-us-west-2.amazonaws.com

Amazon S3 の指定bucketに用意したSorryページへ nginx でエラー時に飛ばそうとしてみたら 下記のエラーがブラウザに表示された。

404 Not Found

  • Code: NoSuchBucket

  • Message: The specified bucket does not exist

  • BucketName: XXXXXXX

  • RequestId: YYYYYYYYYY

  • HostId: ZZZZZZZZZZZZZZZZZZZZZZZ

タイポがありミスってた。だから無いと出ていたみたい。

タイポを修正後、再実行してみたら下記のエラーがブラウザに表示された

400 Bad Request

  • Code: IncorrectEndpoint

  • Message: The specified bucket exists in another region. Please direct requests to the specified endpoint.

  • Endpoint: XXXXXXX.s3-website-us-west-2.amazonaws.com

  • RequestId: YYYYYYYYYYYYYY

  • HostId: ZZZZZZZZZZZZZZZZZZZZ=

原因は下記のURLと同じそう。 https://forums.aws.amazon.com/thread.jspa?threadID=215640

しばらく時間をおいてから確認したら、うまくいった。

設定ファイルの一部は下記の通り。

upstream XXXXXXX {
  server s3-website-us-west-2.amazonaws.com;
}


server {
  .
  .
  省略
   .
   .

  error_page 502 = @fallback;

  location @fallback {
     proxy_pass http://XXXXXXX;
  }
}

webpack-dev-server トラブルシューティング

webpack-dev-serverで以下のようなエラーが出た場合は、 他に開いているターミナル上で npm start (webpack-dev-server)している可能性がある

> app@0.0.0 start /Users/user/workspace/app
> webpack-dev-server --config ./webpack.config.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1262:14)
    at listen (net.js:1298:10)
    at doListening (net.js:1397:7)
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.0.0 start: `webpack-dev-server --config ./config/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2017-06-05T09_24_20_493Z-debug.log

【感想】React Components

React Components

React Components

目的

  • 現職のポジションで活かせる内容が一つでもあるか？
    • 初学者向けの教材として利用可能な書籍を探してます。
    • 導入可能な情報があるかどうか

感想

内容としては広く浅くな印象。 洋書であるが比較的読みやすいように思える。

初学者向けに書かれてはいるようだが、実際にはもう少しハードルが高いように思える。 よって会社の新人研修向け教材には推薦しにくい。

他の書籍と比べると、少し違った切り口での情報が多い気がする。そのため新鮮な印象。

紹介 切り口
Fluxアーキテクチャ 理解するために自分で作ってみよう
Ajax socket.io
testing 考え方

*　socket.io:知らなかった。今後もう少し詳しく調べてみよう。

  • node.jsについてもちょっとだけ紹介。
  • testingは、Jestやenzymeを使ってxxxxというものではなくテストについての考え方を理解しようというもの。
  • deep-freeze : 知らなかった。 immutable.jsという選択肢もありそうだが、reduxで使うならこちらの方が親和性が高そうだ。調べてみよう。
  • TravisCIについても紹介されていた。

    後で調べたいキーワード

npm

Material design

customize

HISTORY_API

others

【感想】React ビギナーズガイド

経緯

読むに至った経緯。

  1. チームに配属になったReact未経験者向けの学習書籍として利用可能か。
  2. 現在の業務に取り入れられる何かがあるか？

結論

  1. 可能だが、ちょっとハードルが高い気がする。
  2. Flow, Jestは使っていないため導入時に参考になりそう。

思ったこと・・・

訳本のためか、若干読みにくい印象があった。

基本的な部分を押さえつつ、実際に小さなアプリケーションを動作させるまでを書籍で紹介。

ソースコードはgithubにある。

私の場合は書籍を読んで終わっているが、実際にソースコードをダウンロードして動作を確認しながら進めると理解を深められるかもしれない。

そういった観点からはreact未経験者向けには良い教材になるかもしれない。

fluxについての紹介があり、考え方を理解するために自分で作ってみるというのが他にはない印象で新しかった。

また、品質維持のために複数のnpmパッケージについても紹介されている。そのため、開発環境を整えるには良いかもしれない。

もし下記のパッケージについて利用を検討しているがうまく導入できていないなら、良い資料になるかもしれない。

  • ESLint
  • Flow
  • Jest

気になること

書籍はReact v14を使っている。 現在、まもなくv16がリリースされようとしている。

v16から大きく変わる点が多少あるため、v14からv16にアップグレードする際にはリリースノーツをよく確認しアップグレード手順を理解しなければならない。

後でリファレンスにはならないかもしれない。 理解した後は、これを卒業するというイメージでしょうか。ビギナーズガイドなので・・・。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

【感想】はじめてのCSS設計

読むに至った背景

現在、保守・運用中のサービスが近い将来CSS面で保守しにくくなりそうで、どうになならないかと思った。 そこでメンテナブルなCSS設計するにはどうしたらいいのか？気になり読んでみることにした。

背景その２

私は開発責任者（システム開発部マネージャ）、バックエンド系エンジニアというポジション。

現職の企業では現在社内にフロントエンドエンジニア不在。他業務と兼用。 ウェブページのデザインをする際は画面仕様を作成しそれをもとに外部発注。 納品物を組み込んで使う流れ。

保守はバックエンドエンジニア、企画、デザイナー系の人が行っている。

考えたい内容としては、下記の２点を改善したい。 * 外部発注する際に何ができるか？ * 自分たちが保守する際に何ができるか？

内容

  • CSSの仕様説明
  • CSS設計/命名規則(BEM,SMACSS, OOCSS,etc…)、などの紹介
  • CSS設計～実装までの一連の流れを紹介（実際のできあがるまで）
    • SCSS , gulp,kss(スタイルガイドジェネレータ), etc..

所感

  • 文面が非常に読みやすい印象。
  • 設計手法から具体的な実装方法まで掲載されているため、考え方は分かった・・・、それでどうやってる作るんだ？とはならない。コードも記載されておりダウンロードも可能なので実際に手を動かしながら習得できそうだ。当方は読んだだけです・・。

問題の改善

読むに至った経緯で出ていた問題点を改善するには？

共通点（発注、保守）

  • 明確なコーディングルールがなかったため整備が必要。発注先のレギュレーションに準拠していたが明文化・検査を自動化していない。よって時間とともにCSSが複雑化する。納品後の保守はほぼ無法地帯。
  • ひとまずの解決案：静的解析ツールの導入( EditorConfig , CSSComb、etc…)。
  • スタイルガイドがない。
  • デバイスやブラウザによるデザイン崩れのチェックに使える
  • 実装時のリファレンスになる
  • ひとまずの解決案：共通部品を抽出しスタイルガイドを作成する。スタイルガイド生成は自動化する。

導入している設計手法、命名規則を明文化し、静的解析により自動化できればとりあえずは改善できそうだ。 スタイルガイドは無法地帯と化してる状況から新たに作ることは難しそう。 しかし部品化されているルールセットも多少あるため、それらのスタイルガイドを作れそうだ。 共通部品に限定してスタイルガイドが作れれば、多少はメンテナブルになると考えられる。特に人員の入れ替えが発生した場合には良いリファレンスになりそうだ。

設計時の考慮

OOCSSやBEM,SMACSSなどの様々な考え方が存在するがすべてに共通することは、下記の通りと考えられる。

  1. ウェブデザインとして必要な項目を洗い出し

2.「共通部分」、「非共通部分」の抽出

基本的に他のソフトウェア開発と同じ。 これを「どのように分類するか」という考え方がそれぞれ異なる。

レイヤーや、粒度、状態、コンポーネントなど様々だ。

以上。

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

editorconfig.org

CSScomb: Makes your code beautiful

【感想】 React 開発入門 / 入門React

経緯

プロジェクトの開発責任者になってから、チームに加入するメンバーにReactを教育する担当になった。 そのため、研修期間内での必読書としての候補。

結論、

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用 は　研修用として有用。

入門 React ―コンポーネントベースのWebフロントエンド開発 は リファレンス本・副読本として有用。

読書期間

React開発入門

合計６時間程度 （PCで動作確認しながら）

入門React

３時間くらい

所感

React開発入門

非常に平易に書かれている。 使用している機能も限られているため理解しやすい。 ただし基本はおさえている印象。

ステップバイステップで進められる。

説明している内容が最小構成になっている印象。

メモ

JSXの説明があるが、es6のclassは説明なし。 トランスパイラあたりは省略されている。

省略されている事項は、必要に応じて学習が必要。 browserifyやwebpack,babelの説明は 入門React側に書いてあるので２冊を併用するといいかも。

入門React

幅広く書いてある。 平易ではないかも。

必要な知識ではあるが1冊目としては範囲が広すぎる印象。 React開発入門を読んだ後か、副読本として考えると良いかもしれない。

幅広く書いておりまとまっているため、リファレンスとして良いかも。

React開発入門で省略されている事項についても記載されている。

自身で開発環境を構築する状況になった際は必読本です。 webpackについては参考になった。

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発