2019年6月 – hacya blog

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します。

AWS S3を使ってStaticなWeb Hostingをする。

AWS S3を使ってStaticなWeb Hostingを実現します。S3を使ったServer lessでのWeb Hostingは、EC2でWeb Serverを立ち上げてWeb Serviceを実現するよりも、AWSの使用料を抑え、簡単に可用性、耐久性を得ることができます。長期間変更することのないContentsだけでもS3に置くように運用すると効率的です。
初心者向けとして、簡単なindex.htmlをS3に置いてWeb Hostingする手順を説明します。手順は2019年6月に実際に行った画面で説明します。

まずはS3の設定です。Management ConsoleからS3のServiceを呼び出します。

「今すぐ始める」ボタンをクリックしてBucketを作成します。その後のStepは、
1. 「名前とリージョン」タブでバケット名を入力します。バケット名は、FQDN形式で入力します。AWS全体で重複のない名前を指定する必要があります。今回は、”export.hacya.com”としました。リージョンは”アジアパシフィック(東京)”を選んでおきましょう。
2. 「オプションの設定」タブでは、タグを付けておきましょう。他はデフォルトのままで良いです。
3. 「アクセス許可の設定」タブでは、「パブリックアクセスをすべてブロック」のチェックを外します。その他はデフォルトのままで良いです。
4. 「確認」タブで、内容を確認して「バケットを作成」ボタンをクリックしてBucketを作成します。

次に作成したBucketのPropertyを変更してStatic Web Hostingをできるようにします。
1. 「プロパティ」タブをクリックします。
2. 「Static Website Hosting」をクリックします。
3. 「このバケットを使用してウェブサイトをホストする」をチェックして、インデックスドキュメント、エラードキュメントを指定します。ここでは、提案の通りのFile名で、index.html、error.htmlを入力して、「保存」をクリックして設定を保存します。

ここで、S3 BucketにUploadするindex.htmlとerror.htmlを準備します。

<!DOCTYPE html>
<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<big><b>Hello World!</b></big>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>Error - File Not Found</title>
	</head>
	<body>
		<big><b>Error 404 - File Not Found</b></big>
	</body>
</html>

S3にfileをuploadします。
「概要」タブに戻って、「アップロード」をClickします。index.htmlよerror.htmlをDrag & Drop。
1. 「ファイルの選択」タブでは、「次へ」をClick。
2. 「アクセス許可を設定する」タブでは、「パブリックアクセス許可を管理する」を「このオブジェクトにパブリック読み取りアクセス権限を付与する」に変更、他はデフォルトのまま「次へ」をClick。
3. 「プロパティを設定する」タブは、デフォルトのまま「次へ」をClick。
4. 「確認」タブで、設定を確認して、「アップロード」をClick。
これで、Static Web Hostingが出来ました。