React で静的ウェブアプリケーションを作成し、静的ウェブサーバーとして作成した Amazon S3 バケットに配備して公開するまでの大きな流れを説明します。
防御壁:
- 私が、社内でプログラミングに不慣れな後進へ勉強会で説明するために作成している文書です。内容は、初回の投稿のままではなく、随時更新します。
- 私は、C、Java、.NET、Perl や Python などを主に業務で使用してきたため、最近の ECMAScript は経験が浅いです。私も学びながら、教えながらの文書のため、正確性に欠く部分もありますが、ご容赦ください。
- 私は、AWS については AWS Certified Solutions Architect - Associate レベルの資格を保有しています。Professional ではありません。
- 私は、カタカナ語の語尾にある長音記号を省略しないスタイルです。
はじまりの React アプリケーション
React とは
ウェブアプリケーションの UI 構築のための JavaScript ライブラリです。
Meta (旧 Facebook) とコミュニティによって開発されています。オープンソースであり、ライセンスは MIT ライセンスです。Android、iOS、UWP上で動作するネイティブアプリケーションを構築できる React Native もあります。
同様のフレームワークには、Vue.js や Google とコミュニティによって開発されている AngularJS (ネイティブ開発は Angular) があります。
TODO: SPA (Single Page Application) について説明する。
React アプリケーションを作成する
Node.js を事前にインストールしておきます。
create-react-app を使用し、React アプリケーションのプロジェクトを作成します。
create-react-app を使用しなくても、プロジェクトを作成することができます。しかし、雛形から構築することでスタートアップに掛かる時間を削減できるため、この手法を採用しています。
次のコマンドを実行します。
npx create-react-app example-fe
example-fe フォルダが作成され、その中に初期状態の React アプリケーションのプロジェクトが作成されます。Node.js では、プロジェクトもパッケージです。
アプリケーションのプロジェクトの構造は、次の通りです。
example-fe
|-- public # 静的コンテンツを格納するフォルダ
|-- src # ECMAScript などのソースコードを格納するフォルダ
|-- node_modules # 依存パッケージを格納するフォルダ
|-- package.json # プロジェクト (パッケージ) のメタ情報を記載するファイル
|-- package-lock.json # プロジェクトが依存するパッケージの詳細バージョンを記載するファイル
|-- README.md # 自動生成された README ファイル
+-- .gitignore # 自動生成された .gitignore ファイル
自動作成された example-fe アプリケーションを起動してみます。
アプリケーションのプロジェクトのルートフォルダに移動し、次のコマンドを実行します。
npm start
Node.js で起動した HTTP サーバーへ自動作成されたアプリケーションが配備され、http://localhost:3000 で確認できるようになります。標準的な環境であれば、コマンドの実行時にウェブブラウザが自動起動されたはずです。
はじまりの静的ウェブサーバー
Amazon S3 とは
AWS の各種サービスやオリジナルアプリケーションから API を介してデータを操作できるオブジェクトストレージサービスです。データは、キーを割り当てたオブジェクトとして格納されます。
S3 を含めて AWS では、次のストレージサービスを提供しています。
-
EBS (Elastic Block Store)
ブロックストレージサービスです。EC2 へ直接アタッチできるブロックストレージデバイス (HDD) をイメージすると理解しやすいです。オフィシャルの情報をみつけられませんでしたが、iSCSIやFCoEといったデバイスレベルのプロトコルで制御します。 -
EFS (Elastic File System)
ファイルストレージサービスです。AWS マネージドサービスのため、サーバーのプロビジョニングや管理を意識しませんが、いわゆるファイルサーバーをイメージすると理解しやすいです。NFSv4 プロトコルで制御します。
Windows サーバーやオンプレミス環境から利用する場合は、SMB プロトコルで制御できる Amazon FSx for Windows File Server という別のサービスを利用します。 -
S3 (Simple Storage Service)|
オブジェクトストレージサービスです。いわゆるクラウドストレージサービスで、Google Drive や Dropbox をイメージすると理解しやすいです。HTTP(S) プロトコルで制御します。
S3 は、格納している HTML、CSS、JavaScript といったウェブリソースを静的ウェブサーバーとして公開もできます。S3を静的ウェブサーバーとして構成すると、バケット名に基づくドメイン名と HTTP プロトコルで格納しているオブジェクトを公開します。ドメイン名の変更や HTTPS プロトコルでの提供をおこなうには、別の AWS サービスとの連携が必要です。
Amazon S3 バケットを静的ウェブサーバーとして作成する
Amazon S3 で React アプリケーションを公開する
To be continued.