無事に20年続ける事ができたのも、クライアントさま、a-blog cms のパートナーやユーザーさま、そして日々支えてくださるスタッフの皆さんのおかげです。心より感謝申し上げます。

20年前、私たちは「誰でもウェブサイトを運営できるように」という思いのもと、現在の a-blog cms の前身である a-blog のリリースに合わせて会社を設立しました。以来、多くの挑戦を経ながらも、常に変化するウェブの世界で進化し続けることができたのは、皆さまのご支援と信頼のおかげです。

a-blog cms を中心とした、当社が提供する様々な製品やサービス、そして弊社で制作しているウェブサイトが、多くの企業やクリエイターの皆さまのビジネスに貢献できていることを非常に嬉しく思います。これからも、より一層の技術革新とサポートに努め、クライアントさまの成功を共に目指してまいります。

引き続き、アップルップル へのご愛顧を賜りますようお願い申し上げます。これからも、さらなる成長と挑戦を続け、皆さまと共に新たな未来を築いてまいります。

有限会社アップルップル
代表取締役 山本 一道

平素は格別のご愛顧をいただき、心から御礼申し上げます。
誠に勝手ながら以下の期間を夏季休業日とさせていただきます。
期間中の通常業務（CMS関連事業・Webサイト制作事業・CRM関連事業）は休業となります。


休業期間：2024年8月10日(土)〜8月18日(日) 迄

休業中に頂いたお問い合わせについては、休業期間終了後に順次回答させていただきます。
ご迷惑をおかけしますが、ご了承のほどよろしくお願いいたします。

※コワーキングスペースの休業日については、ベースキャンプ名古屋のWebサイトをご覧ください。

VPS でマルチサイトを運用する機会があり、いくつか勉強になったことがあったので記事にします。

またこの記事では、マルチサイトをルートドメインとサブドメインを利用した複数サイトを指していることと、サーバーの設定は最小限の設定ですので本番運用される際は十分にご注意ください。

VPS でマルチサイトを運用する仕組み

この記事で触れること、実装して何ができるかについて説明します。www.example.com または example.com のルートドメインと vhost.example.com のようなサブドメインのディレクトリを用意し、nginx のバーチャルホストを利用してアクセス先を分割します。そして、バーチャルホストに SSL と a-blog cms を動作させるための設定を行い、サブドメインは SFTP のみでアクセスできるようにします。この実装を行うことでルートドメインで運用を行い、サブドメインでは特定のエンドユーザーにサイトを与え、複数のサイト運用ができます。

ディレクトリの構成

ルートドメイン

/var/www/html/ にします。

サブドメイン

/var/www/vhost/ にします。エンドユーザーには触って欲しくないファイルがある場合は、サブドメインのディレクトリ直下に2つ用意し、1つブラウザに表示するためのアプリケーションを設置し、その中からユーザーが触っていいファイルだけもう一つのディレクトリに抜き出して、ブラウザ表示用にシンボリックリンクを貼ります。これにより SFTP での制限を設け、エンドユーザーはファイルを操作することができるようにしていきます。

nginx の Webサーバー設定

まずはサンプルコードをご確認ください。ルートドメインの設定です。

# -------------------------
# サーバー設定
# -------------------------

# www つきにリダイレクト
server {
    listen 80;
    listen 443 ssl;
    server_name example.com;

    location / {
         return 301 https://www.example.com$request_uri;
    }
}

