microCMSを使用した静的サイトをXserver Staticへデプロイしてみる

チュートリアル

2024/08/25

2024/08/26

中野紘子

Xserver Staticとは？

「Xserver Static」は静的コンテンツの運営に特化したクラウドホスティングサービスで、高速かつ安全性に優れたサーバー環境を、広告なしで無料（！）で利用できるそうです。

Xserver Staticの特長

静的コンテンツ専用サーバである

HTML、CSS、JavaScriptなどの静的コンテンツの運営に特化しており、Next.jsやAstroなどのWebフレームワークのデプロイ先としても利用できます（ただし、静的サイト生成に限ります）。もちろん、microCMSを使用したSSGサイトのデプロイも可能です。ただし、WordPressなどの動的サイトには対応していません。

CI/CDの機能はない

Next.jsやAstroなどのWebフレームワークからデプロイするには、GitHub ActionsやCircleCIなどのCI/CDを提供しているサービスを利用する必要があります。

独自ドメインが利用できる

無料の初期ドメイン（https://サーバーID.static.jp というURL）に加えて、独自ドメインにも対応しており、Xserverや他のサービスで取得したドメインを利用することができます。

独自SSLが無料で利用できる

初期ドメイン・独自ドメイン問わず、独自SSLを無料で利用できるため、簡単にセキュアなHTTPS通信を実現できます。

microCMSを使用した静的サイトをXserver Staticへデプロイしてみる

Xserver Staticのセットアップ

1. 公式サイトの「サーバを利用する」ボタンより申し込みを行います。

2. Xserver側でサーバーアカウントの設定が完了すると、「サーバーアカウント設定完了のお知らせ」という件名のメールが届きます。メールにはログインURLなどの情報が記載されているので、管理画面にログインしてください。
※この時点でサイトURLにアクセスすると、「無効なURLです。プログラム設定の反映待ちである可能性があります。しばらく時間をおいて再度アクセスをお試しください。」と表示されましたが、少し時間を置くと解消され、「このサーバーに、ファイルのアップロードができます」というページが表示されるようになりました。

3. 「サーバ設定」から、初期状態では「FTPの利用」の設定が「利用しない」になっているため、「利用する」に変更します。

4. トップページの「ファイル管理」からファイルマネージャにアクセスすると、以下4点のファイルがすでにアップロードされています。

index.html
default_page.png
.htaccess
.ftpaccess（「FTPの利用」を「利用する」に変更すると自動的に削除されます）

適当な画像ファイルなどをアップロードし、ブラウザで表示されることを確認します。これでFTPの疎通確認が完了です。
例：hogehoge.pngをルートディレクトリにアップロードし、ブラウザからhttps://サーバーID.static.jp/hogehoge.pngにアクセスし、表示を確認する

microCMS + Astroのセットアップ

1. 今回はmicroCMSテンプレートを使用します。ただし、使用できるのは静的サイト生成（SSG）対応のテンプレートに限られるため、テンプレート「シンプルな喫茶店のWebサイト」を選択します。

2. microCMSテンプレートの導入方法については割愛します。READMEやこちらの記事などを参考に、デプロイ直前のステップまで進めてください。

GitHub（一部microCMS）のセットアップ

1. GitHubリポジトリのSettings -> Secrets and variables -> Actionsより、「New repository secret」をクリックして、Nameに識別名、Valueに値を入力します。

今回は以下6点を登録します。

FTP_SERVER：FTPサーバー名（Xserver Static管理画面「FTPの利用」より確認可能）
FTP_USERNAME：FTPユーザー名（Xserver Static管理画面「FTPの利用」より確認可能）
FTP_PASSWORD：Xserver Staticで設定したFTPパスワード
PUBLIC_MICROCMS_API_KEY：microCMSのAPIキー（microCMS管理画面「歯車マーク（サービス設定）」をクリック→「APIキー」より確認可能）
PUBLIC_MICROCMS_SERVICE_DOMAIN：microCMSのサービスID（microCMS管理画面の左上２行目より確認可能）
PUBLIC_SITE_URL：サイトURL（初期ドメインの場合は https://サーバーID.static.jp）

2. こちらの記事を参考に、Webhookの登録を行います。今回は、トリガーイベント名を「microcms」で登録します。

3. リポジトリに.github/workflows/ディレクトリを作成し、そのディレクトリ内にYAMLファイル（ファイル名は自由）を作成します。

deploy.yml

name: Deploy to Xserver Static

on:
  push:
    branches:
      - main  # mainブランチにpushされたときに実行
  workflow_dispatch:
  repository_dispatch:
    types: [microcms]  # Webhookが通知されたときに実行

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Check out the repository
      uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 20

    - name: Install dependencies
      run: npm install

    - name: Build the project
      env:
        PUBLIC_MICROCMS_SERVICE_DOMAIN: ${{ secrets.PUBLIC_MICROCMS_SERVICE_DOMAIN }}
        PUBLIC_MICROCMS_API_KEY: ${{ secrets.PUBLIC_MICROCMS_API_KEY }}
        PUBLIC_SITE_URL: ${{ secrets.PUBLIC_SITE_URL }}
      run: npm run build

    - name: Install lftp
      run: sudo apt-get install -y lftp

    - name: Deploy to Xserver Static
      env:
        FTP_SERVER: ${{ secrets.FTP_SERVER }}
        FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
        FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
      run: |
        lftp -c "
        open -u $FTP_USERNAME,$FTP_PASSWORD $FTP_SERVER
        mirror -R --delete -x \".htaccess\" ./dist /  # .htaccessを除外して他のファイルを同期
        bye
        " || true

4. YAMLファイルをpushすると、GitHub Actionsが実行されます。GitHub Actionsが完了し成功した後、ブラウザでサイトURLを確認すると、デプロイされたサイトが表示されているはずです。
今回作成したサイトはこちら▶ https://microcmssite.static.jp

5. microCMSで記事の新規作成や編集など、Webhook通知を設定したアクションを行うと、GitHub Actionsが実行され、サイトが再度デプロイされます。

以上、microCMSを使用した静的サイトをXserver Staticへデプロイする方法をご紹介しました。ぜひ、microCMSテンプレートとXserver Staticを活用して、静的サイトのデプロイをお試しください！