2021-11-22

Nginxでの不正アクセス防止

Nginx

ある程度、業務経験のあるエンジニアであれば独自の不正アクセス対策方針を持っているものですが、私の場合、利用しているかどうかに関わらずアクセスが多いパスはすべて403を返すように設定しています。

.svn、.git、.htaccess、.envなどの設定関係のファイルはすべて403
WordPressの脆弱性狙いでアクセスされやすい wp-config.php、xmlrpc.php、wp-admin、wp-includesなどは403*1
最近 /api/v1/time というパスへのアクセスがとても多いのでこれも 403

上記を踏まえて設定すると下記のようになります。

location ~* /((wp-config|xmlrpc)\.php|\.(svn|git|env|htaccess))$ {
    return 403;
}
location ~* (/api/v1/time|/wp-admin|/wp-includes) {
    return 403;
}

さらに、phpをまったく使わないか、あるいはphpという拡張子をつけてアクセスさせることが一切ないようなサーバーの場合にはphpが拡張子のURLをすべて禁止します。

location ~* /(.*\.php|\.(svn|git|env|htaccess))$ {
    return 403;
}
location ~* (/api/v1/time|/wp-admin|/wp-includes) {
    return 403;
}

設定ができたら「nginx -t」でシンタックスエラーがないことを確認の上、サーバーをreloadします。

$ nginx -t 
$ systemctl reload nginx

*1:ただし、WordPressを使っている場合はwp-admin、wp-includesは制限してはいけません。また、WordPressでXMLRPC APIを使っている場合はxmlrpc.php も制限してはいけません。

2021-11-16

Vue 2.0でハマってしまった

Javascript

Vueでの開発中に急に下記のように出てきて1時間近く右往左往してしまった。

The requested module '/node_modules/.vite/vue.js?v=1f26b19c' does not provide an export named 'createElementBlock'

viteを入れ直した際に、vue3 -> vue2 にダウングレードしているのが原因だった。
おそらくnpm install時に@nextをつけ忘れたものと思われる。。

npm i -D vite
npm i vue@next

2021-11-11

Nginxでベーシック認証

Nginx

NginxでBasic認証をかけたい時、毎回、調べており意外と探すのに苦労するのでここに残しておく。
（探し方が悪いんだろうか、、）

基本的にはserverブロックに下記を設定するだけでよい。
もちろん、htpasswdは事前に作っておく必要があります。

    auth_basic "Restricted";
    auth_basic_user_file /path/to/.htpasswd;

ベーシック認証をかけたいserverブロックに上記を追記したら設定ファイルを読み込む。
（1行目は設定ファイルの文法チェック）

$ sudo nginx -t 
$ sudo systemctl reload nginx

2021-11-06

PSD2Webを公開しました。

WEBサービス

PSD2Webとは、PSDファイルをコーディングする際の初期作業としての画像ファイルの書き出しと雛形のHTML作成を効率化するためのコーダー向けのサービスです。

10年以上、HTMLコーディングに携わっていますが、かねてから無駄の多いコーディング業務を効率化したいと思っており、その一環として制作いたしました。

私の場合、基本的にコーディングは下記の手順で行いますが、おそらく多くの方はほぼ同じような手順なのではないかと思います。

イラレ、フォトショなどのデザインソフトでファイルを開き、必要な画像をスライスするなどして書き出す。
デザインを見ながら先にHTMLをすべて書き出す。
デザインに合わせて調整を加えながらCSSを書いていく。

基本的に単純作業なため、私自身はあまりコーディング作業が好きではないのですが、この中でも特に画像の書き出しとHTMLをひたすら書いていく作業はひたすら面倒で苦痛です。

さらに言えば近年はフロントエンドの技術が発達したことで、レスポンシブ対応やPage Speed Insights対応は当たり前、複雑なCSSアニメーションなど何度も修正を求められたりなど、手間がかかるわりには工数や費用についてクライアントからの理解を得にくい分野でもあり、経営者目線で見てもあまり費用対効果のよい業務ではないのが率直なところです。コーディング自体は（もちろん質や速さに違いはありますが）最低限のレベルであれば比較的、誰でもできる分野なので、下っ端のエンジニアや下請けに安い単価でかなりの無理をさせて成り立っている場合も少なくないのが実情ではないかと思います。

このようなコーディング業務への個人的な恨みつらみ（笑）が本サービスを開発するモチベーションとなっています。

PSD2Webでできること

PSDファイルを読み込み、画像ファイルと合わせてimgタグの埋め込まれたHTMLを出力する、というのが基本的な機能となりますが、その他に下記のようなことができます。

pugファイルでの出力（htmlと選べます）
webpファイルの生成（picture + source + imgタグとして出力）
出力する画像ファイルのフォーマット（pngとjpegから選択）
テキストレイヤーをテキストとしてHTMLに出力

個人的にはSlackなどで受け取ったpsdファイルをアップロードし、スマホのみでちょちょいとコーディングの下準備まで行うことを想定しています。（Photoshopを立ち上げることなくすべての作業が完結するのが理想ですが、レイヤースタイルが存在するとスマートオブジェクトに変換しないと正常に表示されないため、結局はPhotoshopを立ち上げなければならない・・・）

PSD2Webでできないこと

レイヤーエフェクト、ブレンドモードには対応していません。
AdobeRGBやCMYKなどの色情報は正確に反映されない場合があります。
画像そのものの編集
基本的にJS処理なので、重たいファイルは微妙かも知れません。（300M程度のpsdでは問題ないことを確認済み）

基本的には余計な機能は省いてHTMLに書き出すための機能に絞っています。

また、レイヤーエフェクトについては非常に残念なところではありますが、技術的な問題があり対応ができていないため、レイヤーエフェクトが反映された状態で画像を書き出す場合には一旦、Photoshopでpsdファイルを開いて該当のレイヤーを右クリックして「スマートオブジェクトに変換」か「レイヤースタイルをラスタライズ」して保存していただければと思います。

AdobeRGB、CMYKなどのカラー設定については、そもそもPhotoshopでpsdファイルを開いて作業をした場合でもWeb用に画像を書き出した時点で色味が変わってしまう可能性が高いため、デザイナーさんがデザインを行う段階でカラー設定をsRGBに設定してもらうようにするのがよいかと思います。

これからの予定

今後、下記について対応予定です。

AVIFへの対応
CSS/SCSSの出力
（Retina対応など）画像の複数サイズの出力
AWS S3、DropBoxなどストレージサービスとの連携
XD、スケッチ、イラレなどへの対応（可能かどうか要調査）

実装についての技術的なことはまた別の記事でまとめたいと思います。

まだ実験段階ではありますが、興味がある方はぜひ使ってみて頂ければ幸いですm(_ _)m