# SSL にリダイレクト
server {
    listen 80;
    server_name www.example.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

# SSL の表示用サーバー設定
server {
    listen 443 ssl;
    server_name www.example.com;

    # SSL / LTS
    ssl_certificate /etc/nginx/ssl/crt/example.crt; // 公開鍵にコモンネームなどの情報をつけたもの
    ssl_certificate_key /etc/nginx/ssl/key/example.key; // 秘密鍵

    # ドキュメントルート
    root /var/www/html;
    index index.php;

    include snippets/example.conf; // a-blog cms のサーバー設定

www付きへリダイレクトしていることが server_name と location から分かります。また、SSLとドキュメントルートが先ほど用意したパスへ繋がるように設定しています。

そしてもう一つ、サブドメインの設定も必要です。server_name を vhost.example.com​ のようにサブドメインに置き換えるだけで大丈夫です。SSL については、サブドメインも含め1つの証明書で暗号化できる Xserver ワイルドカードSSL を使用しています。ですので ssl_certificate​ と ssl_certificate_key​ は、ルートドメインと共通で使用できます。ドキュメントルートもサブドメイン用のディレクトリパスに変えてください。

nginx で動かす a-blog cms

a-blog cms を動作させるためのサーバー設定も必要です。a-blog cms 同梱の .htaccess​ は Apache で動作させるためのファイルですので nginx では使えません。ルートドメインもサブドメインも a-blog cms ですので、共通のファイルで管理をして Webサーバー設定の include で以下の設定を読み込みます。

# -------------------------
# これは、a-blog cms を動作させるための設定です。Apache の .htaccess に当たります。
# -------------------------

# 隠しファイルへのアクセス禁止
location ~ /\. {
        deny all;
}

# アセットのキャッシュ・セキュリティ設定
location ~* \.(css|js)$ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000";
        add_header X-Frame-Options SAMEORIGIN;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";
        add_header Strict-Transport-Security "max-age=31536000";
        add_header Referrer-Policy "strict-origin-when-cross-origin";
        gzip on;
        gzip_types text/css application/javascript;
        gzip_vary on;
}

# 画像およびメディアファイルのキャッシュ設定
location ~* \.(gif|jpeg|jpg|png|flv|mp4|ico|svg|webp)$ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000";
        add_header ETag "";
}

# FastCGI 設定
location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;  # PHPのバージョンに応じて変更
}

# 画像のWebP対応
location ~* ^(.+)\.(jpe?g|png)$ {
        set $base $1;
        set $ext $2;
        if ($http_accept ~* "image/webp") {
            set $webp_suffix ".webp";
        }
        if ($arg_type = "original") {
            set $webp_suffix "";
        }
        try_files $base$webp_suffix /path/to/your/webp/images$uri =404;
        add_header Vary Accept;

        location ~* ^(.+)\.webp$ {
            expires 365d;
            add_header Cache-Control "public, max-age=31536000";
            add_header Content-Type image/webp;
        }
}

# ルートディレクトリの処理設定
location / {
try_files $uri $uri/ /index.php$is_args$args;
}

# URL書き換え設定
rewrite ^/(.*)/index\.html/?$ https://$host/$1/ permanent;

SSH / SFTP

ここでは、サブドメインをエンドユーザーが触ることを想定して設定していきます。

前提として、サブドメインのサイトにはユーザーID とパスワードの発行が必要です。このユーザーID とパスワードでディレクトリ権限を与えます。ただ、これだと ssh でアクセスされセキュリティに問題があるので、SFTP でのアクセスのみ許可するようにします。

そのために SFTPサーバーの internal-sftp を使用します。internal-sftp は、外部プログラムに依存せずに、SSHデーモンの一部として動作する内部サブシステムです。internal-sftp を使うにあたって注意点があり、ChrootDirectory で指定しているディレクトリとその親達は root権限にしておく必要があります。そして、アクセスするユーザーに root権限のディレクトリの書き込み権限は与えないようにします。権限を与えていいのは、ChrootDirectory の中の ファイル / ディレクトリ のみです。もし間違っていると、セキュリティ上の理由でアクセス拒否されてしまいます。

以下が sftp の設定です。ChrootDirectory は sftp のアクセス先を設定してください。

Subsystem sftp internal-sftp
Match User !exampleUser1,!exampleUser2
ChrootDirectory /var/www/vhost/sftp
ForceCommand internal-sftp

以上が、ルートドメインで運用を行い、サブドメインでは特定のエンドユーザーにサイトを与え、複数のサイト運用をする仕組みです。

実装をしてみて

実装していてよく権限で困った印象があります。SFTP の ChrootDirectory だったり、a-blog cms の一部が動作しなかったことがありました。サーバー自体この時ほぼ初めて触ったこともあり、いい経験になりました。

2024年4月の名古屋から始まり、5月大阪、6月福岡と東京で「htmx初心者向け勉強会」というイベントを開催してきました。 前半は CMS を絡めず静的な HTML ベースで純粋に htmx で何ができるのかをご紹介し、後半はバックエンド側を a-blog cms にお任せすると、こんな実装になるということをお伝えしてきました。

• 名古屋・大阪で利用した勉強会ドキュメント
• 福岡・東京で利用したハンズオンサイト
• リアルイベントのレポート
  • 名古屋 / 2024年4月23日 16人
  • 大阪 / 2024年5月22日 9人
  • 福岡 / 2024年6月14日 13人
  • 東京 / 2024年6月20日 9人

名古屋・大阪で利用した勉強会ドキュメント

当初は、htmx の属性について1枚の HTML にまとめて、そのファイル自身を修正して自身のサーバーにアップして動きを見てもらうというカタチで開催していました。

• htmx入門
• a-blog cms & htmx 入門

しかし、このカタチだと、話を聞いてもらうだけで実際に手を動かして検証してもらうことが、あまりできてなかったと感じ、後半の地域では 以下のようにアップデート をしています。

福岡・東京で利用したハンズオンサイト

htmx@blog テーマという htmx を使ったブログテーマの上で、CMS にログインする事で簡単に htmx のコードを書き換えて試すことができるようにしました。また、全員が同じサイトではなく a-blog cms のお試しサーバーを利用し、テーマを勉強会用のものを選択すると、個々のサイトがサブドメインで作られるようにしてハンズオンをしっかりできるようにしました。

上記のキャプチャのリンク先は、ログインできないサンプルとしてリンクしておきます。（日数が経つと消えてしまうので、無くなっていたら以下のリンクからハンズオンサイトを作ってご覧ください）

ablogcms.io というお試し専用のサービスサイトは 30日で削除されますので、お気軽にお試しください！

• 勉強会 ハンズオンサイト
• htmx@site（htmx化されたコーポレートサイトのサンプル）
• htmx@blog（htmx化されたブログサイトのサンプル）

リアルイベントのレポート

名古屋 / 2024年4月23日 16人

名古屋での勉強会では、参加者全員が a-blog cms のユーザーの方ばかりでした。そのため、前半のセッションでは、htmx の基本概念や静的な HTML でのデモを通じて、初めての方にも理解しやすい内容を心がけました。後半では、a-blog cms と htmx の連携に重点を置き、実際のプロジェクトでの活用方法を具体的に解説しました。

参加された中でも IDEASOURCE の新さんは、翌日に自社のサイトのコンテンツの一部を htmx 化し、ブログの記事を公開いただきました。 a-blog cmsとhtmx（jsライブラリ）は非常に相性が良い

大阪 / 2024年5月22日 9人

大阪での勉強会では、名古屋でのフィードバックを反映し、より具体的な実装例を交えながら進めました。参加者の皆さんからは、「実際に手を動かすことで、より理解が深まった」との声を多くいただきました。

大阪での定期勉強会のための会場を探しています！ オススメな会場があればお知らせください。

福岡 2024年6月14日 13人

福岡での勉強会では、ハンズオンのやり方を変更し、より実践的で分かりやすい内容に改訂しました。参加者の半分は a-blog cms を知らない方々でしたので、htmx に加え a-blog cms についても詳しく説明する機会となりました。これにより、参加者には htmx と a-blog cms の両方の魅力を感じていただけたと思います。

会場には、さくらインターネット 福岡オフィス をお借りしました。 htmx 化した さくらインターネット版「10万件のサンプルサイト 」

東京 / 2024年6月20日 9人

東京では、午後から仕事時間中に参加が可能な人が参加できるイベントと、仕事が終わってから参加しやすい夜の2部構成で行いました。

htmx のために Ajax 関連の機能についてアップデートがされた a-blog cms 3.1.17 と htmx 2.0 にメジャーバージョンアップされた新しいハンズオンサイトも準備しての開催となりました。具体的な事例としては FAQ コンテンツを htmx を活用して実装するには、どう作るべきかなど、実際のプロジェクトでの活用方法についても触れ、多くの参加者にとって有意義な時間となりました。

最後に

まだ使い始めて4ヶ月くらいで、利用している機能は紹介しているものくらいなので、まだまだ知らない機能も多くあるのではと思っています。持っている情報はできるだけ共有させていただきました。

また、他の地域での勉強会やオンラインイベントも企画を進めておりますので、こんな使い方もオススメだという情報をお持ちの方がいたら、ぜひご参加いただき教えていただけると助かります。

SEO対策やWEB広告支援のトゥモローマーケティング株式会社様が運営するオウンドメディアにて、アップルップルがおすすめのWebサイト制作会社として掲載されました。

アップルップルのWebサイト制作は、運用のしやすさとセキュリティー確保を自社開発のCMS「a-blog cms」で実現します。
また、独自の管理システムの導入や外部サービスとの連携も得意です。計画段階の企画であっても、専門的な視点から運営をよりスムーズに行えるようなご提案をいたします。

まずはお気軽にご相談ください。