さくらのレンタルサーバで自動デプロイ【SSH編】

2024年1月22日 17:54

さて、前回Astro.jsを使って自社サイト構築を行った訳ですが。

ビルド→PowerShell
ソース管理→Git
ファイル転送→WinSCP

と、それぞれバラバラに行っていて時間が勿体ないし間違いも起こりそうで、気持ち悪い。

ちなみに自社システムはVue.jsを採用していて、srcコードをpushしAWS CodeCommit上でマージしたらビルド→デプロイまで自動でやってくれるよう担当社員が構築してくれている。

過去の自社サイトやキャンペーンサイトもAWS上で管理していたのだが、社長が毎回環境構築を頼むのが時間もかかり嫌になったらしく、私でも扱えるレンタルサーバを使って欲しいと頼まれたので「さくらのレンタルサーバ　スタンダードプラン」で、上記の動きを構築出来ないかなと試行錯誤してみた。

さくらのレンタルサーバにリポジトリを設置

SSH接続

$ ssh [ユーザー名]@ [ユーザー名].sakura.ne.jp
[ユーザー名]@[ユーザー名].sakura.ne.jp's password:

サーバーパスワードを聞かれるので入力してログインする。

Welcome to FreeBSD!

がでたら成功！
ちょっと嬉しい。

公開鍵認証

鍵認証した方がラクチンだけど、今回は割愛します…
下記サイトがとても解りやすかったです。ありがとうございます！

SSH接続の鍵（キー）の作成
https://brainlog.jp/programming/post-1088/

レンタルサーバにSSH接続をする方法（エックスサーバー、さくらのレンタルサーバ）
https://brainlog.jp/server/post-1104/

さくらのレンタルサーバーに公開鍵認証でSSH接続をする
https://cafehedgehogs.com/linux/88.html

ペアリポジトリを作成

いったん現在位置を確認。

% pwd
/home/[ユーザー名]

リポジトリ用のディレクトリを作成

例ではディレクトリ名を「repository/git-test」とする。

% mkdir -p repository/git-test.git

作成したディレクトリへ移動して、現在位置を確認しておく。

% cd repository/git-test.git
% pwd
/home/[ユーザー名]/repository/git-test.git

リポジトリを初期化

% git init --bare --shared
Initialized empty shared Git repository in /home/[ユーザー名]/repository/git-test.git/

”Using 'master' as the name for the initial branch. This default branch name”～
メッセージが出た時は、デフォルトブランチ名が「master」になっているので「main」に変更して現在のブランチを確認する。

% git branch -m main
% git branch --show-current
main

サーバー内にリポジトリをクローン

/home/[ユーザー名]/www/ 配下に公開用のディレクトリを作成して、移動する。
今回作成するディレクトリ名を「newsite」とします。

% mkdir /home/[ユーザー名]/www/newsite
% cd /home/[ユーザー名]/www/newsite

「newsite」ディレクトリに、先程作成したペアリポジトリ「git-test.git」をクローンする。

% git clone /home/[ユーザー名]/repository/git-test.git/
Cloning into 'versions'...
warning: You appear to have cloned an empty repository.
done.

リポジトリへ紐づいている事を確認

git remote -v コマンドで作成したクローンがリポジトリへ紐づいている事を確認して、リポジトリの作成は完了。

% cd /home/[ユーザー名]/www/newsite/git-test/
% git remote -v
origin	git@github.com:[ユーザー名]/git-test.git (fetch)
origin	git@github.com:[ユーザー名]/git-test.git (push)

ソースコードをpushしたら自動でデプロイ

先程作成したペアリポジトリ「git-test.git」ディレクトリ内にある「hooks」内に「post-receive」というファイルを作成します。
「post-receive」は、pushがあった際にこちらに書いたスクリプトを実行出来るファイルです。
中身は下記のように書きました。

% cd /home/[ユーザー名]/repository/git-test.git/hooks/
% touch post-receive
% ls
post-receive

% vi /home/[ユーザー名]/repository/git-test.git/hooks/post-receive

#!/bin/sh
cd /home/[ユーザー名]/www/newsite/git-test
unset GIT_DIR
git pull origin main

:wqで保存して終了。中身を確認。

% cat post-receive
#!/bin/sh
cd /home/[ユーザー名]/www/newsite/git-test
unset GIT_DIR
git pull origin main%

パーミッションの変更

ファイルやディレクトリを自由に使用できるようにするため、「post-receive」ファイルのパーミッションを「777」へ変更する。

chmod 777 ~/repository/git-test.git/hooks/post-receive

