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

それでは、前回作成した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を使って公開することができることになります。

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

前回はindex.htmlを置くだけという簡単なWeb Hostingでしたが、今回はReactを使ってみましょう。
Reactは、Facebook社が開発したJavaScriptライブラリーで、Web Pageの更新をVirtual DOMを使って管理するため、Web Pageの更新管理が簡単になります。

まずは、Node.jsのInstallです。
https://nodejs.org/en/download/
からCurrent Latest FeaturesをDownloadしてInstallします。
今回は、Windows Installer (.msi)の64-bitを選びました。

現在(2019年6月)のVersionは、V12.5.0で、
node-v12.5.0-x64.msi
をdownloadして、downloadしたfileをDouble-clickしてInstallします。

Tools for Native Modulesでは、Optionを選択せずに進みます。これを選択すると、Python 2がInstallされ、あとあと面倒なことになります。このToolが必要なModulesに出くわしたら、その時Installするか考えましょう。

Node.jsのInstallが完了しました。Node.jsがInstallされているか確認してみます。同時にnpmがInstallされているか確認してみます。
node -v
npm -v
npmは、Node.jsのPackageを管理するApplicationです。

npmをFirewallの内側から使用する場合は、proxyの設定が必要になる場合が多いです。Firewallの設定は、npm config set~で行います。
npm config set proxy "http://192.168.1.1:8080/"
npm config set https-proxy "http://192.168.1.1:8080/"
npm config list
Proxy ServerのIP AddressやPort Numberは、Windowsの設定を参照します。proxy.pacを使った設定方法の場合は、proxy.pacをText FileとしてdownloadしてText Editorで設定内容を確認します。Browserにproxy.pacのURLを入力すればTextとしてDownloadすることができます。

ReactのWeb Applicationのひな形を作成するのに便利なTool、create-react-appを使って、Web Applicationを作ります。
まず、create-react-appをnpmを使ってInstallします。
続けて、create-react-appで、exportというApplicationを作成します。
npm install -g create-react-app
create-react-app export

実際にWeb Applicationを立ち上げましょう。
cd export
npm start
すると、DefaultのBrowserが立ち上がり、
http://localhost:3000/
を表示します。
お勧めのBrowserはGoogle Chromeです。

これで完了です。次回は、このApplicationをAWS S3にDeployします。