当記事では、Vue.jsで作成したアプリケーションをAWS S3を利用してインターネット上に公開する方法をご紹介します。
自分で作成したフロントエンドアプリケーションを公開したい。
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- AWSとは
- AmazonS3とは
- Reactの開発環境構築の方法
- Reactアプリケーションの作成方法
- Reactアプリケーションの動かし方
本記事では、ステップバイステップでSPAアプリケーションを静的ウェブサイトとして公開する手順を解説しています。
AWSの無料枠を活用しながら、S3バケットの作成からウェブサイトのエンドポイントのテストまで、必要な設定を一通り説明した内容となっています。
本記事で、公開するアプリケーションは以下記事で作成しています。
この記事を読み進めるにあたり必須ではありませんが、気になる方はこちらを参照ください。
AWSとは
クラウドでインフラストラクチャなどのサービスを提供するクラウドサービスです。
クラウドサービスの中でも「メガクラウド」と呼ばれるメジャーなクラウドサービスです。
利用者が利用した分だけ課金される従量課金でサービスを提供しています。AWSの中でも様々な機能が提供されており、機能ごとに無料で利用できる範囲がある「無料枠」が存在します。
AWSについての詳細や各機能の無料枠の範囲は、AWS公式サイトを参照ください。
AWS利用の準備
AWSサービスを利用するにはAWSアカウントの登録が必要です。
登録にはクレジットカードの登録が必要ですが、利用範囲によっては課金はされません。当記事の内容も課金はされない対象となっています。
上述しましたが、AWSには機能毎に無料枠が存在しています。注意点として、無料枠には12か月間限定の無料枠と期間無制限の無料枠が存在しますが、個人で利用する分にはほとんどの場合無料枠の範囲内で利用できると筆者は考えています。
Amazon S3について
AWSが提供するストレージサービスです。
ストレージサービスとは、ファイルやディレクトリを管理できるサービスです。
Vue.jsなどのフロントエンドアプリケーションは、S3上にファイルを配置することで静的ウェブサイトとしてインターネットに公開できます。
AmazonS3の詳細な説明は、以下のAWS公式サイトを参照ください。
Amason S3上にアプリケーションをデプロイする
AWSの公式から公開されている以下のチュートリアルに従って、実際にアプリケーションをデプロイしていきます。
以下のステップで作業します。
- S3のバケットを作成
アプリケーションのアップロード先を作成します。 - 作成したバケットを静的ウェブサイトホスティング用途に変更
バケットをウェブサイト用の設定に変更します。 - ブロックパブリックアクセス設定を編集する
アクセス設定をウェブサイト用に変更します。 - バケットポリシーの追加
どこからアクセス可能とするかの設定です。誰でもアクセス可能とするか特定の接続先からのアクセスにするか設定します。 - インデックスドキュメントの設定
ウェブサイトのルートにアクセスされた時に自動的に表示するページの設定です。 - エラードキュメントの設定
存在しないページなどにアクセスされた場合にカスタムページを表示する設定です。 - ウェブサイトのエンドポイントをテスト
バケットの設定が正しいか実際に公開されたURLにアクセスしてみます。 - ファイルをアップロード
アプリケーションファイルをアップロード（デプロイ）します。
1. バケットを作成（AWS上で作業）
バケットとは、ファイルを格納する入れ物のようなものです。ファイルをS3上で管理するために必ず必要なものです。
今回の検証でも、まずはアプリケーションファイルを格納するためのバケットを作成していきます。
バケット名は、AWS公式の以下サイトの命名規則に従います。
静的ウェブサイトホスティングの用途の場合と、それ以外の用途の場合で推奨の命名規則が異なります。
今回は静的ウェブサイトホスティングの用途なので、公式サイトに従って以下のように命名します。
バケット名とリージョン以外はデフォルトで作成します。
2. 作成したバケットを静的ウェブサイトホスティング用途に変更
一度バケットを作成してからでないと静的ウェブサイトホスティングの設定ができないようです。
ですので、バケット作成後に設定を変更します。作成したバケットの「プロパティ」タブから設定を変更します。
プロパティタブの下にスクロールすると「静的ウェブサイトホスティング」の項目があります。「編集」ボタンをクリックします。
静的ウェブサイトホスティングを「有効にする」を選択し、ホスティングタイプを「静的ウェブサイトをホストする」に設定します。
インデックスドキュメントは通常「index.html」を入力します。今回作成したアプリケーションは変更する必要はないのでガイドに従います。
その他の設定で、カスタムエラードキュメントや高度なリダイレクトツールを利用できるみたいですが、今回は設定しなくても不都合はないので設定しません。
3. ブロックパブリックアクセス設定を編集する
Amazon S3のデフォルト設定では、パブリックアクセスをブロックします。
理由は、バケットにアップロードしたファイルが第三者から見られないようにするためです。
S3のバケット上で静的ウェブサイトをホストする場合は、アプリケーションを公開する必要があるためブロックパブリックアクセス設定をオフにする必要があります。
デフォルトだとバケットの「アクセス許可」を見ると以下のような設定になっています。
アクセスできるように一時的に以下の設定にしてみます。「一時的に」というのは、この設定だと誰でもアクセスできる状態になっているため、万が一大量にアクセスがあった場合料金が課金されてしまうためです。
検証完了後はこの設定を戻します。
設定について確認されるので「確認」と入力し、「確認」ボタンをクリックします。
4. バケットポリシーの追加
アプリケーションにアクセスできるようにするためには、ブロックパブリックアクセス設定のほか、バケットポリシーを設定する必要があります。
バケットへの読み取りアクセスを許可する以下のバケットポリシーを追加します。ここで設定したバケットポリシーはAWSのサイトのチュートリアルのバケットポリシーです。
設定後、「変更の保存」ボタンをクリックします。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::vue.second.s3.bucket/*"
}
]
}4. インデックスドキュメントの設定
後にデプロイするアプリケーションに含まれているので、ここでは設定しません。
5. エラードキュメントの設定
カスタムエラーページの設定です。今回の検証では利用しないので設定しません、
6. ウェブサイトのエンドポイントをテスト
バケットに静的ウェブサイトの設定を行うと、サイトにアクセスするためのURLが発行されます。
対象のバケットの「プロパティ」にある以下URLをクリックし、アクセスできるか確認します。
まだアプリケーションをアップロードしてないので、404エラーが出ます。
なので、以下の画面が表示されて今も問題ありません。
ここまでの設定は成功しています。
以下のように403エラーが発生した場合は、ブロックパブリックアクセス設定、または、バケットポリシーが間違っています。
7.ファイルをアップロード
対象のバケットの「オブジェクト」タブを選択し、アプリケーションをデプロイしていきます。
「アップロード」ボタンをクリックするとファイル選択ダイアログが表示されます。Vue.jsのアプリケーションを選択します。
なお、Vue.jsの場合は、以下コマンドによって「dist」フォルダに作成されたものをアップロードします。
npm run build以下のような資源をアップロードします。
再度、ウェブサイトのエンドポイントにアクセスします。
以下のようにアプリケーションが表示されればデプロイ成功です。
チュートリアル通りやっただけですが、実際自分の手を動かして結果が出せるとうれしいですね。
バケットポリシーを戻す
S3上でアプリケーションが動きましたが、このままだと誰でもアクセスできる状態です。
アクセス数が多くなりS3の無料枠の範囲を超えると料金がかかってしまいます。なので、ポリシーを元に戻して誰もアクセスできないようにしておきます。
まとめ
AWSでVue.jsアプリケーションの公開する方法のまとめ
本記事では、Vue.jsのアプリケーションをAWS上で公開するための方法を紹介しました。
昨今では、クラウドとSPAアプリケーションを利用したアプリケーションの開発が主流となっています。メジャーなクラウドサービスであるAWSでSPAアプリケーションを公開する方法を習得することは技術者として、有用なスキルであるため、本記事を紹介しました。
皆様の参考となれば幸いです。
コメント