LoginSignup
11

More than 5 years have passed since last update.

[JAWS-UG CLI] S3:#2 ハイレベルS3コマンドで静的Webホスティング

Last updated at Posted at 2014-08-07

ハイレベルS3コマンドを利用して、S3上で静的Webホスティングを構築します。

前提条件

S3への権限

  • S3に対してフル権限があること。

AWS CLIのバージョン

以下のバージョンで動作確認済

  • AWS CLI 1.10.1
  • AWS CLI 1.8.11
  • AWS CLI 1.7.26
コマンド
aws --version
結果(例)
aws-cli/1.10.1 Python/2.7.5 Darwin/13.4.0 botocore/1.3.23

0.1. リージョンの決定

作成するS3バケットのリージョンを決めます。

(カレントユーザが利用するカレントリージョンも切り変わります。)

コマンド(東京リージョンの場合)
export AWS_DEFAULT_REGION='ap-northeast-1'

Cognitoを利用する場合は、ap-northeast-1かus-east-1かeu-west-1を指定します。(2015-10-08現在)

0.2. 変数の確認

プロファイルとリージョンが想定のものになっていることを確認します。

変数の確認
aws configure list
結果(例)
            Name                    Value             Type    Location
            ----                    -----             ----    --------
         profile       s3Full-prjZ-mbp13iamFull-prjZ-mbp13              env    AWS_DEFAULT_PROFILE
      access_key     ****************XXXX shared-credentials-file
      secret_key     ****************XXXX shared-credentials-file
          region           ap-northeast-1              env    AWS_DEFAULT_REGION

AssumeRoleを利用している場合はprofileが '<not set>'と表示されます。
それ以外のときにprofileが '<not set>' と表示される場合は、以下を実行してください。

コマンド
export AWS_DEFAULT_PROFILE=<IAMユーザ名>

1. 事前作業

1.1. 組織名/プロジェクト名の決定

S3バケット名を決めます。
(英小文字と数字が使えます。S3上でユニークである必要があります。英大文字は使用できません。)

ここでは、組織名-プロジェクト名-handsonという名前のバケットを利用するものとします。

コマンド
ORG_NAME=<組織名>
PRJ_NAME=<プロジェクト名>
コマンド(例)
S3_BUCKET_NAME="${ORG_NAME}-handson-$(date +%Y%m%d%H%M)" \
  && echo ${S3_BUCKET_NAME}

1.2. 同名バケットの不存在確認

コマンド
aws s3 ls s3://${S3_BUCKET_NAME}/
結果
A client error (NoSuchBucket) occurred when calling the ListObjects operation: The specified bucket does not exist

2. バケットの作成 (mb)

コンテンツ公開用のS3バケットを作成します。

変数の確認
cat << ETX

  S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX

バケットを作成します。

コマンド
aws s3 mb s3://${S3_BUCKET_NAME}
結果(例)
make_bucket: s3://example-handson-20151008/

3. コンテンツの転送 (sync)

3.1. コンテンツの用意 (任意)

(gitが使える場合)

コマンド
git clone https://github.com/opelab/jawsug-cli-sample-web.git && cd jawsug-cli-sample-web
結果
      Cloning into 'jawsug-cli-sample-web'...
      remote: Counting objects: 5, done.
      remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 5
      Unpacking objects: 100% (5/5), done.
      Checking connectivity... done.
コマンド
ls
結果
error.html  img.jpg         index.html

(gitが使えない場合)

http://jawsug-cli.s3-website-ap-northeast-1.amazonaws.com/jawsug-cli-sample-web.zip を取得して、解凍し、解凍後のディレクトリにcdコマンドで移動してください。

3.2. コンテンツの同期

クライアントPCに保存してあるサンプルコンテンツを、先程作成したコンテンツ公開用のS3バケットに同期します。

変数の確認
cat << ETX

        S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド(gitの場合)
aws s3 sync . "s3://${S3_BUCKET_NAME}/" \
  --acl public-read \
  --exclude ".git*"
結果(例)
upload: ./error.html to s3://www.example.jp/error.html
upload: ./index.html to s3://www.example.jp/index.html
upload: ./img.jpg to s3://www.example.jp/img.jpg

4. websiteホスティングの設定 (website)

コンテンツ公開用のS3バケットのwebsiteホスティング設定を行ないます。

変数の確認
cat << ETX

        S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
aws s3 website "s3://${S3_BUCKET_NAME}" \
  --index-document index.html \
  --error-document error.html
結果
(返り値なし)

5. アクセス確認

コンテンツ公開用のS3バケットがコンテンツ公開設定になっているか確認します。
この時点ではS3が自動的に付与するURLでアクセスします。

変数の確認
cat << ETX

        AWS_DEFAULT_REGION: ${AWS_DEFAULT_REGION}
        S3_BUCKET_NAME: ${S3_BUCKET_NAME}

ETX
コマンド
S3_BUCKET_ENDPOINT="${S3_BUCKET_NAME}.s3-website-`aws s3api get-bucket-location --bucket ${S3_BUCKET_NAME} --output text`.amazonaws.com" \
        && echo ${S3_BUCKET_ENDPOINT}
結果(例)
example-handson-20151008.s3-website-ap-northeast-1.amazonaws.com

Webブラウザで EndPoint が開ければOKです。

完了

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11