AWS S3へのコードフラグメントの保存
メニューを表示するにはスワイプしてください
私たちは、カメにエサを与えるためのHTMLコードを作成しました。このコードでは、AWS S3のパブリックバケットにアップロードした画像を使用しています。しかし、スタイルが多いため、そこから直接コードを読むのは非常に不便だったことに気付いたかもしれません。
このことから、画像と同様に特定のコードスニペットもAWS S3にアップロードできるというアイデアが生まれます。例えば、私たちの場合、HTMLページやアプリケーションのCSSスタイルをAWSにアップロードすることで、コードをよりクリーンかつ整理された状態に保つことができ、非常に便利です。
これらのスタイルの管理は簡単です。なぜなら、すべてのインスタンスでスタイルを更新する必要がある場合、S3ファイル内の数行のコードを編集するだけで、そのリンクを参照しているすべてのページに変更が適用されるからです。
ストレージにアップロードしたいスタイルファイルを見てみましょう。
style.css
AWS S3 にスタイル付きのファイルを追加するには、まずファイルを作成し、public bucket にアップロードする必要があります。
これらのCSSスタイルをHTMLコードに適用するには、シンプルな構文を使用します。
<link rel="stylesheet" href="link to your CSS styles here">
スタイルへのリンクの場合、この行は次のようになります。
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
これらの変更後、コードがどれだけ簡潔になったか、そして現在どのように見えるかを確認します。
index.html
このリンクをクリックして進むと、このファイルの内容、特に先ほど作成したスタイルを見ることができます。このようにして、私たち自身もウェブサイトの訪問者も、AWSに保存されたスタイルを閲覧でき、それらを参考にしたいと思うかもしれません。
また、JavaScriptスクリプトをS3にアップロードできることにも注目してください。スクリプトは編集や取り扱いが必要になることが多いため、これは最善の方法ではありませんが、今回は学習のため、実際にアップロードしてコード管理を効率化してみましょう。
以下は、パブリックバケットにアップロードするスクリプトです。
script.js
次に、JavaScript スクリプトファイルをパブリックバケットにアップロードする必要があります。
次に、以下の構文を使用して、リンク経由でスクリプトをコードに追加する必要があります。
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
AWS S3 から script を追加した後、タートル用のコードは次のようになります。
index.html
フィードバックありがとうございます！
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
AWS S3へのコードフラグメントの保存
私たちは、カメにエサを与えるためのHTMLコードを作成しました。このコードでは、AWS S3のパブリックバケットにアップロードした画像を使用しています。しかし、スタイルが多いため、そこから直接コードを読むのは非常に不便だったことに気付いたかもしれません。
このことから、画像と同様に特定のコードスニペットもAWS S3にアップロードできるというアイデアが生まれます。例えば、私たちの場合、HTMLページやアプリケーションのCSSスタイルをAWSにアップロードすることで、コードをよりクリーンかつ整理された状態に保つことができ、非常に便利です。
これらのスタイルの管理は簡単です。なぜなら、すべてのインスタンスでスタイルを更新する必要がある場合、S3ファイル内の数行のコードを編集するだけで、そのリンクを参照しているすべてのページに変更が適用されるからです。
ストレージにアップロードしたいスタイルファイルを見てみましょう。
style.css
AWS S3 にスタイル付きのファイルを追加するには、まずファイルを作成し、public bucket にアップロードする必要があります。
これらのCSSスタイルをHTMLコードに適用するには、シンプルな構文を使用します。
<link rel="stylesheet" href="link to your CSS styles here">
スタイルへのリンクの場合、この行は次のようになります。
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
これらの変更後、コードがどれだけ簡潔になったか、そして現在どのように見えるかを確認します。
index.html
このリンクをクリックして進むと、このファイルの内容、特に先ほど作成したスタイルを見ることができます。このようにして、私たち自身もウェブサイトの訪問者も、AWSに保存されたスタイルを閲覧でき、それらを参考にしたいと思うかもしれません。
また、JavaScriptスクリプトをS3にアップロードできることにも注目してください。スクリプトは編集や取り扱いが必要になることが多いため、これは最善の方法ではありませんが、今回は学習のため、実際にアップロードしてコード管理を効率化してみましょう。
以下は、パブリックバケットにアップロードするスクリプトです。
script.js
次に、JavaScript スクリプトファイルをパブリックバケットにアップロードする必要があります。
次に、以下の構文を使用して、リンク経由でスクリプトをコードに追加する必要があります。
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
AWS S3 から script を追加した後、タートル用のコードは次のようになります。
index.html
フィードバックありがとうございます！
