Help us understand the problem. What is going on with this article?

AWS S3にAngularのプロジェクトを配置して公開する(初心者向け)

AWS S3にAngularのプロジェクトを配置して公開する(初心者向け)

by SuyamaDaichi
1 / 18

S3×Angularということで、S3にAngularのプロジェクトを置いて、ホスティングする方法です。

セキュリティ周りに関しては説明していません。とにかく公開したい人向けです。


S3のバケットを作る

用語

バケット…フォルダの一つ上の概念容量無制限のハードディスクみたいなもの。バケット名は世界中で一意である。


バケット作成手順1(バケット名を決める)

世界で一つだけのバケット名を決めてください。


バケット作成手順2(オプションの設定)

今回はそのまま「次へ」を押下してください。


バケット作成手順3(アクセス許可の設定)

ここでは、アップロードされるファイルに対するアクセスに誰をブロックするかを指定します。今回はひとまずすべてのチェックを外します。


バケット作成手順4(確認)

確認画面が表示されるので「バケットを作成」を押下するとバケットが作られます。


【Tips】AWS CLIを使うと

AWS CLIを使えば

aws s3 ls

で作ったバケットを確認できます。


作ったバケットにAngularの資材を配置する

ng build

コマンドをAngularのプロジェクト配下で実行すると/distディレクトリにコンパイルされたファイルが生成されます。

これを上記で作ったS3のバケットにアップロードします。方法は2つ。


【方法1】GUIで!

先ほど作成したバケットに下記の通りドラッグアンドドロップなどでdist/プロジェクト名フォルダ内
を全選択してアップロードします。

「アップロード」を押下します


【方法2】CUIで!

aws s3 sync dist/Angularのプロジェクト名 s3://作成したバケット名
> 例:aws s3 sync dist/Angular-With-S3 s3://angular-s3-trial


ホスティング(公開するため)の設定をする


設定1(ホスティングの設定)

バケットを選択するとサイドバーが出現するので「プロパティ」をクリック

「Static website hosting」からホスティングのための設定をします。


設定2(バケットポリシーの設定)

続いて、バケットポリシーを設定します。
アクセス権限タブ > バケットポリシーに下記の内容を貼り付けて保存します。

{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::【ここをバケット名に置換】/*"
       ]
     }
   ]
}

保存を押すと全世界に公開されます。

http://{バケット名}.s3-website-ap-northeast-1.amazonaws.com/を開いてみてください!


(CLIでアップロードした場合のみ)ContentTypeを指定

ここで一度、公開されたサイトを開いてみます。

真っ白な画面が表示されます。


コンソールを見てみると、いくつかのjsが、ただのテキストファイルtext/plainとして読み込まれています。
S3上でjsファイルにContentTypeを定義する必要があります。


コンソールでエラーが出ているファイルを選択します。

プロパティから

メタデータを選択し、

text/plainからtext/javascriptに書き換えます(チェックボックスを入れて編集できます)

同様にエラーが出ているJavaScriptファイルに対応していきます。


全て対応したら再度読み込んでみましょう

キャッシュが残っていると再発する場合があるので、キャッシュを削除して再読み込みしてみましょう。

【Tips】Chromeの場合、Ctrl + F5でキャッシュを削除して再読み込みしてくれます。

SuyamaDaichi
都内でSEやってます。 Angular、C#、JavaScript、その他いろいろ触れてます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした