さくらのクラウド オブジェクトストレージでサーバーレスなWebサイトをホスティングしてみます。
おまけとしてさくらのクラウド ウェブアクセラレータ(CDN)を挟んでみます。
準備
自分のPCで準備するもの
-
静的なWebサイト(HTML CSS JS等)
- npmなら
$ npm run buildでdistにファイルを生成しておく
- npmなら
-
awsコマンドの実行環境-
s3 syncするため - バージョンに指定があるためインストール方法は後述
-
クラウド側に作成するリソース
- オブジェクトストレージのバケット(月500円/1バケット ～)
- ウェブアクセラレータ (条件付き無料)
1. バケット作成
参考）オブジェクトストレージ サービス基本情報 - Sakura Cloud Docs
https://manual.sakura.ad.jp/cloud/objectstorage/about.html#
-
石狩第一サイト（現在はこれしか無い）にバケットを作成してください
- 作成時に表示されるアクセスキーとシークレットを控えておきましょう。AWS CLIセットアップで使用します
-
バケット名はWebサイトをホストするときのドメインに使用されます
バケット名.s3.isk01.sakurastorage.jp
-
プロジェクトを任意のディレクトリに保存したい場合は
フォルダの作成でフォルダを作っておきます
今回はqiita-testというフォルダにアップロードします。
2. Webサイト作成
今回はnpmでReactを作成しました。静的なら何でも大丈夫です。
npm及びReactの使用方法は省略させていただきます。
$ npm create vite@latest qiita-test --template react
指示に従いnpm installを行いますが、ここでは紹介しません
バケットのルートディレクトリ以外に保存する予定ならパスの設定が必要です。
baseにフォルダ名を設定しておきます
この設定だとhttps://バケット名.s3.isk01.sakurastorage.jp/qiita-test/index.htmlになります
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
base: "/qiita-test/", //←デフォルトでは存在しないので追記
plugins: [react()],
})
適当にWebサイトのコードを書いてビルド
$ npm run build
静的ファイルが生成されればOK
~/qiita-test$ tree dist/
dist/
├── assets
│ ├── index-BfqfN6cf.js
│ ├── index-D8b4DHJx.css
│ └── react-CHdo91hT.svg
├── index.html
└── vite.svg
作成はUbuntuで行いましたが、OSの指定はありません。
2. awsコマンドの用意
awsコマンドの実行環境を用意しオブジェクトストレージにファイルをアップロードします
ブラウザでアップロードしたりWinSCPを使ってもOK
紹介するコマンドはLinux仕様ですが、OSの指定はありません。
参考）過去にリリースされた AWS CLI バージョン 2 をインストールする - AWS
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-version.html
なお、さくらのクラウド オブジェクトストレージを操作するためには最新バージョンではなく、特定のバージョンのAWS CLIが必要です。
参考）【2025年4月17日追記】オブジェクトストレージ AWS CLI および AWS SDK ご利用できないバージョンのご案内 - さくらのクラウドニュース
https://cloud.sakura.ad.jp/news/2025/02/04/objectstorage_defectversion/
$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64-2.22.35.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ sudo ./aws/install
初回のみAWS CLIのセットアップが必要です
$ aws configure
AWS Access Key ID: #オブジェクトストレージのアクセスキーを入力
AWS Secret Access Key: #オブジェクトストレージのシークレットを入力
Default region name: # 何も入力せずにEnter
Default output format: # お好みで設定 or 何もなくてもOKです
aws s3コマンドを使ってアクセスの確認をしておきます。
さくらのクラウド オブジェクトストレージをAWS CLIで操作するときの基本形は以下のとおりで、エンドポイントの指定が必要です。
$ aws --endpoint-url="https://s3.isk01.sakurastorage.jp" s3 操作
確認
# バケットの確認
$ aws --endpoint-url="https://s3.isk01.sakurastorage.jp" s3 ls s3://
# フォルダの確認
$ aws --endpoint-url="https://s3.isk01.sakurastorage.jp" s3 ls s3://バケット名/
3. 成果物をアップロード
awsコマンドを使って成果物(npmでbuildしたファイル)をアップロードします。
今回はdist/からs3://バケット名/qiita-test/です。
~/qiita-test$ aws --endpoint-url="https://s3.isk01.sakurastorage.jp" s3 sync dist/ s3://バケット名/qiita-test/ --acl public-read
upload: dist/vite.svg to s3://バケット名/qiita-test/vite.svg
upload: dist/assets/react-CHdo91hT.svg to s3://バケット名/qiita-test/assets/react-CHdo91hT.svg
upload: dist/assets/index-D8b4DHJx.css to s3://バケット名/qiita-test/assets/index-D8b4DHJx.css
upload: dist/index.html to s3://バケット名/qiita-test/index.html
upload: dist/assets/index-BfqfN6cf.js to s3://バケット名/qiita-test/assets/index-BfqfN6cf.js
--acl public-readオプションを設定すると認証なしでも外部から接続が可能になります。
オブジェクトストレージでWebサイトを公開する場合は--acl public-readが必要ですが、ウェブアクセラレータを利用する場合は必要ありません。
4. アクセスしてみよう
任意のブラウザで接続できます
URLの構成は次のとおりです。
https://バケット名.s3.isk01.sakurastorage.jp/フォルダ名/index.html
現在のところ、index.htmlの指定が必要です
おまけ ウェブアクセラレータ（CDN）を設定する
手順を紹介しようとしましたが、操作がシンプルな上に公式ドキュメントがありました。
参考）初期設定（オブジェクトストレージ・サブドメイン利用）
https://manual.sakura.ad.jp/cloud/webaccel/manual/settings-objectstorage-subdomain.html
参考サイト
- オブジェクトストレージ サービス基本情報 - Sakura Cloud Docs (2025/07/18閲覧)
- 過去にリリースされた AWS CLI バージョン 2 をインストールする - AWS (2025/07/18閲覧)
- 【2025年4月17日追記】オブジェクトストレージ AWS CLI および AWS SDK ご利用できないバージョンのご案内 - さくらのクラウドニュース (2025/07/18閲覧)
- 初期設定（オブジェクトストレージ・サブドメイン利用）