さくらのレンタルサーバライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法

公開日時: 2023年11月19日 2:20

お久しぶりです。ニシキです。

ドメイン名の自動更新をしっかり忘れていて、しばらくブログが見れない状態になっていました。みなさんはこういうことにならないように、ドメイン名の有効期限をしっかり管理してくださいね。

さて、今回は、さくらのレンタルサーバライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法を紹介します。

具体的には、以下のような流れをGitLab CI/CDで実現します。

Astroのビルドを実行する。
ビルド成果物をさくらのレンタルサーバライトにアップロードする。

今回、2.の処理にはlftpを使用、FTPSでのアップロードを行います。

ソースコード

今回のソースコードは以下になります。

.gitlab-ci.yml

stages:
  - build
  - deploy

cache:
  key: ${CI_COMMIT_REF_SLUG}-node-modules
  paths:
    - src/blog/node_modules/

build:
  image: node:lts
  stage: build
  script:
    - cd src/blog
    - npm install
    - npm run build
  artifacts:
    paths:
      - src/blog/dist/

deploy:
  stage: deploy
  script:
    - apt-get update && apt-get install -y lftp
    - lftp -e "set ftp:ssl-auth TLS; set ftp:ssl-force true; set ftp:ssl-allow yes; set ftp:ssl-protect-list yes; set ftp:ssl-protect-data on; set ftp:ssl-protect-fxp yes; set cmd:fail-exit yes; set net:reconnect-interval-base 4; set ftp:use-mdtm no; set ftp:timezone -9; open -u $SFTP_USERNAME,$SFTP_PASSWORD $SFTP_HOST; mirror -R ./src/blog/dist /home/$SFTP_USERNAME/www/blog; quit;"
  dependencies:
    - build
  only:
    - main

さっそく、解説していきます。

解説

1. キャッシュの設定

以下のコードでは、CI/CD毎に全てのモジュールをインストールするのではなく、キャッシュを使用して、ビルド時間を短縮しています。

cache:
  key: ${CI_COMMIT_REF_SLUG}-node-modules
  paths:
    - src/blog/node_modules/

2. ビルド処理の設定

以下のコードでは、Astroのビルドを行っています。

ビルド後に、ビルド成果物をアーティファクトとして保存しています。アーティファクトを保存することで、ビルド処理の結果を次の処理(デプロイ処理)で使用することができます。

build:
  image: node:lts
  stage: build
  script:
    - cd src/blog
    - npm install
    - npm run build
  artifacts:
    paths:
      - src/blog/dist/

3. デプロイ処理の設定

以下のコードでは、lftpを使用して、ビルド成果物をさくらのレンタルサーバライトにアップロードしています。

deploy:
  stage: deploy
  script:
    - apt-get update && apt-get install -y lftp
    - lftp -e "set ftp:ssl-auth TLS; set ftp:ssl-force true; set ftp:ssl-allow yes; set ftp:ssl-protect-list yes; set ftp:ssl-protect-data on; set ftp:ssl-protect-fxp yes; set cmd:fail-exit yes; set net:reconnect-interval-base 4; set ftp:use-mdtm no; set ftp:timezone -9; open -u $FTP_USERNAME,$FTP_PASSWORD $SFTP_HOST; mirror -R ./src/blog/dist /home/$FTP_USERNAME/www/blog; quit;"
  dependencies:
    - build
  only:
    - main

lftpのコマンドでは、以下のような設定を行っています。

set ftp:ssl-auth TLS; : FTP接続でTLS認証を使用するように設定します。
set ftp:ssl-force true; : SSL接続を強制します。
set ftp:ssl-allow yes; : SSL接続を許可します。
set ftp:ssl-protect-list yes; : ディレクトリリストをSSLで保護します。
set ftp:ssl-protect-data on; : データ接続をSSLで保護します。
set ftp:ssl-protect-fxp yes; : FXP接続をSSLで保護します。
set cmd:fail-exit yes; : コマンドが失敗した場合に終了します。
set net:reconnect-interval-base 4; : 再接続の間隔を4秒に設定します。
set ftp:use-mdtm no; : MDTMコマンドを使用しないように設定します。
set ftp:timezone -9; : FTPサーバのタイムゾーンを-9に設定します。
open -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST; : 指定したユーザ名、パスワード、ホストでFTPサーバに接続します。
mirror --delete -R ./src/blog/dist /home/$FTP_USERNAME/www/blog; : ローカルの ./src/blog/dist ディレクトリとリモートの /home/$FTP_USERNAME/www/blog ディレクトリを同期します。--delete オプションはリモートのファイルがローカルに存在しない場合に削除し、-R オプションはローカルからリモートへの同期を行います。
quit; : lftp コマンドを終了します。

GitLab CI/CDの設定

GitLab CI/CDにて変数を設定します。

FTP_USERNAME : FTPサーバのユーザ名
FTP_PASSWORD : FTPサーバのパスワード
FTP_HOST : FTPサーバのホスト

さくらのレンタルサーバライトの設定

さくらのレンタルサーバライトの設定にて、国外からのアクセスを許可します。

まとめ

今回は、さくらのレンタルサーバライトを使用し、GitLab CI/CDを活用して、Astroのビルド成果物を自動的に公開する方法を紹介しました。

正直、今まで面倒くさくて手動でアップロードをしていましたが、これだけの設定で自動的にアップロードできるなら、もっと早くやっておけばよかったと思いました。

今回の記事が、未来の自分を含め、誰かの役に立てば幸いです。

（リハビリがてら、今回ものすごくまじめに書いてみました。やっぱり、まじめに書いたほうが読みやすいですね…。）

蛇足

今回、このブログのレイアウトを変更しました。超絶シンプルなレイアウトになりましたが、Every Layoutっぽい感じの考え方も取り入れてみました。個人的には大変満足です。

それでは～。