最速でAWSに静的サイトの開発環境を作る

9820 ワード
S3 静的サイト AWS CodeCommit CodePipeline AWS テキストリンク

静的サイトを自分で確認するなら、ローカル環境で十分かもしれませんが、
お客さんに確認してもらうにはサ、別途サーバを準備する必要があったりします。

本記事では、S3に静的サイトを構築するだけでなく、開発環境の連携も視野に入れて説明します。
（開発環境だけでなく、上手にやれば本番でも使えるかも）

各設定項目の詳しい内容はすっ飛ばします。他記事で参考してもらえば良いと思います。

次のような環境をAWSで構築します。

スムーズに行けば、15分ぐらいで終わります。

S3｜バケットを作成

  • S3からバケットを作成するをクリックします。

名前とリージョン

  • バケット名を入力して 次へ ボタンをクリックします。

バケット名はドメイン名がおすすめです。（例：example.com）

オプションの設定

  • デフォルトのまま 次へ ボタンをクリックします。

アクセス許可の設定

  • アクセス許可はアクセスコントロールリスト(ACL)のみブロックします。

確認

  • バケットを作成 をクリックします。

これで、バケット一覧画面に作成したバケットが表示されていたらOKです！

S3｜静的サイトホスティング

静的サイトホスティングの許可

  • バケットのプロパティから Static website hosting を開きます。
  • このバケットを使用してウェブサイトをホストするにチェックして、インデックスドキュメントを指定します。
    ここでは、インデックスドキュメントを index.html としています。
  • 保存ボタンをクリックします。

エンドポイントは静的サイトのURLになります。どこかにメモしておきましょう。

アクセス制限の設定

  • バケット > アクセス制限 > バケットポリシー の画面に移動します。
  • バケットポリシーエディターに以下を貼り付けます。
バケットポリシーエディター
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::example.com/*"
            ],
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": [
                        "xxx.xxx.xxx.xxx",
                        "yyy.yyy.yyy.yyy"
                    ]
                }
            } 
        }
    ]
}
  • Resource の example.com は、作成したバケット名に変更してください。
  • Condition の IpAddress の部分は、デベロッパのIPアドレスとユーザのIPアドレスを指定してください。
  • 保存ボタンをクリックします。

確認

  • ここで、エンドポイントのURLにアクセスしてみましょう。
    おそらく 404 になると思いますが、これは index.html がないからなので大丈夫です。

CodeCommit｜Gitリポジトリの作成

  • CodeCommitからリポジトリの作成をクリックします。

リポジトリの作成

  • リポジトリ名を入力します。

  • 作成ボタンをクリックします。

リポジトリに接続

（windows10の場合）

  • Gitクライアントをインストールします。（既にある場合は作業不要）
    https://gitforwindows.org

  • アクセスさせたいIAMのユーザに次のポリシーを追加します。
    AWSCodeCommitFullAccess

  • Git Bash などから、鍵を作成するために次のコマンドを実行します。

$ ssh-keygen
Enter file in which to save the key (/c/Users/user/.ssh/id_rsa): codecommit_rsa    <- ファイル名はなんでもOK
Enter passphrase (empty for no passphrase): xxx   <- 鍵のパスワードを入力
...

  • IAMユーザに鍵を登録

    • IAMユーザの認証情報タブを開く
    • AWS CodeCommit の SSHキー のSSHパブリックキーのアップロードをクリック
    • 作成した公開鍵（~/.ssh/codecommit_rsa.pub）をエディタで開いて、コピペ
    • SSHパプリックキーのアップロードをクリック

  • ~/.ssh/configにサーバ情報を追加

~/.ssh/config
Host git-codecommit.ap-northeast-1.amazonaws.com
User APKATRC... [SSHキーID (IAMユーザのSSHキーを参照) ]
IdentityFile ~/.ssh/codecommit_rsa

確認

  • ssh接続を確認
$ ssh git-codecommit.ap-northeast-1.amazonaws.com
Enter passphrase for key '/c/Users/user/.ssh/codecommit_rsa': xxx

You have successfully authenticated over SSH.
You can use Git to interact with AWS CodeCommit.
Interactive shells are not supported.Connection to git-codecommit.ap-northeast-1.amazonaws.com closed by remote host.
Connection to git-codecommit.ap-northeast-1.amazonaws.com closed.
  • git clone が出来るか確認
$ git clone ssh://git-codecommit...    <- git clone コマンドが載っていると思うので、それをコピペ

index.htmlを作成

  • git clone したフォルダにindex.htmlを作成します。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>example</title>
  </head>
  <body>
    <h1>welcome to example.com !!</h1>
  </body>
</html>
  • git push します。
$ git add .
$ git commit -m '新規作成'
$ git push origin master

リモートリポジトリが更新されているか確認

  • CodeCommit の example.com にアクセスし、index.html が追加されていることを確認する。

CodePipeline｜リリースプロセスの作成

  • パイプラインの作成をクリックします。

パイプラインの設定

  • パイプライン名とロール名を入力します。
  • 高度な設定はそのままにしておきます。

  • 次にをクリックします。

ソースステージを追加

  • 下図のように入力します。
    リポジトリ名は作成したリポジトリを選択してください。（例：example.com）

  • 次にをクリックします。

ビルドステージを追加

  • ビルドステージをスキップをクリックします。

デプロイステージを追加

  • 下図のように入力します。
    バケット名はS3で作成したバケットを選択してください。（例：example.com）

  • 次にをクリックします。

確認

  • パイプラインを作成するをクリックします。

最終確認

  • もう一度、S3のエンドポイントに表示されているURLにアクセスしてみましょう。
  • index.html に変更を加え、git push したら内容が変わることを確認してください。

最後に

ここまで静的サイトの開発環境の作成方法について説明しましたが、
デプロイした時にファイルが削除されなかったり、フォルダ名の変更が出来なかったりと問題があるようです。
https://qiita.com/izanari/items/aaa8fb89761f7a4ccef9

詳細な設定などはすっ飛ばして説明していますので、
ここからバケットポリシーでアクセス制限をかけるなどの応用も可能です。いろいろ試してみてください。

ざっくり書いたので不親切な部分もあるかもしれませんが、
ご指摘など頂けますと大変助かります。