【AWS】EC2に静的ファイルをデプロイしてnodeで公開する手順

個人的な備忘録としてEC2に静的ファイルをデプロイした手順をまとめます。

EC2インスタンスとhtml+javascriptのソースコードはすでに作成済みである前提です。

EC2の設定

EC2のAMIはAmazon Linux 2を選択します

また、インバウンドでSSH(22)・HTTP(80)・カスタム(3000）ポートを開放しておきます

WindowsからSSHで接続を行います

ssh接続に使うpemファイルはドキュメントフォルダに格納しました。Usersの配下のフォルダでないと、権限関係のよくわからないエラーになったためです。

pemファイルのディレクトリに移動して、sshコマンドを実行します。下記は適宜変更する必要があります。

cd C:UsersusernameDocumentspem
ssh -i "test.pem" [email protected]

インバウンドの設定でSSH(22)を設定しているのに、接続できない場合がありました。原因を調べていたところWindowsのファイアウォールで送信規則にSSHのポートを開放していなかったためでした。。。

sudo yum update
## 必要なパッケージのインストール
sudo yum -y install git gcc-c++
## nvmをgithubからclone
git clone https://github.com/creationix/nvm.git ~/.nvm

nvmコマンドのパスを通すために、bash_profileを編集

vi .bash_profile

下記を追記して保存

viの使い方：iでINSERTモード、保存する際はescとshift+ZZで完了

source ~/.nvm/nvm.sh

nvmコマンドを叩いて、パスが通ったか確認します

エラーになる場合は一度exitで抜けてから再度ssh接続し、確認します

## インストール可能なバージョンを表示
nvm ls-remote

## node.jsのインストール
nvm install v16.15.1

// バージョンの確認
node -v

ソースコードはローカルですでに存在している前提です

githubからcloneするか、ローカルからコピーしますが、今回はローカルからscpコマンドでファイルをコピーします

pemファイルのディレクトリに移動し、scpコマンドを実行します。-rでディレクトリごとコピーすることができます。

cd C:UsersusernameDocumentspem
scp -i "test.pem" -r コピーしたいディレクトリ [email protected]:homeec2-user

http-serverというモジュールをインストールして使う方法です

https://www.npmjs.com/package/http-server

プロジェクトのディレクトリに移動し、3000ポートを指定してhttp-serverコマンドを実行します

cd project

## http-serverのインストール
npm i -g http-server

## 3000ポートで公開する
http-server -p 3000 -s

上記を実行した際に、「permission denied」と表示されました。node-module内のhttp-serverの権限設定に不備があったようです。

権限の変更をnode-module内に対して行いました。chmodコマンドで-Rを付けると、ディレクトリ内全体に対して適用されます。

chmod -R 755 ./node-module

これでアプリの公開設定が完了しました。ブラウザのURLにパブリックIPアドレス:3000でアクセスするとアクセスできることが確認できます。