こんにちは、のみぞうです。ようやく最近、AWSを触っている初心者です。
私はむかし物理サーバをガチャガチャやる仕事をしていたことがありますが(単なる作業員であって今流行のインフラエンジニアというほどではない)今の時代はラックマウントしたりケーブルつないだりめちゃくちゃ重いUPS運んだりCD-RからOSインストールしたりしなくていいんだなあなんて、老害みたいなことを思っています。
AWS上にWEBサイトを公開するのにも、多分色んな方法があると思うんですが(多すぎてよくわからない)ECSのFargateというものと、ECRというものを使ってみたかった。つくるからには目的がないと面白くないのでサンプル用のランディングページ(LP)の公開でもしてみます。今後なんかの静的ファイル公開するときにも使えるかもしれないし、ポートフォリオ作るときとかにいいかもね。
Dockerイメージをつくる
最初はローカルで作業します。私は普段からKali Linuxを使ってますがわりと少数派だと思うので各自適宜読み替えてください、Macの人ならだいたいコマンド同じだと思う。Winはわからん。ごめん。
# 作業用ディレクトリつくる
┌──(nmz㉿kali)-[~/work]
└─$ mkdir lp
# 移動する
┌──(nmz㉿kali)-[~/work]
└─$ cd lp
# 作業用あとで使うsrcディレクトリ作る
┌──(nmz㉿kali)-[~/work/lp]
└─$ mkdir src
# Dockerfileつくる
┌──(nmz㉿kali)-[~/work/lp]
└─$ vi Dockerfile
Dockerfileを書く
調べながら適当に。今回はnginx使います。
# 最新のnginxを使う
FROM nginx:latest
# Dockerfileが置いてある場所のsrcディレクトリの中身を/usr/share/nginx/html(nginxの公開ディレクトリ)にコピーする
COPY ./src /usr/share/nginx/html
srcディレクトリにLPの中身を入れておく
今回はサンプルとしてこちらでお借りしてきたものをそのまま使います
もちろん自分で作ったhtmlとかある人はそれでも良いです

ECRのリポジトリをつくる
ECR(Elastic Container Registry)というのを使うとカスタマイズしたコンテナイメージをAWS上で管理することができる上に展開もいい感じに楽らしいと聞いたのでやってみる。
AWSマネジメントコンソールにログインします。検索ボックスにECRって入力するとレジストリってのが出てくるのでそれをクリックします。

リポジトリを作成をクリックします。

自分で使うだけなので普通にプライベートにする。リポジトリ名は後から見返したときにわかるように、何用のリポジトリかってのをわかるように名前つけたほうがいいと思う。まあ適当に。
リポジトリが作成されると一覧に表示されるので、チェックを入れてプッシュコマンドの表示をクリック

コマンドが表示されて親切!
1.認証トークンを取得し、レジストリに対して Docker クライアントを認証
AWS CLIのコマンドが表示されるので、ここのところをクリックしてそのままAWS CLIにコピペする

実行結果

パスワードが暗号化されずに保存されてるよ!って警告されてるのが気になる…見てみると確かにトークンが保存されている。今度調べて直そっと。

2.Dockerのイメージを構築する
またここをクリックしてDockerfileがあるディレクトリでAWS CLIにペースト

シュッとDockerイメージができた

3. イメージにタグをつける
ここをクリックしてAWS CLIにペースト

コマンドライン上では特に返事がない。便りがないのは良い証拠。
4. リポジトリにプッシュする
ここのコマンドをコピーしてそのままコピペ

実行結果

AWSコンソールに戻ってイメージ名をクリックするとプッシュ日時が表示されててイメージがプッシュされたことがわかる。

この画面はあとで使うので続きの操作は別タブでやることをおすすめします。
ネットワークの設定
ネットワーク周りの設定をやる。VPC(Vitrual Private Cloud)と入力してサービスを呼び出す。

VPCの作成
VPCの作成をクリック。名前は適当に。
CIDR(サイダー)というのはそのVPCのなかで利用するIPアドレスの範囲らしい(個人的には昔のVLANみたいなイメージを持っていますがあってるかは不明)プライベートアドレスを指定するのが推奨だそうなのでこれも適当に決めて入力しておく。

サブネットの設定
VPCの中に更にこまかいネットワークの単位であるサブネットの設定というのがいる。
左のメニューからサブネットをクリック

サブネットの作成をクリック
さっき作ったVPCを選択して利用する範囲のCIDRブロックを指定する。今回は深く考えずになんとなく/25 にした。利用可能なIPアドレスは126個。そんなに使わん。

インターネットゲートウェイをつくる
左メニューからインターネットゲートウェイをクリック

名前を適当につけてインターネットゲートウェイの作成をクリック

インターネットゲートウェイができたらアクションからVPCにアタッチ

利用可能なVPCにさっき作ったVPCを選択してインターネットゲートウェイのアタッチ

ルートテーブルの作成
サブネットごとにネットワークの通信経路をルートテーブルで指定する。このテーブルの情報をもとにネットワークがどこにどう流れるかが決まるよ。
サブネットとインターネットの世界をつなぐ設定をするよ

ルートテーブルを作成

作成できたらルートを編集をクリック

ルートを追加をクリックして0.0.0.0/0(インターネット)の通信をインターネットゲートウェイに向けるルートを追加する。変更を保存。

次にサブネットの関連付けをクリック

さっき作ったサブネットにチェックを入れて関連付けを保存

作ったサブネットが明示的なサブネットの関連付けってところに表示されるようになる

ECSからコンテナの起動
ECS(Elastic Container Service)とはタスク定義を元にのコンテナたちの数や状態を維持してくれるゴッド的な存在らしい。さくさく使っていく。検索ボックスにECSと入力してサービスを呼び出す

クラスターの作成
クラスターの作成をクリック。ここまでくればもう名前つけて今まで作ってきたやつを選ん作成するだけ。

ちょっと待つと正常に作成されましたって出る

タスク定義
左メニューのタスク定義から機能を呼び出して新しいタスクの作成

タスク定義というのをするとコンテナイメージ何使うとか起動数いくつとか設定ファイル(.json)をつくってくれる。
なんのコンテナだかわかるような名前をつけてイメージURIのところにさっき作ったECRのリポジトリのURIをコピペで入力する。

タスクロールは付与しないと公開できないのでつける。

確認して作成を押すとタスク定義ができる。
サービスのデプロイ
少し待ってからクラスターの画面に移動する。さっき作ったクラスターが表示されてるはずなのでクリック。

サービスタブでデプロイ

いい感じに設定してデプロイする

ちょっと待つとステータスがアクティブになってタスクが実行されているはずー。いえーい。
確認
ちゃんと公開できてるか確認していきましょう。
クラスターの中のタスクタブをクリックして、実行中のタスクをクリックする

パブリックIPのオープンアドレスってところをクリックする

静的ページの公開ができたよー。

これからどうする?
DNSとSSLの設定とかすると本格的にランディングページとして運用できると思います。
そのへんはこないだやったので割愛(そのうちまとめるかも)
まとめ
わざわざECRからランディングページを公開するようなシーンがあるかは謎ですが…今回とにかく使ってみることが目的だったので達成できてよかったです。なんか間違ってることとかあったらこっそり教えていただけるとありがたいです。
今回AWSはそれぞれのサービスや機能の概念がわかりにくいのでこれ↓を参考に読みました。1日ではわからないと思いますが…めちゃくちゃ優しく書いてあってわかりやすくておすすめです。
少しでもお役に立てれば嬉しいです。では今回はこのへんで。