LoginSignup
3
3

More than 5 years have passed since last update.

S3で静的Webサイトホスティングからデプロイまで覚書

Posted at

今回の流れ

  • 1.S3でバケットの作成
  • 2.バケットのホスティング設定
  • 3.IAMの作成
  • 4.ページをデプロイ
  • 5.独自ドメインを設定

1.S3でバケットの作成

AWSの管理画面からS3のバケットを作成します。

バケット名:

独自のドメインを設定する場合はドメイン名とバケット名を合わせてください。

リージョン:

東京がいいかな?

2.バケットのホスティング設定

プロパティメニューから作成したバケットの「静的ウェブサイトホスティング」を
選択。

有効化しインデントとエラードキュメントを設定

3.IAMの作成

IAMでユーザーを新規作成後に「アクセスキーID」と「シークレットアクセスキー」が
発行されるのでメモをしておいてください。

作成したユーザーの「ポリシーのアタッチ」から「AmazonS3FullAccess」を
選択

4.ページをデプロイ

デプロイには「s3cmd」を使用します。

インストール済みなことを確認

$ which s3cmd
/usr/local/bin/s3cmd

デプロイしたいルート・ディレクトリで設定ファイルを作成します。

s3cmd -c ./.s3cfg --configure
Access Key: アクセスキー
Secret Key: シークレットキー
Encryption password:
Path to GPG program: None
Use HTTPS protocol: True
HTTP Proxy server name:
HTTP Proxy server port: 0

これで./s3cfgという設定ファイルができあがる

$ ls -la
total 48
drwxr-xr-x  10 hoge-user  staff   340  2 19 10:19 .
drwxr-xr-x  60 hoge-user  staff  2040  2 18 18:48 ..
-rw-r--r--@  1 hoge-user  staff  6148  2 14 16:54 .DS_Store
-rw-------   1 hoge-user  staff  1781  2 19 10:19 .s3cfg
-rwxrwxrwx   1 hoge-user  staff    79  2 19 09:42 deploy.sh
drwxr-xr-x   8 hoge-user  staff   272  2 16 00:18 dist
-rw-r--r--   1 hoge-user  staff  1532  2 16 00:50 gulpfile.js
drwxr-xr-x   7 hoge-user  staff   238  2 14 16:24 node_modules
-rw-r--r--   1 hoge-user  staff   402  2 14 16:24 package.json
drwxr-xr-x   9 hoge-user  staff   306  2 16 00:19 src

これでいよいよデプロイ

デプロイしたいディレクトリとデプロイ先のバケット名を指定してあげる

s3cmd -c .s3cfg -P --follow-symlinks sync ./ディレクトリを指定/ s3://バケット名を指定/

コマンドが長いのでスクリプトにしてもいいと思います

$ cat deploy.sh
#!/bin/sh
s3cmd -c .s3cfg -P --follow-symlinks sync ./ディレクトリを指定/ s3://バケット名を指定/

5.独自ドメインを設定
DNSレコードにCNAMEでS3のエンドポイントを指定してあげればOKです!

簡単でいいですね!

3
3
0

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
3
3