チュートリアル「静的ウェブサイトをホスティングする」をやってみる

4688 ワード
AWS tutorial amplify GitHub 初心者 GitHub テキストリンク

はじめに

このチュートリアルを実際にやってみた記録です。

できるようになること

GitHubに登録した静的なウェブサイトをAmplifyで公開します。GitHub上のコンテンツが更新されると自動的に再デプロイされる仕組みになります。

準備するもの

  • AWSのアカウント
  • GitHubのアカウント

手順

実際のチュートリアルの中ではReactのコンテンツを作っていますが、React環境がなかったためindex.htmlファイルが一つの簡易コンテンツ版としました。gitコマンドの操作わからなかったのでGitHubのウェブサイトから操作しています。

GitHubにRepositoryを作成してhtmlファイルを置く

  1. GitHubにログインし、右側の「+」マークを押して、「New repository」を選択する。

  2. 「Repository name」を適当に入力したら「Create repository」ボタンを押す。

  3. Repositoryができたら、直下に下記のようなhtmlファイルを登録します。

index.html
<html>
<head><title>My Static Web</title></head>
<body>
<h1>Hello World!</h1>
Nice to meet you.
</body>
</html>

ブランチ名は「main」となっています。

これでコンテンツの作成が終わりました。

Amplifyに接続する

  1. Amplifyのコンソールを開いて右上の「New app」ボタンから「Host web app」を選択します。
  2. 「From your existing code」のメニューで「GitHub」を選んで「Continue」ボタンを押します。
  3. ここで初めての場合GitHubの認証が行われます。GitHubのUIDとPASSWORDが必要になります。
  4. 認証が完了したら先ほどのリポジトリとブランチを選んで「次へ」ボタンをクリックします。

  5. 「ビルド設定の構成」の画面が出てくるので、「Allow AWS Amplify.....」にチェックを入れて「次へ」をクリックします。

  6. 確認画面で「保存してデプロイ」をクリックします。

  7. デプロイが少しずつ進んでいきます。


  8. デプロイが完了したら、左側のプレビュー画面かURLをクリックするとデプロイされた画面が表示されます。

GitHubのファイルを更新する

  1. GitHubでファイルを更新するたびにAmplifyが自動で再デプロイを行います。ちなみにビルド中にURLをクリックすると、変更前のコンテンツが表示されます。

おわりに

これだけの手順で、GitHubにcommitしたら自動でデプロイ公開されるので、便利さに驚きました。

参考文献