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://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つを試してチャットを始めてください
