何もできない奴がAWS使って$3で仕事できそうな奴のポートフォリオ作ってみた

皆さんこんにちは、iret株式会社Global Solution事業部の浜田です。
今回は典型記な文系出身者である私がAWSを駆使して簡単なハンズオンをしてみたという内容になります。本当に基本的な知識だけでできる内容なので初学者の方は是非やってみてください。

<h1>注意</h1>
本ハンズオンは有料($3)です。<br>
覚悟してください。

<h1>なぜこのハンズオンを選んだのか</h1>
さて、世の中に無限にある初学者用のハンズオンですが僕がこれを選んだ理由はたった一つです。それは..
<br><br>
<strong>★楽しくないとやる気が出ないから</strong>
<br><br>
まあ個人的に何をやるにもこれが一番だと思ってます。そこで、学生時代からWebデザイナーさん達が作るポートフォリオに憧れていたのでせっかくなのでトライしようと思いました。

<h1>対象者</h1>
EC2, S3, VPCなどがどういったものかは多少知っているが実際触ったことない。SAAの知識があれば十分すぎるくらいです。(AWSアカウントの作り方は今回省きます。)
<h1>今回使うもの</h1>
今回使うものは以下の3つです。
<br>
<br>
・適当に用意したポートフォリオファイル<br>
・S3<br>
・Route53
<h1>今回やること</h1>
今回はS3で持ってきたポートフォリオ用の静的ファイルをホストしてRoute53でドメインを登録します。構成は以下のようになります。

まあ難しいこと言ってますが要は自分で作ったwebsiteに「~.com」的な名前あげてネットに公開できるようにするだけです。


<h2>手順1: ポートフォリオを用意</h2>
残念ながら自分にはかっこいいポートフォリオ作る技術力も美的センスも持ち合わせていないのでサイトからすでにできてる物を持ってきちゃいます。できる人は自分でかっこいいの作っちゃっても構いません。ただ静的website(HTML,CSS,JavaScript等で構成されているもの)にしてください。


今回は以下のサイトから...

https://www.free-css.com/template-categories/portfolio



![スクリーンショット 2023-10-02 13.41.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/a3a9ec5a-00e5-daae-f392-d6e8667b0732.png)


自分は個人的にかっこいいと思うこれをダウンロードして自分のわかるとこに置いときます。


<h1>手順2:ドメイン登録(route53)</h1>
さて、ここからが実際にAWSを動かしていくフェーズになります。まずはRoute５３へ。


![スクリーンショット 2023-10-02 15.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/ef9bf5ba-0d82-561f-8f03-d31b4bedcb9c.png)

Route53の画面で「 ドメインの登録 」のところでお好きなドメイン名を入力。今回は「 portfolio-test.click 」にしています。(.comでもいいですが.clickが$3で一番安いです。)
自分のドメイン名が決まったらそのままチェックアウトして念の為<strong>自動更新を無効</strong>、個人情報等を入力して購入してください。


![スクリーンショット 2023-10-02 16.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/6030f859-df27-98f4-65e1-d21a02bebd2f.png)
![スクリーンショット 2023-10-02 16.13.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/a10a7738-578f-2cc5-f8f0-fab55ae86e92.png)


あとは流れに沿っていくだけで自分おドメインが作れます。



<h1>手順3:バケットを作成(S3)</h1>
次はS3をいじっていきます。

![スクリーンショット 2023-10-02 16.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/cc575dc2-d9e0-4bcf-8dbd-f7620d62951f.png)

まずはS3へ移動し画面のバケットを作成へ。![スクリーンショット 2023-10-02 16.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/e4d4bc3c-9442-e367-4e4e-5fb346893d28.png)
以下の画像のように設定してください。
![スクリーンショット 2023-10-02 16.31.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/a2e0df66-d429-0240-c04a-2dcd1bf95c51.png)

バケット名は先ほど決めたドメイン名と完全に一致させないといけないので気をつけてください。
また、パブリックアクセスを許可する際になんか注意書きみたなの出てきますが無視してOKです。
あとはデフォルトの設定のまま流れに沿っていけばバケット作れます。


