Amplify UI とドメイン

ここでは、前回作成したリポジトリの続きから進めていきます。まずはAmplifyのUIからプロジェクトを作成し、カスタムドメインの設定とルーティングの構成を行っていきます。

Amplify UI

AWSコンソールにログイン後、 「Amplify」と検索し、以下の表示された画面から 「アプリケーションをデプロイ」 をクリックします。

以下の通りにGithubレポジトリを選択し、次へをクリックします。(1)

この操作でブラウザが起動し、GitHub にログインする画面が表示されます。すべてのレポジトリを連携させるか、特定のレポジトリのみを選択するかを選べます。

ログインと連携が完了すると、以下の画面でプルダウンメニューから連携済みのリポジトリを選択できるようになります。次へをクリックします。

「YMLファイルを編集」ボタンをクリックすると、以下のように設定用のタブが開きます。タブが表示されたら、この .yml ファイル(1)をコピー＆ペーストし、保存をクリックしてから、次へ進んでください。

使用する .yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - pip install mkdocs-material
    build:
      commands:
        - mkdocs build
  artifacts:
    baseDirectory: site
    files:
    - "**/*"
  cache:
    paths: []

上記の .yml は Amplify にビルドの方法を教えているスクリプトです。

preBuild: ビルドの前に mkdocs-material をインストール
build: mkdocs コマンドを使って、静的なウェブサイトをビルド
baseDirectory: siteは mkdocs build で生成されたファイルが site フォルダに出力されていることを指定

以下の確認画面が表示されますので、そのまま保存してデプロイをクリックします。

数分後に以下のような「デプロイ済み」の画面が表示されるかを確認してください。確認ができたら②の「デプロイされた URL にアクセス」をクリックし、ウェブサイトへアクセスします。(1)

もしエラとなった場合は、デプロイタブを開き、どこでエラとなったかを明確にし、切り分けを行ってください。

そして… voilà！これでWebサイトが完成です！💯💯💯

自動デプロイ

ホームページを編集して、レポジトリへプッシュすることでAWS Amplifyが自動的にデプロイしてくれます。早速ですが、試してみましょう。

ホームページの修正

以下の.mdをコピーし、/docs/index.mdの中にペーストしてください。

※ ChatGPTさんが以下を書いてくれました。🙏

# ようこそ！🌟

このサイトは、**Markdown と AWS をこよなく愛する人のための楽しい技術ドキュメント集**です。

静的サイト？自動デプロイ？IaC？  
「なんか聞いたことあるけど、よくわからん！」って人も、「全部やってるぜ💪」って人も大歓迎！

---

## 🔧 このサイトでできること

- Markdown だけでブログやドキュメントが書ける！
- MkDocs + AWSで超手軽にデプロイ！
- 自分だけの技術仕様書サイトが作れる！
- QiitaやZennに頼らず、**自分の庭で発信できる！**

---

## 🧠 こんな人にオススメ！

- AWS にちょっとでも興味がある人
- Markdown を書いてるとテンション上がる人
- 技術仕様書やチュートリアルを残したい人
- 「Zenn? Qiita? いや、自分のサイトが欲しい！」って人

---

## 🔮 今後の予定

- AWS SAM や Terraform で IaC デプロイ！
- ダークモード対応！（したい…）
- コメント機能？検索？まだまだやりたいことだらけ！

---

## 📣 ひとこと

このサイトはまだ成長中のひよっこですが、少しずつ便利に楽しく進化させていきます🐣  
ぜひ気軽にのぞいていってくださいね！

ローカルで試しましょう！

サーバが止まっていれば、以下で起動させましょう！
```
(.venv) $ mkdocs serve
```
127.0.0.1:8000 にてブラウザを起動させてください。

プッシュによる自動デプロイ💪！

プッシュ

bash

(.venv) $ git add docs/index.md 
(.venv) $ git commit -m "Update home page /docs/index.md"
[main 633a19b] Update home page /docs/index.md
1 file changed, 39 insertions(+), 17 deletions(-)
rewrite docs/index.md (98%)
(.venv) $ git push
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 12 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 1.05 KiB | 1.05 MiB/s, done.
Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:BobbyTumur/static-website.git
  407086e..633a19b  main -> main

Amplify UI上で確認

プッシュしたら、すぐに自動で開始します。💪

ビルドの確認成功の確認①成功の確認②

ドメインの設定 (Optional)

なお、AWS Amplify は初期設定の時点で自動的に独自のドメインを割り当て、SSL証明書の設定も行ってくれます。そのため、すぐにHTTPS対応のサイトを公開することができます。

そこで、独自ドメイン（カスタムドメイン）を使いたい場合は、Route 53 を利用するとスムーズに連携できます。たとえば、Route 53 上にドメインがあれば、alias (A) レコードの手動設定などをせずに、Amplify UI から簡単に紐付けが可能です。

Route 53以外のドメインの場合

Amplifyより提供されるドメイン main.plgtu.amplifyapp.com　をドメイン管理コンソールにて、以下のレコードの登録してください。

example.your-domain.com IN CNAME main.plgtu.amplifyapp.com

クリーンアップ

アプリケーション設定　→　アプリの削除

完了🔥

上記で、静的サイトをGithubレポジトリに配置し、シンプルなAmplify設定でデプロイさせました。これ以上な設定（認証、ストレージ、データベース、Lambda関数）なども可能ですので、さらなる仕様書に関しては Amplify仕様書 をご参照ください。✌️

Amplify UI と ドメイン