自分のホームページを公開する

はじめに

短いプロフィールを編集し、SCP で EC2 に公開して実際のページの変更を確認します。

先に前段のポートフォリオラボを完了してください。この環境は必要な前段機能と独自のリソースを提供します。以前のインスタンス、ファイル、認証情報ではなく知識を引き継ぎます。

認定試験との関連

ラボの概要

プロフィールを準備する

このステップでは、公開中のページを変えずに、新しいローカルのプロフィールを準備します。

このラボでは、すでに実行中の新しいサーバーを用意しています。Terminal と AWS View の準備ができたら、このラボの AWS View からポートフォリオを開き、Alex Morgan を確認します。前のラボのサーバーを探したり、起動し直したりする必要はありません。

ローカルファイルは LabEx の作業環境にあり、リモートファイルはサイトの EC2 サーバーにあります。ローカルを編集しても、リモートは自動では変わりません。

プロジェクトへ移動します。

cd /home/labex/project

プロフィールは JSON ファイルです。名前付きの項目で設定を保存するテキスト形式です。cat はその内容を表示します。変更する前に profile.json を確認しましょう。

cat profile.json

name はナビゲーションとフッター、headline は大きな主見出し、about は短い補足文です。元のプロフィールは JSON 文字列内の \n で改行します。練習用の見出しは 1 行です。 文字列は二重引用符で囲み、項目はカンマで区切ります。

cat > はファイルへの書き込みです。JSON マーカーで囲む here-document が内容を供給します。最後のマーカーまで含めて練習用の 3 項目を書きます。

cat > profile.json <<'JSON'
{
  "name": "Sam Rivera",
  "headline": "Design with purpose.",
  "about": "Brand identities and digital experiences."
}
JSON

読み返して値を確認します。

cat profile.json

ページを更新しても Alex Morgan のままであることを確認します。まだ転送していません。チェックには指定値を使い、完了後に別の文章も試せます。

プロフィールを公開して確認する

このステップでは、準備したプロフィールを公開し、実際のサイトで変更を確認します。

SSH はサーバーへの暗号化接続を提供し、SCP はその接続を使ってファイルをコピーします。用意された ssh_config が、このラボのキーと接続経路を選択します。

website.env にはサーバーのアドレスと識別子が入っています。source で現在の Terminal セッションに変数を読み込み、まずアドレスを表示します。

source website.env
echo "$PUBLIC_IP"

AWS View のアドレスと比較します。$PUBLIC_IP は保存された値を使い、引用符はそれを一つの引数にまとめます。

ローカルの profile.json をサイトへコピーします。-F ssh_config は接続設定、ubuntu は EC2 のユーザーです。コロンでサーバーのアドレスと送信先のパスを区切ります。

scp -F ssh_config profile.json ubuntu@"$PUBLIC_IP":/home/ubuntu/portfolio/profile.json

初回接続では、用意されたサーバーのホストキーを追加したという案内が表示される場合があります。転送の 100% はコピー完了を示します。続いて、ページへの反映を確認します。

このラボの AWS View から開いたサイトを更新します。Sam Rivera、Design with purpose.、Brand identities and digital experiences. が表示されるはずです。アプリはリクエストごとにプロフィールを読むため、再起動は不要です。

最後に、サーバー上のファイルも確認します。SSH アドレスの後のコマンドはリモートで実行され、終了すると Terminal に戻ります。

ssh -F ssh_config ubuntu@"$PUBLIC_IP" cat /home/ubuntu/portfolio/profile.json

リモートの JSON はローカルファイルと一致するはずです。コピーと、それを使うページの両方を確認できました。まだ Alex Morgan が表示される場合は、転送完了、AWS View のアドレス、送信先のパスを確認し、このラボのページを再読み込みします。

公開は完了です。サイトを開いたまま成果を眺めても構いません。次のラボでは別のサーバーを用意し、訪問者の接続を許可するネットワークルールを学びます。

まとめ

ローカルの JSON プロフィールを編集し、SCP で EC2 に公開して、SSH でリモートファイルを確認しました。実際のページの新しい名前と見出しから、変更がローカルにとどまらずアプリに届いたことを確かめました。

公式ドキュメント： Connect to a Linux instance with SSH, transfer files to an instance.