- 目的: Service Worker API の勉強をするため HTTPS サーバで HTML / JS をホストする。
- S3 にコンテンツを保存する。
- Cloud Front でコンテンツを HTTPS で公開する。
Amazon S3 を使う
- Amazon S3 とは?
-
https://aws.amazon.com/jp/s3/
- オブジェクトストレージという訳のわからない説明だが、ファイルサーバの事かな?
- AWS Console を使った S3 設定方法 (他にも AWS Storage Gateway というのがあるらしい)
- S3 bucket の作成
- S3 console に行く: https://console.aws.amazon.com/s3/
- Create bucket を押す
- Bucket name: (例: hoge)
- あとは全部デフォルトで Next, Next, Create bucket でとりあえず作る。
- S3 bucket の設定
- S3 console > bucket 選択 > Properties > Static website hosting
- Use this bucket to host a website
- Index document: index.html
- Endpoint の所に公開される URL が表示される。
- 例: http://hoge.s3-website.us-east-2.amazonaws.com/
- S3 console > bucket 選択 > Properties > Tags: 料金明細に役に立つらしい。
- Key: project
- Value: hoge
- S3 console > bucket 選択 > Properties > Static website hosting
- S3 bucket の作成
- S3 にファイルをアップロードする。
- S3 console > bucket 選択の画面からファイルをアップロード出来る。
- この時、Manage public permissions で Grant public read access が必要
-
https://aws.amazon.com/jp/s3/
-
CLI を使うと、コマンドラインで S3 にアクセス出来て便利。https://aws.amazon.com/jp/cli/
- インストール:
pip install awscli
- インストール確認:
aws --version
-
ValueError: unknown locale: UTF-8
というエラーが出たら、-
export LC_ALL=en_US.UTF-8
を .bashrc 等に書く。なんだこりゃ。
-
-
- アップグレード:
pip install --upgrade --user awscli
- アンインストール:
pip uninstall awscli
- 私の環境では、なぜか aws にパスが通らなかったので、
export PATH="$HOME/.local/bin:$PATH"
としました。 -
aws コマンドの設定
$ aws configure AWS Access Key ID [None]: CLI key を入力 AWS Secret Access Key [None]: CLI secret を入力 Default region name [None]: ap-northeast-1 (最寄りのリージョン) Default output format [None]: (デフォルトで json)
- インストール:
-
CLI で S3 にアクセスする
- http://docs.aws.amazon.com/ja_jp/cli/latest/userguide/using-s3-commands.html
-
aws s3 ls
bucket のリストが出る。 -
aws s3 ls s3://hoge
ある hoge の内容が出る。 -
aws s3 sync . s3://hoge --delete --acl public-read
ローカルディレクトリの内容を全部 hoge にアップロード。ローカルに無いファイルは消す。全公開にする。
-
一ヶ月のお値段
- ストレージ: 50 TB まで $0.025 / GB
- アクセス: $0.01 / 1000 リクエスト
- データ転送: 10 TB まで $0.140 / GB
Amazon Cloud Front で公開する。
- Amazon Cloud Front とは?
- 概要: https://aws.amazon.com/jp/cloudfront/
- 配信サーバという事らしいが、私の目的としては HTTPS さえ使えれば良い。
- ガイド: http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.html
- ステップ 3 からが肝心の部分
- 概要: https://aws.amazon.com/jp/cloudfront/
- Amazon Cloud Front の作成
- Amazon CloudFront console に行く: https://console.aws.amazon.com/cloudfront/home
- Create Distribution
- Web > Get Started
- Origin Settings
- Origin Domain Name: hoge.s3.amazonaws.com
- Origin Path: (デフォルト)
- Origin ID: S3-hoge (デフォルト)
- Restrict Bucket Access: No (デフォルト)
- Origin Custom Headers: (デフォルト)
- Default Cache Behavior Settings (全部デフォルト)
- Distribution Settings (全部デフォルト)
- Create Distribution を押す。
- Status 欄が In Progress から Deployed に変わるまで 15 分待つ。
- Domain Name 欄に表示されるドメイン名にアクセスしてみる (例: d3ogz1rrnlhoge.cloudfront.net)
- Amazon Cloud Front の設定
- 全部デフォルトで作ると、ドメインのルートにアクセスした時に index.html が表示されなくなってしまったので、Default Root Object を設定する。
-
https://aws.amazon.com/jp/cloudfront/ > Distribution 選択 > General > Edit > Default Root Object
- index.html を指定
- 一ヶ月のお値段
- 最初の 10 TB/月: 0.140 USD