IAM – hacya blog

それでは、前回作成したReactのSample PageをAWS S3にDeployしましょう。
AWS S3にDeployする際、AWSのManagement ConsoleからWeb Pageを構成するJava Script Fileを一つ一つUploadするのは現実的ではありません。Command LineからCommand一発で、直接Uploadしたいですよね。そこで、AWSのCLI(Command Line Interface)を使ってUploadすることにします。

まず、AWS上にS3へのUpload権限をもつIAM (Identity and Access Management) Userを作成します。AWSでは、このような権限管理が徹底していて、強靭なSystemを構成することができます。その反面、設定が煩雑になり、難解で取っつきにくい印象を持たれているように感じます。それはさておき、AWS Management ConsoleからIAM Serviceを呼び出します。

IAMの「ダッシュボード」から、「ユーザ」をクリック、「ユーザを追加」をクリックしてユーザの追加を行います。ユーザ名を「S3UploadUser」として、アクセスの種類は「プログラムによるアクセス」をチェックします。「 AWS マネジメントコンソールへのアクセス」は、このユーザでManagement ConsoleにLoginすることは無いので、チェックしません。

「アクセス許可の設定」では、「既存のポリシーを直接アタッチ」をクリックし、「ポリシーのフィルタ」に「S3」を入力し、S3関連のPolicyを表示させます。この中から、「AmazonS3FullAccess」をチェックして、「S3UploadUser」に権限を与えます。

後々、管理しやすいようにタグを付けておきましょう。

内容を確認して、「ユーザの作成」をクリックしてユーザを作成します。ユーザが作成されたら、必ず「.csvのダウンロード」をクリックして、.csvをダウンロードして保存してください。AWS CLIからAWSへのアクセスする際に、.csvに保存されているアクセスキーIDとシークレットアクセスキーを使って認証を行います。このキーペアーが外部に漏れると、外部からAWSへアクセスし悪用される可能性があるため、外部に漏れないように管理してください。

作成したユーザを確認しましょう。作成したユーザ名をクリックすると、「概要」の「アクセス権限」タブに許可されている権限が表示されます。「認証情報」タブをクリックして、「サインイン認証情報」の「コンソールパスワード」が無効になっていることを確認します。また、「アクセスキー」に「アクセスキーID」があることを確認します。このアクセスキーIDに対応するシークレットアクセスキーは、先ほど保存した.csvにあります。もし紛失した場合は、紛失したアクセスキーIDを無効化し、再度この画面から「アクセスキーの作成」を行うことで再作成することができます。

次はAWS CLIのInstallです。
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-windows.html
を参考にInstallします。今回は、「 Windows (64 ビット) 用の AWS CLI MSI インストーラのダウンロード」を使います。

Downloadが完了したら、AWSCLI64PY3.msiをダブルクリックしてInstallしていきます。

Installが完了したら、AWS CLIの設定を行います。
aws configure

ここで、先ほど保存したアクセスキーIDとシークレットアクセスキーを入力します。Regionは、ap-northeast-1(東京)を指定、Output formatはjsonを指定します。

これで環境設定は完了です。

次にReactの設定を変更します。前回exportというディレクトリにReactのApplicationを作成しました。exportの直下にpackage.jsonファイルがあります。AWS S3にUploadしてWeb Applicationを構成する場合、AWS S3のURLを指定してBuildする必要があるため、”homepage”というエントリを追加します。

{
  "name": "export",
  "version": "0.1.0",
  "private": true,
  "homepage" : "https://s3-ap-northeast-1.amazonaws.com/export.hacya.com ",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Web ApplicationをBuildします。結果は、buildディレクトリに作成されます。
cd export
npm run build

作成したWeb ApplicationをAWS S3にDeployします。ここで、先にInstallしたAWS CLIを使います。AWS S3 Syncを使って、S3にCodeをUploadします。
aws s3 sync --exact-timestamps --delete --acl public-read dirname bucketname

Uploadが完了したら、index.htmlの時と同じようにWeb BrowserからAccessしてみましょう。ReactをLocalで実行した時と同じ画面になります。

これで、少し複雑なStatic Web ApplicationをAWS S3を使って公開することができることになります。

タグ: IAM

Reactを使ってStaticなWeb Hostingをする。(その2)