Deploying create-react-app to S3 or CloudFront
The React CLI tool, create-react-app, helps front end developers finally focus on building applications, rather than configuring them. Gone are the days of searching through the dozens of boilerplate and starter apps to get off the ground. For the modest price of accepting some opinionated (but sensible) configuration settings, you’re off to the races. Once you’ve kicked off a new application, npm
CORSでハマったことまとめ - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2014 の12/16の記事です。 こんにちは、エンジニアの@dnskimoです。 先日、はじめてCORSを実装する機会があったので、覚書がてらまとめておきたいと思います。 CORSとは Cross-origin resource sharingの略です。 読み方は「コルス」でいいんでしょうか？ Same-Origin Policyに弾かれずに、異なるドメイン間でリソースを共有する仕組みです。 2014年1月にW3C勧告になり、JSONPに替わる方法として徐々に普及してきているようです（要出典）。 アクセスコントロールの仕様も定義されているので、特定のサイトからのみ利用可能なAPIを作る際などに便利です。 JSONPのような「裏ワザ」的な方法ではないところも個人的に好みです。 詳しいことはネット上に素晴らしい記事がたくさんあるので
![CORSでハマったことまとめ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/02ee90e78dc13096aca375e821624d46cd6bc122/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F4393f2761db895fd0a5106a3761d1fe12d734abe%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20141216%252F20141216151227.jpg)
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
CORSまとめ - Qiita
今更ですが、**CORS (Cross-Origin Resource Sharing)**を色々試していたら、思っていた以上に色々パターンがあることに気づいたので、改めてその扱い方についてまとめてみました。 そもそも 現在のWebブラウザでは、あるWebサイトが持つ情報が別の悪意あるWebサイトに悪用されるのを防ぐために、Same-Origin Policy(日本語では同一生成元ポリシー)が適用されます。 例えば、あるWebサイト https://guiltysite.com をブラウザで表示している時に、このWebページからXMLHttpRequest(以下、XHR)やFetch APIで別のWebサイト https://innocentsite.net からHTTP(S)でデータを読み込もうとすると、エラーになる、というわけです。 しかし、アクセス元が悪意あるWebサイトならともかく
オリジン間リソース共有 (CORS) - HTTP | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 � �View in English �Always switch to English オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、 HTTP ヘッダーベースの仕組みを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。 オリジン間リクエストとは、例えば https://domain-a.com で提供されて
100行あったmod_rewirteを ngx_mrubyで書き換えた話
第5回ペパボテックカンファレンス〜インフラエンジニア大特集〜 で発表した資料です http://pepabo.connpass.com/event/30348/
Webサーバのベンチマークツールはh2loadが便利 - 人間とウェブの未来
Webサーバのベンチマークをとるのが趣味になりつつあるmatsumotoryです。 Webサーバのベンチマークについては、abからはじまりwrk等を使っていたのですが、最近ではほぼh2loadを使っています。 h2loadはnghttp2というHTTP/2ライブラリのアプリケーションに含まれているツールですが、 HTTP/2（SPDYも）とHTTP/1.xに両対応している ベンチマーク側の同時スレッド数を増やせる TLS及びSNIもサポートしている 最小、最大、平均、標準偏差あたりもちゃんとでる ので、色々プロトコルを変えつつ同じベンチマークツールで、値の目安を出すにはとても重宝しています。 Nghttp2: HTTP/2 C Library - nghttp2.org 実行結果のサンプルは例えば以下、 $ h2load -c 100 -n 10000 https://localhost:
RDB - 実例で学ぶ、JOIN (NLJ) が遅くなる理屈と対処法 - Qiita
"Nested Loop Joinしか取り上げて無いのにタイトルが大きすぎないか" と指摘を頂いたので、タイトルを修正しました。Merge JoinとHash Joinのことはまた今度書こうと思います。 「JOINは遅い」とよく言われます。特にRDBを使い始めて間がない内にそういう言説に触れた結果「JOIN=悪」という認識で固定化されてしまっている人も多いように感じています。 たしかに、JOINを含むようなSELECT文は、含まないものに比べて重たくなる傾向があることは事実です。また、本質的に問い合わせたい内容が複雑で、対処することが難しいものも存在します。しかし、RDBの中で一体どういうことが起きているのかを知り、それに基いて対処すれば高速化できることも少なくないと考えています。 本稿では、JOINの内部動作を解説した上で、Webサービスを作っているとよく出てくるJOIN SQLを例題に
2015年Webサーバアーキテクチャ序論 - ゆううきブログ
2023年03月31日追記：この記事を基に、@sadnessOjisanさんより、コードレベルにより踏み込んだ、かつ、グリーンスレッドベースの新しいWebサーバアーキテクチャも含めて整理された記事 Webサーバーアーキテクチャ進化論2023 | blog.ojisan.io が公開されました。 主に新卒のWebエンジニア向けに、古典的なWebサーバアーキテクチャを学ぶ道のりと代表的な実装モデルの概要を紹介します。 この辺りの話題がWeb界隈で流行っていたのは数年以上前というイメージですが、Webサービスは相変わらずWebサーバの上で動いているので、流行り廃り関係なく学ぶべき内容だと思っています。 また、HTTP/2がいよいよRFC化し、既にh2oやtrusterdなどのHTTP/2のサーバ実装があり、今後Webサーバアーキテクチャを再訪することが増えるような気がしています。 ところが、We
「Web解析ツール」は死に、「Predictive First」へと移行する - 絶倫ファクトリー
新卒でWeb系企業に入ってから6年間、webサイト改善の仕事に携わってきたけれど、いわゆるこの業界で言われる一般的な「Web解析」のやり方というのは、もう時代遅れなのではないかとこの半年くらい考えている。正確に言えば、Adobe Analytics（以下AA）やGoogle Analytics（以下GA)といった「Web解析ツール」を使ってWebサイトの課題を見つけて改善点を洗い出し云々……と言ったやり方は古いものになりつつあるのではないか、という話だ。 点の改善 線の改善 AAやGAといった従来のWeb解析ツールの弱点は、サイト全体でユーザがどのように動いているのか、つまりサイト上でのカスタマージャーニーを把握できないことだ。直帰率の高い入口ページを見つけて改善する、CVしているユーザがよく見ているページを見る……これらは基本的に課題がある、またはCVに寄与していそうな「点」を見つけて、
Open Source Web Performance Dashboard
30 April 2015 TL;DR: Today me and Tobias released our new web performance dashboard: three Docker containers that makes it super easy to setup something like this: http://dashboard.sitespeed.io/. Everything is Open Source :) It's no secret anymore, you need to keep track of your web sites performance. Having a fast site will make your users happy. There's a bunch of web performance monitoring tool
Add Roots theme
How to add Roots theme via composer.json? I followed instructions on http://roots.io/wordpress-plugins-with-composer/ I put this under repositories, but getting Nothing to install or update on composer update command: { "type": "package", "package": { "name": "roots/roots", "version": "master", "type": "wordpress-theme", "dist": { "type": "zip", "url": "https://github.com/roots/roots/archive/maste
Are there any clones/alternatives for running a Stack Exchange style Q&A site?
Stack Overflow for Teams, a hosted solution, is available for use. In the past there was an enterprise version of Stack Overflow, but this is now deprecated. But if that does not meet your needs, there are several third-party tools that try to clone at least some of the functionality here. Most active that look like the best bets Open source Apache Answer: Go. Demo, docs. Apache 2 license ASKBOT:
VagrantとSSDなVPS(Digital Ocean)で1時間1円の使い捨て高速サーバ環境を構築する - Glide Note
今年の初めくらいから個人的な技術検証にはSSDで動作が速く、1時間1円で料金が安いのと ロケーションをSan Franciscoにするとsshでもレスポンスが悪くないので、全部Digital Oceanを使っている。(徳丸先生が紹介する前から使っていたんだ！) Digital OceanについてはRebuild: 2: Rails, Redis, VPS (Kenn Ejima)の42分くらいから言及されてます。必聴です。 使ってる旧型のMacBookAirみたいな貧弱なマシンだとローカルでVM動かすとファン回りまくりとかで泣きたくなるので、Digital Oceanだと泣かずに済んで快適。 そんで今日Vagrant経由でDigital Ocean利用すると、コマンドラインから必要なときに新規インスタンス(Droplet)作って、 検証終わったら削除という手軽な使い捨て高速サーバ環境が利用
ポータブルなwebアプリケーションとそのインフラの未来の一考
naoya さんのポータブルな Web アプリケーションを受けて最近思ってることをば。140 文字で時々書いてるんだけど、まとまりがないので一回まとめておきます。 12-factor app ステートフルなアプリケーションについては、Heroku の人が提唱してる 12-factor app というのが現在の状況をよく表してます。 The Twelve-Factor App The Twelve-Factor App（日本語訳） Heroku や他の PaaS によってもたらされたこうした一種の”制約”によって、アプリケーションの新しいカタチが生まれてきています。引き算によって新しい価値が生まれてきているわけですね。 とはいえ、PaaS は PaaS でそれぞれに独自の仕様を持っているわけですが、Heroku の buildpack という仕組みを使って、Heroku とインタフェース仕様
Instagram のスケール正攻法 -- Kosei Kitahara's Blog
Instagram がどこに買収されたとかは他のニュースサイトにお任せして、Django アプリケーションを正攻法でスケールして "成功" してるのがとても興味深いです。現時点で Instagram Engineering で紹介されていることと TechCrunch にも掲載されたスライドから個人的なメモとしてまとめてみました。 Instagram の哲学は シンプルであること オペレーション負荷を最小化すること すべて装備 とのこと。 Instagram は以下の OSS, サービスで構築されているようです。 >>> OS / ホスティング Ubuntu Linux 11.04 を Amazon EC2 にホスティング。以前のバージョンは高トラフィックになると固まる問題があったようです。運用は 3 人。EC2 にホスティングしている理由は、調査結果によるものではなく、"まだ進化途中だか
［4］「きたーー!!」、ついに目標性能を達成
リクルートの中古車情報サイト「カーセンサーnet」を全面リニューアルした体験を基に、大規模サイトの性能改善作業の実態をレポートする。第1回、第2回で行ったNFSとApacheの設定変更、PHPアプリケーションの見直しによって、性能は劇的に向上した。しかしその後、どうしても性能が伸びない。第3回での調査で、Linuxカーネルに原因があるらしいことがわかってきた。 カーネルソースがあるディレクトリーに移動して、変数名（kernel_sem）を含むファイルを調べた。すると「lib/kernel_lock.c」というファイルの中で「kernel_sem」が定義されていた。冒頭を読むと、「This is the traditional BKL - big kernel lock」とある。直訳すれば「巨大なカーネルロック」。これは何なのだろうか。コメントを追っていくと、「古い方式」であり「新しいコード
WEBサイト負荷テストツール7選 | さぶみっと！JAPAN
WEBサイトに情報を入力するだけで負荷テストができるLoad Impact、GUIから操作できるApache JMeterや、コマンドラインから使うcurl-loader・httperf・Siege・Pylot・abを簡単な使い方と共に紹介していきます。 Load Impact http://loadimpact.com/ Load ImpactはスゥエーデンのGatorhole AB社が管理している、フォームに必要な情報を入力するだけで負荷テストをしてくれるWEBサイトです。 ツールをインストールしたりする必要が有りませんので、非常に楽です。 毎月5回まで無料で負荷テストができます。 それ以上は10回/$30のクレジットを購入する事になります。 トップページのフォームにURLを入れて「Run free test」をクリックすると、世界各地のいずれかのAmazon EC2サーバから負荷テス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://vccw.cc/
JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】