<h1>手順4:バケットの設定(S3)</h1>
さてここが今回でおそらく一番めんどくさいとこになります。とは言っても一瞬です。
まずは先ほど自分が作ったバケットをクリックしてこちらの画面に移動してください。

![スクリーンショット 2023-10-02 16.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/2081b922-f81e-2b47-9670-3d2871ea712f.png)


<h3>手順4-1:ファイルのアップロード</h3>
ここでみなさんお待ちかね最初にダウンロードしたポートフォリオファイルをアップロードしていきます。
上の画面の状態からファイルをアップロードするだけです。<strong>ここで気をつけてほしいことが一つ。</strong>それはフォルダごとアップロードするのではなく中のindex.htmlと同列のファイルのみだけアップロードしてください。　下のようになればOKです。

![スクリーンショット 2023-10-02 17.25.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/b6280a4b-022e-7d95-bef2-f4d1ca8125c7.png)


<h3>手順4-2:プロパティ設定</h3>
次は作成したS3のバケットにアップロードしたファイルをホストするよう設定します。

![スクリーンショット 2023-10-02 17.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/1ecc89a8-7090-6052-f914-11972f7e671f.png)

プロパティを選択したら一番下にスクロールして「静的ウェブサイトホスティング」の項目の編集をクリックします。

![スクリーンショット 2023-10-02 17.31.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/b25fdd82-ea9c-5fa7-beca-df8e9e0de8a1.png)

以下の画像と同様に設定して保存してください。
![スクリーンショット 2023-10-02 17.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/0fd77a0f-1aca-2dd3-6ddd-bd9899a7eb7e.png)




<h3>手順4-3:アクセス許可</h3>
このままだとセキュリティの問題で403エラーが返されるので誰でもアクセスできるようにします。<br>
アクセス許可をクリック...

![スクリーンショット 2023-10-02 17.37.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/abf12b57-be50-f9c8-2ae0-e9f641ee8cd3.png)

アクセス許可のタブでバケットポリシーを編集してください。

![スクリーンショット 2023-10-02 17.40.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/38486ddf-9246-10e1-f18c-e61cdf9f9de5.png)



ここで以下のようにポリシを定義してください。("Resource"のarnは自身のバケット名にしてください。)

```ruby:Buket policy
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::portfolio-test.click/*"
        }
    ]
}
```

これで変更保存すれば終わりです。


<h1>手順5:ドメインの関連付け</h1>
実際この時点でブラウザに表示されるようにはなるのですが実用的にするには特定の名前で検索して出てくるようにしないといけません。そのためにホストしたS３バケットとRoute53のドメインを関連付けてきます。


ホストゾーンから自分が作ったドメインをクリックしてレコードを作ります。
![スクリーンショット 2023-10-02 18.04.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/a004e9fc-f22e-14a1-3ba4-a7aeba116abc.png)


ここエイリアスを有効にして以下のように設定

![スクリーンショット 2023-10-02 18.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/4e9288b2-0c07-9c9d-77c3-4b56528ffc96.png)

このまま作成したら数分以内にレコードが作成されます。



<h1>検証</h1>

さて確認してみましょう。
自分おブラウザでドメイン名をタイプ。　



![スクリーンショット 2023-10-02 18.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/3cef0ce9-3b99-cdbb-9f5c-f88846dec608.png)


無事表示されました！
![スクリーンショット 2023-10-02 18.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/cd945483-dcf7-d869-30bf-48a37cd1f2eb.png)







<h1>おまけ</h1>
今回の目標はかっこいいポートフォリオを作るのが目的なので中のファイルを少しカスタマイズしました！
(おそらくこれに一番時間かかった...)

![スクリーンショット 2023-10-02 18.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538605/a4fee743-abd3-3d4a-d184-67ac13cab45c.png)


http://portfolio-test.click/

<h1>まとめ</h1>
いかがでしたでしょうか？結構簡単にホストできたと思います。
S3での静的ウェブサイトのホスティングは実際に業務で使われることもありテストでもよく問われるのでイメージ掴みにもぴったりだと思います。
今後はこちらをベースにもう少し深い内容のハンズオンを考えていきたいと思います。