LoginSignup
4
1
@mkttks

AWS Cloud9 + AWS CodeCommit + AWS AmplifyでWebサイトを公開してみる

Last updated at Posted at 2023-07-02

やりたいこと

AWSでWebサイトを公開したい！
ついでにコーディングしたら自動でWebサイトも書き換わってほしい！

という内容です。
具体的には、AWS Cloud9 + AWS CodeCommitでAWS上に開発環境を構築し、AWS CodeCommit + AWS AmplifyでWebサイトを公開します。

内容は下記の公式チュートリアルに沿ったものです（ただし公式チュートリアルではCloud9は使用しません）。
https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-apigateway-s3-dynamodb-cognito/

システム構成図

AWS1_pict.png

  1. WebエンジニアがAWS Cloud9上でHTML、JavaScript、CSSなどを作成/編集します。
  2. WebエンジニアがCloud9からAWS CodeCommitにソースコードをアップロードします。
  3. AWS AmplifyがCodeCommitの変更を検知しWebサイトを自動デプロイします。
  4. ユーザがAmplifyによって生成されたURLにアクセスするとWebサイトが閲覧できます。

手順

AWSアカウントを作る

AWSを使うためにはAWSアカウントが必要です。
まだ作っていない場合はこちらのチュートリアルを参考にアカウントを作成します。
https://aws.amazon.com/jp/register-flow/

注意：
AWSはアカウント作成時に支払情報の入力が必要です。
また本チュートリアルも条件によっては課金が発生する可能性があるので各自調べた上で進めることを推奨します。
AWSの無料利用枠に関する公式の説明はこちら↓
https://aws.amazon.com/jp/free

IAMユーザでログインする

最初にIAMユーザでログインします。
まだIAMユーザを作っていない場合はIAMユーザを作成してください。
IAMユーザの作成手順はこちらの記事です。
https://qiita.com/mkttks/items/599ba345f3f1bc6775ec

CodeCommitでGitリポジトリを用意する

それではCodeCommitを使ってソースコードを管理するためのGitリポジトリを用意しましょう。

リージョンを選択する

作業に入る前にAWSのリージョンを設定します。リージョンをざっくり説明すると「どこの国（地域）にデータを置くか？」を選択する機能です。別にどこを設定してもいいのですが、作業中に知らずにリージョンを切り替えてしまうと「前のステップで作成した○○がない！」となってしまうので作業を始める前にあらかじめ決めてしまいます。
ここでは東京リージョンを選択しましょう。

  1. AWS Console上部の右のほうに「バージニア北部」などの地名が書かれたタブがあるのでクリック
    image.png
  2. プルダウンメニューから「アジアパシフィック (東京) ap-northeast-1」をクリック
    image.png

これで東京リージョンに切り替わりました。
image.png

Gitリポジトリを作成する

ここからはCodeCommmitを使ってGitリポジトリを作成していきます。

  1. AWS Consoleの検索欄に「codecommit」と入力
  2. 出てきたCodeCommitのロゴをクリック
    image.png
  3. 「リポジトリ」->「リポジトリの作成」をクリック
    image.png
  4. 「リポジトリの設定」->「リポジトリ名」で任意の名前を入力（ここでは公式チュートリアルに従ってwildrydes-siteとします）
    image.png
  5. 「作成」をクリック
    image.png

Gitリポジトリが作成されました。
image.png

Cloud9で開発環境を作成する

続いてCloud9を使ってAWS上に開発環境を構築します。

  1. AWS Consoleの検索欄で「cloud9」と入力
  2. Cloud9のアイコンをクリック
    image.png
  3. 「環境」->「環境を作成」をクリック
    image.png
  4. 「環境を作成」->「詳細」->「名前」で任意の名前を入力
    image.png
  5. （いろいろと項目がありますが今回はお試しということで）すべてデフォルトのまま「作成」をクリック
    image.png

AWS上に開発環境ができました。「Cloud9 IDE」タブの下の「開く」ボタンを押すと別タブで開発ウィンドウが開きます。
image.png
このウィンドウを別タブで開いた状態で次のステップに進んでください。
image.png

開発環境からGitリポジトリを更新できるようにする

Cloud9で作った開発環境からCodeCommmitで作ったGitリポジトリを更新できるように設定します。

IAMユーザのGit認証情報を生成する

まずIAMユーザでGitリポジトリにアクセスできるようにIAMユーザのGit認証情報を生成します。

  1. AWS Consoleの検索欄に「iam」と入力
  2. 出てきたIAMのアイコンをクリック
    image.png
  3. 「ユーザー」からユーザ名（Admin）をクリック
    image.png
  4. 「セキュリティ認証情報」タブを選択
    image.png
  5. 「AWS CodeCommit の HTTPS Git 認証情報」->「認証情報を生成」をクリック
    image.png
  6. 「認証情報を生成」ダイアログのユーザ名とパスワードをメモする
    （*ダイアログを閉じると二度と確認できなくなるので注意）
    image.png

