街撮りchの中のひとのブログ: shigeki.takeguchi.log

もうすぐ還暦ジジイが街撮りのYouTubeチャンネルで奮闘する記録

Middlemanで作った静的サイトをAmazon S3で公開してみる

目次

  1. 1. Amazon S3とは?
  2. 2. Amazon S3のバケットを作る
  3. 3. Middlemanでプロジェクト作成とその設定

ちょっと久しぶりになりますが技術のことを書く。

Amazon S3とは?

アマゾン ウェブ サービス

Amazon Web Service

ブログもちょっとしたサイトもほとんどMiddlemanを使って構築しているわけだけど、
Github Pagesだけじゃなくアマゾン ウェブ サービス(Amazon Web Services)もべっりだったりする。

以前に比べると日本語化もかなり進んでいたり無料利用枠があるのではじめるのにそこまでハードルは高くない。
ただクレジットカード登録と電話でのPIN番号認証があるのでやたらめったらとアカウント作るってわけにはいかないだろう。

日本語のドキュメントも充実している。

AWS の使用開始ドキュメント

AWS の使用開始ドキュメント

Amazon S3 (クラウドストレージサービス)

Amazon S3 (クラウドストレージサービス)

S3というと負荷分散のために画像や映像ファイルを置いておく場所のイメージがあったと思うんだけど
もちろんそういう使い方が主流だと思うけど今はちょっと違うように思う。

Amazon S3のバケットを作る

AWSのサービスからS3を選んでS3 Management Cosole画面へ。
左上の「バケットを作成」を押す。
バケット名とリージョンを選択して右下の「作成」を押すとバケットが作成される。

AWS S3

バケットのプロパティで静的ウェブサイトホスティングを有効にすることができる。
インデックスドキュメント、エラードキュメントそれぞれを設定して「保存」を押して設定を反映させる。

AWS S3

このままではアクセス件がなくアップロードしたファイルを見ることができないので「さらにアクセス許可を追加する」を押す。
被付与者を全員、「リスト」にチェックをいれて「保存」を押して設定を反映させる。

AWS S3

AWS S3の設定は以上となる。
またアクセスキーとシークレットキーが必要になるがAWS マネジメントコンソールのアカウント名のプルダウンから「認証情報」を選択して「セキュリティ認証情報」からアクセスキーを作成するなどして入手しておく。

Middlemanでプロジェクト作成とその設定

1
$ middleman init some_project

Middleman Syncというパッケージを使うと静的ファイルのビルドとファイルのアップロードがコマンドひとつでできる。
Gemfileを開いて以下を追記する。

1
gem 'middleman-sync'

bundle installでパッケージのインストール。

1
$ bundle install

config.rbを開いて以下を追記する。

1
2
3
4
5
6
7
8
9
10
activate :sync do |sync|
sync.fog_provider = 'AWS' #ストレージプロバイダ(AWS, Rackspace, Google)
sync.fog_directory = 'bucket-name' #バケット名
sync.fog_region = 'bucket-region-name' #バケットの地域名(AWSの場合us-east-1, us-west-1, eu-west-1, ap-southeast-1)
sync.aws_access_key_id = 'super' #アクセスキー
sync.aws_secret_access_key = 'secret' #シークレットキー
sync.existing_remote_files = 'keep' #既存のリモートファイルを消すのかそのままなのか(keep, delete)
sync.gzip_compression = false #gzip圧縮したもので置き換えるかどうか(true, false)
sync.after_build = true #ビルド後に自動でアップロードするかどうか(true, false)
end

設定は完了したのでソースをビルドしてS3に反映させる。

1
$ middleman build

完了したらS3に反映されているので確認する。 S3 Management Cosoleのバケットのプロパティ「静的ウェブサイトホスティング」のエンドポイントがURLとなり、それで確認できる。

いつもvブログを読んでいただきありがとうございます。
YouTubeチャンネルの運用を続けていくために機材購入、資料購入などで困っております。
よろしければAmazonの欲しいものリストから応援いただけると助かります。

街撮りchの欲しいものリスト

管理人:タケグチシゲキ

フロントエンドエンジニアとして働く55歳のジジイです。
首都圏を中心に散歩動画を撮影してYouTubeで配信してます。現在は夜の街のネオンや光が作り出す陰影が好きで撮影することが多いです。

YouTbueチャンネル

YouTubeチャンネルもぜひご覧ください。思い出の街や気になる街の風景を楽しんでいただければと思います

X(旧Twiiter)

X(旧Twiiter)でも情報発信しております。よろしければフォローいただけると嬉しいです

記事や動画について知っている情報を教えていただけると幸いです。どんなささいなことでも大丈夫です。

また、仕事依頼、コラボ依頼、著作物の提供などについてのお問い合わせは下記のお問い合わせフォーム、X(旧Twiiter)のDMでお待ちしております

お問い合わせ

ブログ記事やYouTubeチャンネルの動画に関するコメント、お仕事依頼、コラボ依頼、著作物の提供についてなどなどお問い合わせにて随時募集中です。
情報提供などもお待ちしております。

お問い合わせはこちらのGoogleフォームからお願いいたします