(私はなぜか上手くできなくて、WinSCPを使って変更しました…)

ローカル環境にクローン

ローカル環境にクローンします。

git clone ssh://[ユーザー名]@[ユーザー名].sakura.ne.jp/home/[ユーザー名]/repository/git-test.git

パスワードを入力し、「git pull 」で最新のバージョンに更新する。

[ユーザー名]@[ユーザー名].sakura.ne.jp's password:
% git pull

動きを確認

pushしたらちゃんとデプロイされるか、確認します。
ローカルで「index.html」ファイルを作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>Hello world!</h1>
</body>
</html>

mainブランチへpushしてみます。

$ git add 'index.html'
$ git commit -m 'First Commit'
$ git push origin main

公開ディレクトリとして作成したページを開いて、「Hello world!」が表示されていたら成功です。

今回は「/newsite/git-test/」へ紐づけたので、
https://[ユーザー名].sakura.ne.jp/newsite/git-test/
を開いてみます。

デプロイ成功です！

テスト環境

とはいえいきなり本番環境へアップするのは怖いので、developにpushしてテスト環境で確認出来るようにしました。

基本的に同じ作業です。
/home/[ユーザー名]/www/ 配下にテスト公開用のディレクトリを作成して、移動する。今回作成するディレクトリ名を「dev」とします。

% mkdir /home/[ユーザー名]/www/dev
% cd /home/[ユーザー名]/www/dev

「dev」ディレクトリに、先程作成したペアリポジトリ「git-test.git」をクローンする。

% git clone /home/[ユーザー名]/repository/git-test.git/
Cloning into 'versions'...
warning: You appear to have cloned an empty repository.
done.

git remote -v コマンドで作成したクローンがリポジトリへ紐づいている事を確認して、リポジトリの作成は完了。

% cd /home/[ユーザー名]/www/dev/git-test/
% git remote -v
origin	git@github.com:[ユーザー名]/git-test.git (fetch)
origin	git@github.com:[ユーザー名]/git-test.git (push)

ここから、先程作成した「post-receive」ファイルを編集して、developへpushしたらテスト公開用ディレクトリ「dev/git-test」へデプロイされるようにします。

% cd /home/[ユーザー名]/repository/git-test.git/hooks/
% vi /home/[ユーザー名]/repository/git-test.git/hooks/post-receive

#!/bin/sh
cd /home/[ユーザー名]/www/dev/git-test
unset GIT_DIR
git pull origin develop

#!/bin/sh
cd /home/[ユーザー名]/www/newsite/git-test
unset GIT_DIR
git pull origin main

:wqで保存して終了。中身を確認。

% cat post-receive
#!/bin/sh
cd /home/[ユーザー名]/www/dev/git-test
unset GIT_DIR
git pull origin develop

#!/bin/sh
cd /home/[ユーザー名]/www/newsite/git-test
unset GIT_DIR
git pull origin main%

こちらもdevelopへpushして
https://[ユーザー名].sakura.ne.jp/dev/git-test/
を開いて動作確認してみてください。

ビルドどうするの

これまでの作業で、冒頭で並べた作業

ビルド→PowerShell
ソース管理→Git
ファイル転送→WinSCP

このうち、ソース管理とファイル転送を一度で出来るようになりました。
自社サイトはほとんど更新が無く、月一でニュースを更新する程度なのでビルドは手動でやって、しばらくこのまま作業を続けていました。

そうは問屋が卸さないよ

社長から年末の忙しい時期に「ニュース更新をこちらで出来るようにして欲しい。ほらWordPressとか使って。」という依頼が来ました。

以前自社キャンペーン紹介サイトをWordPressを使って構築していて、イベントなどのお知らせ更新を社長自らやっていたのを思い出し自己完結したくなったようで。

ならいっそ全部WordPressにしちゃっても良いか確認したところ、「時間はかけないで欲しい」と…どの方法を使うにしても時間、時間はちょっとはかかるよね。もうアメブロとか使ってRSSから引っぱってきたら良いんじゃないかとか色々考えたのだけど、私がAstro.jsを採用してしまったせいで出てきたビルド問題。

次回、立ち向かいます。時間、は少しはいただけました。

次回予告：へなちょこだけど巷で噂のヘッドレスCMSにちょうせんだ！

参考サイト

こちらの記事を参考にさせていただきました。
ありがとうございます！

さくらのレンタルサーバーにgitのリモートリポジトリを作成する
https://pointsandlines.jp/server-infra/sakura-git-remote-repository