XServer Static × GitHub Actions で静的サイトを自動デプロイする方法
今回、XServer Staticを契約して静的サイトを公開し、GitHub Actionsを利用して自動デプロイの環境を構築しました。
もともと、静的サイトのホスティングにはさまざまな選択肢がありますが、XServer Staticは手軽に使えて、高速な配信が可能な点が魅力です。
また、GitHub Actions を組み合わせることで、リポジトリに push するだけでデプロイが完了する環境を作ることができます。
この記事では、XServer Static の契約から、GitHub Actions を使ったデプロイ環境の構築までの手順を備忘録としてまとめます。
目次
XServer Static の契約方法と基本設定
XServer Staticは、エックスサーバー株式会社が提供する、静的コンテンツの運営に特化したクラウドホスティングサービスです。
主な特徴
静的コンテンツ専用
HTML、CSS、JavaScript などの静的ファイルのホスティングに最適化されています。
高性能サーバー
オールSSDの高速サーバーで、HTTP/2 にも対応しています。
独自ドメイン対応
自動生成される初期ドメインに加え、独自ドメインの利用も可能です。
無料SSL
独自SSLを無料で利用でき、セキュリティを強化できます。
契約手順
公式サイトにアクセス
XServer Static 公式サイト にアクセスします。
「お申し込み」ボタンをクリック
画面上部の「お申し込み」ボタンをクリックします。
お客様情報の入力
必要な情報を入力し、利用規約と個人情報の取り扱いに同意します。
メール認証
入力したメールアドレスに送信される認証コードを入力し、認証を完了します。
電話認証
SMSまたは音声通話で送られる認証コードを入力し、認証を完了します。
サーバーIDの設定
サーバーIDを設定し、申し込みを完了します。
基本設定
管理画面へのログイン
申し込み完了後、管理画面にログインします。
FTPの利用設定
初期状態では「FTPの利用」が「利用しない」になっているため、「利用する」に変更します。
ローカル環境で静的サイトを準備し、GitHub リポジトリを作成する
XServer Static への自動デプロイを実現するため、まずはリポジトリを作成し、ローカル環境で静的サイトを作成します。
GitHub リポジトリの作成
まず、GitHub にリポジトリを作成します。
GitHub で新しいリポジトリを作成
GitHub にログインし、右上の「+」アイコンから「New repository」を選択します。
リポジトリ名を入力し、必要に応じて説明を追加します。
「Public」または「Private」を選択し、「Create repository」をクリックします。
.gitignore ファイルの作成
node_modules/やdist/など、Git 管理から除外するファイルやフォルダを指定します。
プロジェクトのディレクトリ構成
次に、ローカル環境でのプロジェクト構成を決めます。
私は普段、gulpと.ejsファイルを使用して作成しています。
簡単なディレクトリ構造は下記です。
/project-name
├── /dist # デプロイ対象の公開ディレクトリ
│ ├── index.html
│ ├── scss/
│ ├── js/
│ ├── images/
├── /src # 開発用のファイル（ビルドツールを使う場合）
│ ├── scss/
│ ├── js/
│ ├── ejs/
│ ├── images/
├── .gitignore # Git管理しないファイルを指定
└── package.json # npmを使用する場合ポイント
dist/フォルダがデプロイ対象 になります。src/を使って開発し、dist/にビルドする形にすると管理しやすくなります。.gitignoreにnode_modules/などの不要なファイルを指定し、リポジトリを適切に管理します。
ここまでで、ローカル環境での静的サイトの準備と GitHub リポジトリへの初回プッシュ が完了しました。
GitHub Actions を設定して XServer Static へ自動デプロイを実現する
ローカル環境での静的サイトの準備と GitHub リポジトリへの初回プッシュが完了したので、次に GitHub Actions を設定し、XServer Static へ自動デプロイ を行います。
GitHub Secrets に FTP 接続情報を登録する
XServer Static へのデプロイには FTP を利用 するため、GitHub Actions でFTP接続情報を安全に管理できるように、GitHub Secrets に登録 します。
登録手順
- GitHub リポジトリの「Settings」タブを開く
- 「Secrets and variables」→「Actions」を選択
- 「New repository secret」をクリック
- 以下のシークレットを追加し、「Save」ボタンを押す
FTP_SERVER： XServer Static の FTP サーバー名（例:ftp.static.xserver.jp）FTP_USERNAME： XServer Static の FTP ユーザー名FTP_PASSWORD： FTP パスワード（設定したもの）
GitHub Actions のワークフローを作成する
.github/workflows/deploy.yml を作成し、以下の内容を記述
name: Deploy to Xserver via FTP
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install dependencies and build
run: |
npm install
npm run build
- name: Deploy to Xserver via FTP
uses: SamKirkland/FTP-Deploy-Action@v4.3.5
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
local-dir: ./dist/
調整・改善点
actions/checkoutを v4 に更新（最新バージョンを使用）local-dirのパスを./dist/に統一（誤りがないか再確認）
特に大きな修正は不要で、このままの設定で問題なく動作するはずです。
GitHub Actions の動作確認
- GitHub Actions のワークフローを作成後、Git に追加 & プッシュ
- GitHub Actions の実行を確認
- GitHub の「Actions」タブに移動し、ワークフローが実行されていることを確認
✔マークがつけば成功、エラーが出た場合はログをチェック
- XServer Static のサイトを開き、変更が反映されているか確認
おわりに
本記事は、自分自身の備忘録としてまとめたものですが、XServer Static と GitHub Actions を組み合わせた自動デプロイ環境を構築したい人にも役立つ内容 になったかと思います。
今後、さらに運用を進める中で改善点が出てきたら、またアップデートしていきます。
