Netlify Functionsのテスト方法

Netlify FunctionsとはNetlify版のいわゆるFaaS(ファース・Function as a Service)。

Netlify Functionsの使い方としてはnetlify.tomlという設定ファイルでNetlify Functionsの関数を置く場所を指定しファイルを置くとエンドポイントが自動で付与されるので、それを使用する感じ。

テストはnpmでnetlify-lambdaというパッケージが配布されているため、それを用いる。

$ npm init -f
$ npm install netlify-lambda

次に設定ファイルのnetlify.tomlを用意する。

$ touch netlify.toml
$ vi netlify.toml

[build]
	functions = "functions"

上記の設定により、functionsディレクトリ内にNetlify Functionsのファイルを置けるようになった。

次にsrcディレクトリ内に関数ファイルを設置する。

$ mkdir src
$ touch src/test.js
$ vi src/test.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello World!!',
  })
};

そして下記のコマンドでテストしてみる。

$ npx netlify-lambda serve ./src/

そうするとコンソールに下記のような感じでポート番号が書かれるのでブラウザでアクセスしてみる(下記の例ではhttp://localhost:9000)。

Lambda server is listening on 9000

問題ないようであれば、package.jsonに下記のbuildコマンドを記述し、netlify.tomlにそのbuildコマンドを実行するように指定する。

$ vi package.json

~ 略
"scripts": {
  "build": "netlify-lambda build ./src/"
},
~ 略
$ vi netlify.toml

[build]
	functions = "functions"
	command = "npm run build"

functionsディレクトリはgit管理しないようにし、pushすると、自動ビルドされるようになる。
これで一旦ひと通りの流れは完了となる。

Netlify Functionsは内部的にはAWS Lambda(ラムダ)を使っているらしい。

無料版では2019年6月24日現在、月に125,000リクエスト、実行時間は100時間まで利用できるため、個人で使うぶんには問題なく無料で使えそう。
ただしURLはNetlify独自の形式から変更できない、メモリは128MB、実行時間は10秒までとなっている。

GithubでOSS参加するためのコマンド集

(1)Githubのforkボタンをクリック

(2)Cloneする

$ git clone https://github.com/isaxxx/~

(3)開発用ブランチの作成

$ git checkout -b develop
$ git branch
* develop
  master

(4)開発用ブランチで変更を加え、コミット・プッシュ

$ vi README.txt
$ git status
~
 modified: README.txt
~
$ git add README.txt
$ git commit
$ git push origin develop

(5)Branchをmasterに変更し、Fork元リポジトリをローカルで管理する

$ git checkout master
$ git remote add upstream https://github.com/~/~
$ git fetch upstream
$ git branch -a
  remotes/origin/HEAD -> origin/master
  remotes/origin/develop
  remotes/origin/master
  remotes/origin/v1
  remotes/origin/v2
  remotes/upstream/master
  remotes/upstream/v1
  remotes/upstream/v2

(6)Fork元リポジトリの最新バージョンを取得し、ローカルのmasterを更新・pushする

$ git fetch upstream
$ git merge upstream/master
$ git push origin master

(7)ローカルのmasterと開発用ブランチをマージする

$ git merge develop

(8)Github上でPull Requestを送る

WordPressセキュリティ対策

wp-cron.phpを無効化

/* wp-config.php に追記 */
define('DISABLE_WP_CRON', 'true');

※wp-cron.phpを無効化した場合、予約投稿や通知機能などが動作しなくなるため、サーバーcronを利用

$ sudo vi /etc/crontab
# 1分ごとにcronを実行
* * * * * apache /usr/bin/php ~/wp-cron.php > /dev/null 2>&1

xmlrpc.phpのアクセス制限

# vi ~/.htaccess

<Files xmlrpc.php>
Order deny,allow
Deny from all
</Files>

wp-login.phpをアクセス制限

# vi ~/.htaccess

<Files wp-login.php>
Order deny,allow
Deny from all
Allow from xxxx.xxxx.xxxx.xxxx
Allow from xxxx.xxxx.xxxx.xxxx
...
</Files>

wp-login.phpにBasic認証を設置

# vi ~/.htaccess

<Files wp-login.php>
AuthType Basic
AuthUserFile ~/.htpasswd
AuthName "Please enter your ID and password"
require valid-user
</Files>

wp-comments-post.phpのアクセス制限

# vi ~/.htaccess

<Files wp-comments-post.php>
Order deny,allow
Deny from all
</Files>

wp-trackback.phpのアクセス制限

# vi ~/.htaccess

<Files wp-trackback.php>
Order deny,allow
Deny from all
</Files>

複数設定例

# vi ~/.htaccess

<Files ~ "^(wp-config|wp-cron|xmlrpc)\.php$">
Order deny,allow
Deny from all
</Files>

wp-adminディレクトリ以下(admin-ajax.phpを除く)をアクセス制限

# vi ~/wp-admin/.htaccess

Order deny,allow
Deny from all
Allow from xxxx.xxxx.xxxx.xxxx
Allow from xxxx.xxxx.xxxx.xxxx
...
<Files admin-ajax.php>
Satisfy Any
Order allow,deny
Allow from all
Deny from none
</Files>

wp-adminディレクトリ以下(admin-ajax.phpを除く)にBasic認証を設置

# vi ~/wp-admin/.htaccess

AuthType Basic
AuthUserFile ~/.htpasswd
AuthName "Please enter your ID and password"
Require valid-user
<Files admin-ajax.php>
Satisfy Any
Order allow,deny
Allow from all
Deny from none
</Files>

wp-config.phpのアクセス制限

# vi ~/.htaccess

<Files wp-config.php>
Order deny,allow
Deny from all
</Files>

メールアドレスがブラックリストに登録されているかどうかを判断する方法

サーバーから送信するメールがGmailで迷惑メール扱いになったときにDNSのSPF(Sendor Policy Framework)の設定やDNSの逆引き設定(IPアドレスからホスト名を調べられるようにする)や、PostfixのプロトコルをIPv4、メールの文言などをチェックしたけど、どれもできてるってときには、メールアドレスがブラックリストに入ってないかどうかを下記のサイトから調べてみる。

http://www.blacklistalert.org/

ヒットしたらListedの文字が確認できるので、そのリンクを押して解除申請を行う必要がある。

使用歴のあるドメインの場合は要注意。

npmやWebpack、Babel関連で最近知ったこと

環境固定して開発続けているとマジでここらへんの流れを知るのが難しい。結局環境作成は後回しになるからね。

・npm install –save xxxx の–saveはnpm 5.0.0以降から標準で–saveしてくれるので、もう必要がない

・Webpack 4系からwebpack-cliが別途必要、またmodeオプションが必須になったので、development or productionを設定する必要がある

・Babel7からスコープ付きパッケージになったため、@babel/coreや@babel/preset-envというのが正式なパッケージ名となった(babel-loaderはwebpackのためのパッケージだからスコープついてない)

・@babel/preset-envが便利になり、@babel/polyfillと@babel/plugin-transform-runtimeのいいとこどりになった(@babel/plugin-transform-runtimeはコードに直接importを書く必要がないがすべてのpolyfillをimportしてしまう、@babel/polyfillはパッケージを選べるがコードに直接importを書く必要があった。だが@babel/preset-envはブラウザを指定するだけでimportコードを書かずに必要なpolyfillだけインポートしてくれるようになった。つまりユーザー側でどのpolyfillが必要か考える必要がなくなった)
※corejsのバージョン指定がないとwarningを吐くため注意

…前に洗濯乾燥機買った人が、子どもたちが洗濯物を干すという家事を知らずに不安になるといったまとめ記事をみたのだが、なんかそういう気分になった。

GutenbergのブロックをPHPでカスタムするFilter Hook

GutenbergのブロックをPHPから無理やりカスタマイズするFilter Hook。
探してもなかなか見つからず、ソースコードを見てようやく調べがついたため、メモを残す。
ソース:/wp-includes/blocks.php

add_filter('render_block', function($block_content, $block) {
	// 第二引数の$block['blockName']でblockの名称、$block['attrs']['className']でクラス名を取得できるので、条件分岐しカスタムする
	return '<div class="' . $block['blockName'] . ' parent-' . $block['attrs']['className'] . '">' . $block_content . '</div>';
}, 10, 2);

Docker WordPressはルートディレクトリにWordPress本体がないと動作しない

Dockerの公式ディレクトリにあるWordPressを起動させる際、ルートディレクトリにWordPress本体がないと起動に失敗するようだ。

本体を別のディレクトリに移動している場合注意が必要。