Tech blog Produced by FOURIER

DeployerでTypeScriptとSCSSをトランスパイルしてアップロードしよう

Sena Sena 2023.05.11

はじめに

皆さんはDeployerを使っていますでしょうか? DeployerPHPで作られた、サーバーにコマンドを発行してデプロイを自動的に行う便利なツールです。

最近のフロントエンドの開発はNode.jsを活用して開発しています。 その時Deployerを使ってデプロイをするにはどうしたら良いでしょうか?

今回はDeployerTypeScriptSCSSをトランスパイルするやり方を解説します。

構成図

準備

まずデプロイ先のサーバーにSSHが出来るようにしておきましょう。

今回は秘密鍵と公開鍵を使って認証する方法を想定します。

DeployerをDocker内で動かす

./_docker/DockerFileを以下のように書きましょう。

FROM php:8.1

COPY --from=node:18 /usr/local/bin /usr/local/bin
COPY --from=node:18 /usr/local/lib /usr/local/lib

RUN apt update -y

## DeployerでSSH接続するので使う
RUN apt install -y ssh git rsync

docker-compose.ymlを以下のように書きましょう。

version: '3.9'
services:
	deployer:
	    build: ./_docker/deployer
	    working_dir: /work
	    volumes:
	      - ./:/work
	      - ${PRIVATE_KEY_PATH:-.}:/private/key:ro
	    profiles:
	      - cli

.envに以下のコードを追加します。

PRIVATE_KEY_PATHに秘密鍵のパスを入力します。

PRIVATE_KEY_PATH=/Users/sena/.ssh/private_ed25519

この鍵はDockerのVolumeで/private/keyとしてマウントされます。

なのでDeploy.phpのホスト定義部分の秘密鍵のパスは'/private/key'と書けばOKです。

host('test')
    ->set('branch', 'main')
    ->setIdentityFile('/private/key')
    ->setSshArguments(['-o StrictHostKeyChecking=no']); // 初めてSSHにアクセスする際の確認を無効

Node.jsでトランスパイルを行う

DeployerでNode.jsを動かしてトランスパイルしていくのですが、その時に注意点があります。

トランスパイルされるコードはローカル上にあるため、Pushし忘れやブランチ間違いなどをすると、トランスパイルしたコードだけ違うことになってしまいます。

それを未然に防ぐため、ローカルとサーバーでコミットハッシュを確認し照合するようにします。

これにより、万が一の事故を防ぐことが出来ます。 以下はこの部分のコード例です。

desc('compile SCSS/JS and upload');
task('npm:run', function () {
    $remote_hash = run('cat {{release_path}}/REVISION');
    $local_hash  = runLocally('git rev-parse HEAD');
    if ($remote_hash !== $local_hash) throw error("Mismatch commit hash.\nRemote: {$remote_hash}\nLocal:  {$local_hash}");
    runLocally('npm run build');
});

トランスパイルしたファイルをアップロード

あとはトランスパイルしたコードをSFTPでアップロードします。

desc('compile SCSS/JS and upload');
task('npm:run', function () {
    $remote_hash = run('cat {{release_path}}/REVISION');
    $local_hash  = runLocally('git rev-parse HEAD');
    if ($remote_hash !== $local_hash) throw error("Mismatch commit hash.\nRemote: {$remote_hash}\nLocal:  {$local_hash}");
    runLocally('npm run build');
💡
LaravelでViteを使った際を想定したパスにしました。

まとめ

本記事では、Deployerを使ってTypeScriptとSCSSをトランスパイルしてアップロードする方法を書きました。

この方法を使えばコンパイルしたファイルをGitに上げる必要が無くなるため、レポジトリを綺麗に保つことが出来ると思います。

Sena

Sena / Engineer

生涯に亘り技術を極めていきたい。