簡単にWebサイトをつくる方法（サーバーレスでやってみる）

WebサーバーとかアプリサーバーとかしらなくてもWebサイトが作れる方法をまとめてみる

1. AWSを使いますAWS マネジメントコンソール | AWS　
2. HTMLとかだけで基本はおｋ
3. PCページとSPページも切り替えたかったらできる

AWSのアカウントをつくろう！

AWS Console - Signup

ここからアカウントを作成します！

個人の場合はパーソナルを選択しましょう！

支払い情報を登録して

準備完了です！

ここで作ったアカウントにはインターネットが繋がる場所からはどこからでもアクセスできます！

つまり、どこでもサイトの更新ができますが同時にアカウント情報が漏れてしまうと乗っ取られてしまうのでくれぐれもご注意を！

サーバーレス環境を構築するよ！

実際の環境構築方法です。慣れれば１時間ちょいちょいの作業です。

利用するサービス

• CloudFront ←インターネット上からのアクセスをうけるところ
• S3 ←実際にファイルを置くインターネット上のストレージ
• Route 53 ←ドメインを設定するサービス
• ACM ←SSL証明書を配置するためのサービス
• Lambda (PC/SPでページを切り替えたい場合)
• WAF & Shield(IP制限とかしたい場合)

手順１

まずはファイルをアップロードする場所を作ります。

具体的にはS3にバケットを作成します。

バケットを作成するボタンを押して

名前の入力をしてリージョンを選択します。

リージョンというのはどこの国にストレージを置きますか？ということで国によって値段が違います。（ただ、東京に於けばそれだけ近いので表示が早くなります）

そのあとはなにも考えずに次へを連打！

ここまで来たらバケットを作成を押すと作成作業が完了です。

作成されたバケット名を一覧からクリックするとフォルダに入ったようになり、アップロードボタンが表示されます。

ここから自分のPCにあるフォルダごとアップロードできます！

手順２

インターネットからアクセスを受け取るためのCloudFrontの準備をします！

サービスからCloudFrontを選択し

Create Distributionを押下してください。

こんな画面が出てくるので上のWebの方のGet Startedを押下

Origin Domain Nameに作成したS3のバケットを選択

Origin Access IdentityはCreate a New Identityを選択

Grant Read Permissions on BucketはYes, Update Bucket Policyを選択

ここまででCloudFrontからS3にAccessできるようになります。

ドメイン名だけでアクセスが来たときに読み込みたいファイルをしていします。

ここでは直下にあるindex.htmlを読み込むように指定します。

手順３

ドメイン設定

あとで書こう。。。

手順４

SSL証明書の設定

あとで書こう。。。

付録

PC・SPの切り分け

※本手順ではレスポンシブデザインではなくHTMLがPC用SP用の２種類が用意されることを想定

IAMからロールを作成する 権限には以下を設定

信頼関係は以下を記載

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "lambda.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    },
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "edgelambda.amazonaws.com"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

Lambdaにて関数の作成を押下

名前を入力し、Node.js 6.10を選択

手順1で作成したIAMロールを設定

index.jsの記載

'use strict';
 
const whitelist = [
  'android',
  'ios',
  'iphone',
  'ipad'
];
 
const isSpBrowser = (uas) => {
  if (uas && Array.isArray(uas) && uas.length > 0) {
    return uas.some(ua => whitelist.some(w => ua.value.toLowerCase().indexOf(w) !== -1));
  }
  return false;
};
 
// # User-Agent からデバイスを判定し、読み込みHTMLを変更
exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;
     
    if (headers['user-agent']) {
        console.log("▼headers['user-agent'] = " + headers['user-agent']);
        // ad判定
        var ads = request.uri.split('?')
        var param = ''
        if (ads.length > 1) {
            param = ads[1]
        }
        // ファイル読み込みで呼び出された場合中断
        // PC/SPの判定処理に入れたくないものを記載
        if(ads[0].match(/(\.png|\.css|\.js|\.jpeg|\.jpg|\.bmp|\.gif|\.pdf|\.svg|\.zip)/)) {
            callback(null, request);
            return;
        }
         
        uri = uri.slice(-1) === ('\/') ? uri : uri + '\/';
         
        // UA判定
        if (isSpBrowser(headers['user-agent'])) {
            uri = uri + 'SP用ファイル名を記載'
        } else {
            uri = uri + 'PC用ファイル名を記載'
        }
        // XXX 現状パラメータを渡すことができない
        console.log('uri = ' + uri);
        request.uri = uri
        callback(null, request);
        return;
    }
    callback(null, request);
};

保存ボタンを押下

アクション＞新しいバージョンの発行からバージョンを発行する

発行したバージョンにトリガ設定をおこなう

CloudFrontを選択

設定したいディストリビューションを選択

CloudFront イベント：ビューアーリクエストを選択

トリガーとレプリケートの有効化にチェックを入れ保存する