ローカル環境で作成したHTMLファイルなどをAWSのEC2インスタンスにアップロードして、ブラウザから確認できるところまでやっていきましょう！
EC2インスタンスを作成
AWSのコンソール画面よりEC2を選択します。
「インスタンス→インスタンスの起動」より下記画面で設定を行います。
まずはインスタンスの名前とAMIの設定を行います。AMIは無料枠に収まるものを使用します。
次にインスタンスタイプを選択します。
こちらも無料枠に収まるt2.microを選択します。
最後にセキュリティグループの設定です。
編集のボタンをクリックすると下図の画面になります。
ルールにSSHとHTTPの接続を許可するように設定します。
また、今回はテストなのでソースタイプを自分のIPのみにします。
「インスタンスを起動」をクリックして終了です！
ローカルファイルをアップロード
まずは、EC2インスタンスにアップロードするファイルを作成します。
今回は”hello”と記載したHTMLファイルを用意します。
echo hello>index.html次に今回の目的であるファイルのアップロードを行います。
使用するコマンドは「scp」です。
scpコマンドはsshを使用してネットワーク越しに、ファイル等をコピーするコマンドです。
基本的なコマンドの書き方は以下になります。
scp [オプション] コピー元パス 保存先パスオプションは下表のとおりです。
| オプション | 機能説明 |
|---|---|
| -i 秘密鍵ファイル | 秘密鍵を使用する場合に使用 |
| -l 帯域 | 通信帯域を制限する場合に使用（Kbit/s単位） |
| -P ポート番号 | SSHの接続ポート番号が接続先で変更されている場合に使用 |
| -p | コピー元データの更新時間やパーミッション（モード）情報を保持させる |
| -q | サイレントモード 実行状況などの詳細状況を表示させない |
| -r | フォルダをコピーする際に使用 ディレクトリ内のデータを再帰的にコピーする |
| -C | データを圧縮しコピーする |
| -v | 冗長表示モード 詳細な経過情報を表示させる（デバッグ時などに使用） |
というわけで、以下のようにコマンドを入力すると指定したファイルをEC2インスタンスへアップロードすることができます。
scp -i [秘密鍵のPath] index.html ec2-user@[パブリックIP]:~scpコマンドでエラーが発生した場合
ファイルの権限によるエラーの可能性があります。chmodコマンドで権限を変更して下さい。
例:chmod 744 index.html
WebブラウザからHTMLファイルを表示
先程のEC2インスタンスへアップロードしたHTMLファイルが本当に送られたか確認してみましょう。
以下のコマンドでEC2インスタンスへアクセスすることができます。
ssh -i [秘密鍵のPAth] ec2-user@[パブリックIP]EC2にSSH接続ができたら、lsコマンドでindex.htmlがあるか確認してみましょう。
次にWebページを表示するために必要なWebサーバーをインストールします。
今回は「nginx」を使用します。
以下のコマンドでEC2インスタンスへnginxをインストールすることができます。
sudo amazon-linux-extras install nginx1無事にインストールが終わったら次に起動してみましょう。
この状態でもWebブラウザからEC2インスタンスのパブリックIPにアクセスを行うとデフォルトのWebページが表示されると思います。
service nginx startアップロードしたファイルが表示されるように変更します。
以下のコマンドでindex.htmlファイルを移動します。
移動が終わったらEC2インスタンスのパブリックIPにアクセスしてみましょう。
mv index.html /usr/share/nginx/html/index.html以上でローカルファイルをEC2インスタンスへアップロードしてWebブラウザから確認する方法です。
おわりに
結構手間が多いので、GitHub Actionsを用いたCI/CD構成にした方がとても楽になりそうですね。
といういことで、今度はCI/CD構成にチャレンジしたいと思います！