開発環境にGitリポジトリをクローンする

先ほど生成したIAMユーザのGit認証情報を使ってCloud9の開発環境にGitリポジトリをクローンします。

  1. AWS Consoleの検索欄に「codecommit」と入力
  2. 出てきたCodeCommitのロゴをクリック
    image.png
  3. 「リポジトリ」で今回作ったリポジトリにチェックを入れる
  4. 「URLのクローン」->「HTTPSのクローン」をクリック（クリップボードにURLがコピーされます）
    image.png
  5. Cloud9で作った開発環境のウィンドウに移動
    image.png
  6. 画面下部にターミナルがあるためそこにコマンドを入力していく
    （*表示されていない場合は「Window」->「New Terminal」で開けます）
    image.png
  7. ターミナルにgit cloneコマンドを入力
    git clone https://xxxxxxxxxxxxxxxxx
    （https://xxxxxxx...は「HTTPSのクローン」でクリップボードにコピーしたURL）
  8. 求められた場合、指示に従ってIAMユーザのGit認証情報（ユーザ名、パスワード）を入力する

成功すると画面左側にクローンしたリポジトリ名のディレクトリ（wildrytes-site）が作成されました。ディレクトリはまだ空の状態です。
image.png

開発環境からGitリポジトリを更新してみる

それでは開発環境からCodeCommitのGitリポジトリを更新できるかやってみましょう。今回は公式のチュートリアルで配布されているサンプルを利用します。

  1. ターミナルで現在のディレクトリからgitリポジトリのディレクトリに移動する
    cd ./wildrydes-site
  2. ターミナルで公式が配布しているサンプルコードをダウンロードする
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
  3. ダウンロードが完了するとwildrydes-siteディレクトリが以下のようになる
    image.png
  4. Cloud9の開発環境の変更をCodeCommitのGitリポジトリに反映させるため、ターミナルで以下のコマンドを入力
    $ git add .
    $ git commit -m 'new'
    $ git push

CodeCommitにアクセスして変更が反映されているか確認します。
反映されていれば開発環境の構築は成功です！
image.png

AmplifyでWebサイトを公開する

最後にAmplifyを使ってWebサイトをホストします。

Amplifyホスティングを開始する

Amplifyホスティングを開始してCodeCommitのソースコードからWebサイトを公開します。

  1. AWS Consoleの検索欄に「amplify」と入力
  2. AWS Amplifyのロゴをクリック
    image.png
  3. 「使用を開始する」->「Amplifyホスティング」->「使用を開始する」をクリック
    image.png
  4. 「Amplifyホスティングの開始方法」->「既存のコードから」で「AWS CodeCommit」にチェックを入れる
  5. 「続行」をクリック
    image.png
  6. 「リポジトリブランチの追加」->「AWS CodeCommit」->「レポジトリの選択」でwildrydes-siteを選択
  7. 「ブランチ」で公開したいブランチを選択（master）
  8. 「次へ」をクリック
    image.png
  9. 「ビルドの設定」->「アプリケーションの構築とテストの設定」->「AWS Amplify がプロジェクトのルート・・・」にチェックを入れる
    *これにチェックするとCodeCommitの更新が自動的にWebサイトに反映されるようになります
    image.png
  10. 「次へ」をクリック
    image.png
  11. 「保存してデプロイ」をクリック
    image.png

デプロイが完了すると下記画面の「デプロイ」が緑色になります。
左下のURLをクリックしてアクセスしてみましょう。
image.png
このWebページが表示されたら成功です！お疲れ様でした。
image.png

動作確認

Cloud9 + CodeCommit + Amplifyの開発環境が構築できたので、Cloud9でコーディングしてCodeCommitにgit pushすると変更がWebサイトに反映されるはずです。試してみましょう。

  1. Cloud9の開発環境にアクセス
  2. 「wildrydes-site/js/index.html」を開く
    image.png
  3. headタグのtitleを好きな文字列に変更
    image.png
  4. 開発環境の変更をCodeCommitのGitリポジトリに反映させるため、ターミナルで以下のコマンドを入力
    $ git add .
    $ git commit -m 'update title'
    $ git push

Amplifyのwildrydes-siteの「Hosting environments」を見ると「プロビジョン」「構築」「デプロイ」の色が変わって変更が自動でデプロイされていることがわかります。

反映されたらもういちどURLにアクセスしてみましょう。
image.png
無事タイトルが変わりました！
image.png

まとめ

今回はAWS Cloud9とAWS CodeCommitとAWS Amplifyを使ってWebサイトの開発環境を構築しました。
次回はAWS Cognitoを使用してこのチュートリアルで作ったWebサイトにログイン機能を実装していきます。
https://qiita.com/mkttks/items/5220724fdd10ff51333d

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
1