ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js で作成したブログサイトをお名前.comへアップロードする

2020年 07月 20日

目次

Gatsby.js で生成した静的なサイトをお名前.com へアップロードする手順を自動化するために、サイト更新用の Makefile を作成します。

私はこれまで、お名前.com の SD-11 プランのレンタルサーバで、Wordpress を使ったブログを運用していました。 最近、静的サイトジェネレータの Gatsby.js がイイんじゃない?ということで、Gatsby.js で作ることにしました。

Gatsby.js でブログを作る場合、ローカル PC でサイトをビルドして静的ファイルを作ります。 そのためサイトの更新をする場合は scp などでファイル転送する必要があります。

手順を自動化するために Makefile を作っていきます。 お名前.com でなくてもファイル転送が必要な人には参考になるのではと思います。

なぜ Makefile か

この手の自動化は bash や Python などのシェルスクリプトも得意です。 ですが、ループもなければ加工も必要なく、コマンドを羅列していくだけなので Makefile で十分です。

Makefile は C のプログラムのコンパイルやビルドのイメージが強いですが、 この手のコマンド実行していく作業の自動化にも向いています。

自動化したいこと

手でやらなければ行けない以下の手順を自動化します。

  • Gatsby.js で生成されたファイル群を zip
  • その zip をお名前.com へ scp でファイル転送
  • お名前.com へ ssh で

    • zip を解凍
    • zip を削除
  • ローカルの zip を削除

Gatsby.js サイトのビルドは自動化しません。 ローカルで確認してからアップロードしたいからです。

コマンドを調べる

まずは1つずつコマンドラインで実行してみます。

必要な実行オプションを調べて、記録を取っていきます。

# ビルド(ここは自動化しない)
[~/workspace/crz33-gatsby] $ gatsby build

# Gatsby.jsで生成されたファイル群をzip
[~/workspace/crz33-gatsby] $ cd public
[~/workspace/crz33-gatsby/public] $ zip -r ../release.zip .
[~/workspace/crz33-gatsby/public] $ cd ..

# そのzipをお名前.comへscpでファイル転送
[~/workspace/crz33-gatsby] $ scp -o StrictHostKeyChecking=no ./release.zip 'ユーザ名'@ホスト名:~/crz33.com

# お名前.comへsshする
[~/workspace/crz33-gatsby] $ ssh -l ユーザ名 ホスト名

# (お名前.comへsshで)zipを解凍
cd ~/crz33.com/
unzip -o ./release.zip

# (お名前.comへsshで)zipを削除
rm -f ./release.zip
exit

# ローカルのzipを削除
[~/workspace/crz33-gatsby] $ rm -f ./release.zip

scp のところで’ユーザ名’というようにシングルクォーテーションで括っているのは、お名前.com のユーザにアットマークが入っているためです。 やめてほしい。。。

scp や ssh だとパスワード聞かれてしまうので、sshpass を使うことにします。 sshpass を使うと以下のようにパスワードを引数で指定できます。

sshpass -p パスワード scp xxx
sshpass -p パスワード ssh xxx

変数を取り出す

コマンドを眺めて、何回も登場したり、変化しそうなキーワードを抽出します。

  • ホスト名 : BLOG_HOST:=localhost
  • ユーザ名 : BLOG_USER:=user01
  • パスワード : BLOG_PASS:=password
  • crz33.com : BLOGSITENAME:=crz33.com
  • public : RELEASEDIRNAME:=public
  • release.zip : ZIPFILENAME:=release.zip

これくらいを変数にしておけばいいかなと思いました。

echo してみる

実際にコマンド発行せずに、正しく実装できているか確認します。

Makefile に@echoつけて実行してみます。

BLOG_HOST:=localhost
BLOG_USER:=user01
BLOG_PASS:=password
BLOG_SITE_NAME:=crz33.com
RELEASE_DIR_NAME:=public
ZIP_FILE_NAME:=release.zip

push:
	@echo "cd ./$(RELEASE_DIR_NAME) && zip -r ../$(ZIP_FILE_NAME) ."
	@echo "sshpass -p $(BLOG_PASS) scp -o StrictHostKeyChecking=no ./$(ZIP_FILE_NAME) '$(BLOG_USER)'@$(BLOG_HOST):~/$(BLOG_SITE_NAME)"
	@echo "sshpass -p $(BLOG_PASS) ssh -o StrictHostKeyChecking=no -l $(BLOG_USER) $(BLOG_HOST) 'cd ~/$(BLOG_SITE_NAME); unzip -o ./$(ZIP_FILE_NAME); rm -f ./$(ZIP_FILE_NAME)'"
	@echo "rm ./$(ZIP_FILE_NAME)"

make してみる。

[~/workspace/crz33-gatsby] $ make push
cd ./public && zip -r ../release.zip .
sshpass -p password scp -o StrictHostKeyChecking=no ./release.zip 'user01'@localhost:~/crz33.com
sshpass -p password ssh -o StrictHostKeyChecking=no -l user01 localhost 'cd ~/crz33.com; unzip -o ./release.zip; rm -f ./release.zip'
rm ./release.zip

うまくコマンド作れてるようです。

念の為、変数書き換えて実行。

[~/workspace/crz33-gatsby] $ make push BLOG_HOST=dummyhost BLOG_USER=userXX BLOG_PASS=PASS
cd ./public && zip -r ../release.zip .
sshpass -p PASS scp -o StrictHostKeyChecking=no ./release.zip 'userXX'@dummyhost:~/crz33.com
sshpass -p PASS ssh -o StrictHostKeyChecking=no -l userXX dummyhost 'cd ~/crz33.com; unzip -o ./release.zip; rm -f ./release.zip'
rm ./release.zip

うまく実行時変数で書き換えれました。

あとは@echoを外して動かしてみて稼働確認できれたので、Makefile としてはオッケーです。

オプション面倒なのでテンプレート化する

やっぱり make のたびにオプションでパスワードとかを指定するのは面倒です。 でも、Makefile を git 管理したいときに、ホスト名、ユーザ名、パスワードを直書するとやばいです。

そこで、パスワードなどをダミーにした Makefile.template を作って、これを git で管理することにしました。

あとは誤ってパスワード直書きした Makefile のほうがコミットされないように、 .gitignoreに Makefile を追加しました。

# Makefile
Makefile

Makefile.template を作って、ダミーの値を入れて置きました。

[~/workspace/crz33-gatsby] $ cp Makefile Makefile.template

以上です。

広告